/**
 * [Careers] Job Board (Ashby)
 *
 * The asset manager only enqueues a block's stylesheet when that block
 * is on the page. Since this block can appear without the original
 * Lever-based job board, the styles are inlined here (kept in sync
 * with `job-board.css`) so the block is self-contained.
 *
 * Selectors target `.job-board` for parity — the block container
 * carries both `.job-board` and `.job-board-ashby`.
 */

.job-board {
    background: linear-gradient(0deg, rgba(204, 228, 255, 0.30) 0%, rgba(204, 228, 255, 0.30) 100%), #FFF;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
}
.job-board:before {
    content: '';
    background: url('/wp-content/themes/fx/assets/img/blocks/careers/job-board/line.svg') no-repeat top right;
    width: 544px;
    height: 383px;
    position: absolute;
    top: 0;
    right: 0;
}
.job-board .heading {
    color: var(--Primary-Blue);
    text-align: center;
    font-size: 72px;
    font-style: normal;
    font-weight: 800;
    line-height: 78px;
    letter-spacing: -2.592px;
    margin-bottom: 48px;
}
.job-board .CR-open_post-head {
    margin-bottom: 24px;
}
.job-board .CR-open_post-head .subheading {
    margin-bottom: 48px;
}
.job-board .CR-open_post-filter-container {
    justify-content: flex-end;
    display: flex;
    align-items: flex-end;
}
.job-board .CR-open_post-filter-container > form {
    width: 720px;
    max-width: 100%;
}
.job-board .CR-open_post-filter > div {
    padding: 0;
}
.job-board .CR-open_post-filter > div:not(:last-child) {
    padding-right: 16px;
}
.job-board .subheading,
.job-board .subheading p {
    color: var(--Primary-Darkest-Gray);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.081px;
}
.job-board .subheading h3 {
    font-size: 32px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: -1.152px;
    margin-bottom: 8px;
}
.job-board .subheading p:last-child {
    margin-bottom: 0;
}
.job-board .card-meta {
    display: flex;
    gap: 64px;
    justify-content: center;
}
.job-board .card-meta .card-meta-item {
    width: 125px;
    color: var(--Primary-Dark-Gray);
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.081px;
}
.job-board .card-meta .card-meta-item:last-child {
    width: 250px;
}
.job-board .card-head {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    align-items: center;
    gap: 48px;
}
.job-board .card-head h4,
.job-board .card-head h4 a {
    color: var(--Primary-Blue);
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    text-decoration: none;
    margin: 0;
}
.job-board .open_post {
    border-radius: 16px;
}
.job-board .open_post .open_post-item {
    border-bottom: 1px solid var(--Primary-Blue-Lightest);
    background: #fff;
    border-left: 1px solid var(--Primary-Blue-Lightest);
    border-right: 1px solid var(--Primary-Blue-Lightest);
}
.job-board .open_post .open_post-item:nth-child(3) {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top: 1px solid var(--Primary-Blue-Lightest);
}
.job-board .open_post .open_post-item:nth-last-child(2) {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.job-board .pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
.job-board .pagination ul {
    display: flex;
    list-style: none;
    gap: 16px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.job-board .pagination ul li {
    padding: 0;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #207DE9;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.job-board .pagination ul li a {
    text-decoration: none;
    color: #207DE9;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.378px;
    text-align: center;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.job-board .pagination ul li.active {
    background: #207DE9;
}
.job-board .pagination ul li.active a {
    color: #fff;
}
.job-board .pagination ul li.disabled {
    opacity: .4;
}
.job-board select {
    height: var(--s8, 64px);
    padding: var(--s1, 8px) var(--s2, 16px);
    align-items: center;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--Primary-Darkest-Gray);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    border-radius: 4px;
    border: 1px solid var(--Primary-Light-Gray, #CED4DA);
    background: var(--Primary-White, #FFF);
    background-image: url('data:image/svg+xml;utf8,<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7233 2.53903L8.47331 8.78903C8.38621 8.87643 8.28272 8.94577 8.16876 8.99309C8.05481 9.04041 7.93263 9.06477 7.80924 9.06477C7.68585 9.06477 7.56368 9.04041 7.44973 8.99309C7.33577 8.94577 7.23228 8.87643 7.14518 8.78903L0.895181 2.53903C0.719061 2.36291 0.620117 2.12404 0.620117 1.87497C0.620117 1.62589 0.719061 1.38702 0.895181 1.2109C1.0713 1.03478 1.31017 0.93584 1.55924 0.93584C1.80832 0.93584 2.04719 1.03478 2.22331 1.2109L7.81002 6.79762L13.3967 1.21012C13.5729 1.034 13.8117 0.935059 14.0608 0.935059C14.3099 0.935059 14.5487 1.034 14.7249 1.21012C14.901 1.38624 14.9999 1.62511 14.9999 1.87419C14.9999 2.12326 14.901 2.36213 14.7249 2.53825L14.7233 2.53903Z" fill="%231E212B"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}
.job-board .no-open-positions {
    color: var(--Primary-Darkest-Gray);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.081px;
}

@media screen and (min-width: 1021px) {
    .job-board img.vector-img-bottom-left {
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

@media screen and (max-width: 1439px) {
    .job-board .heading {
        font-size: 56px;
        line-height: 64px;
        letter-spacing: -2.016px;
    }
}
@media screen and (max-width: 1366px) {
    .job-board .card-meta .card-meta-item:last-child {
        width: 150px;
    }
}
@media screen and (max-width: 1024px) {
    .job-board {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .job-board .heading {
        font-size: 32px;
        line-height: 44px;
    }
    .job-board:before {
        display: none;
    }
    .job-board .subheading h3 {
        font-size: 24px;
        line-height: 32px;
    }
}
@media screen and (max-width: 768px) {
    .job-board .CR-open_post-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .job-board .CR-open_post-filter > div:not(:last-child) {
        padding-right: 0;
    }
    .job-board .card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .job-board .card-meta {
        gap: 24px;
    }
    .job-board .card-meta .card-meta-item {
        text-align: left;
        width: auto;
    }
    .job-board .card-head h4,
    .job-board .card-head h4 a {
        max-width: none;
    }
    .job-board .card-meta .card-meta-item:last-child {
        width: auto;
    }
}
@media screen and (max-width: 599px) {
    .job-board .CR-open_post-filter > div:not(:last-child) {
        padding-bottom: 16px;
    }
    .job-board .CR-open_post-filter > div {
        padding-right: 0;
    }
}

/* Ashby-specific overrides */
.job-board.job-board-ashby .open_post-item {
    transition: background-color 0.15s ease-in-out;
}
.job-board.job-board-ashby .open_post-item:hover {
    background-color: var(--Primary-Blue-Lightest, #f5f9ff);
}

/* -------------------------------------------------------------------------
 * Skeleton loading state
 * Server-rendered placeholder cards shown while the job listings are being
 * fetched over AJAX. Removed from the DOM once the fetch resolves in
 * assets/js/blocks/careers/job-board-ashby.js. Mirrors the real card layout.
 * ---------------------------------------------------------------------- */
.job-board .jobs-skeleton {
    border: 1px solid var(--Primary-Blue-Lightest);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.job-board .jobs-skeleton-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding: 24px;
}
.job-board .jobs-skeleton-item:not(:last-child) {
    border-bottom: 1px solid var(--Primary-Blue-Lightest);
}
.job-board .jobs-skeleton-meta {
    display: flex;
    gap: 64px;
    flex-shrink: 0;
}
.job-board .fx-skeleton {
    display: block;
    height: 20px;
    border-radius: 6px;
    background-color: #e9f0fb;
    background-image: linear-gradient(90deg, rgba(233, 240, 251, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(233, 240, 251, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: fx-skeleton-shimmer 1.4s ease-in-out infinite;
}
.job-board .fx-skeleton--title {
    width: 320px;
    max-width: 55%;
    height: 24px;
}
.job-board .fx-skeleton--pill {
    width: 125px;
}
.job-board .fx-skeleton--pill-wide {
    width: 200px;
}
@keyframes fx-skeleton-shimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .job-board .fx-skeleton {
        animation: none;
    }
}
@media screen and (max-width: 768px) {
    .job-board .jobs-skeleton-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .job-board .jobs-skeleton-meta {
        gap: 24px;
    }
    .job-board .fx-skeleton--title {
        max-width: 80%;
    }
}