/* ============================================================
   SINGLE JOB — job-single.css

   Layers the detail-page sections on top of careers.css, which already
   supplies the brand tokens, the button set, the job card and the
   application modal. Enqueued after it, and depends on it.

   Desktop is a two-column split with a sticky summary card. Below
   980px the sidebar unsticks and moves under the copy, and a compact
   apply bar pins to the bottom of the viewport instead — so the action
   is always reachable without covering what you are reading.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.job-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 6vw, 4.5rem);
    background: linear-gradient(160deg, var(--car-deep) 0%, #1A0338 55%, #2C0752 100%);
    color: #fff;
}

.job-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.job-hero__glow {
    position: absolute;
    top: -30%;
    right: -8%;
    width: min(50vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    /* Brand magenta first, then tinted by the department colour where
       color-mix() is supported — so the glow never disappears entirely on
       an older browser that drops the second declaration. */
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .40) 0%, transparent 70%);
    background: radial-gradient(circle, color-mix(in srgb, var(--job-accent) 42%, transparent) 0%, transparent 70%);
    filter: blur(90px);
}

.job-hero__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.8rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--car-ddim);
    text-decoration: none;
    transition: color .22s ease, gap .22s ease;
}
.job-hero__back svg { width: 16px; height: 16px; }
.job-hero__back:hover {
    gap: .75rem;
    color: #fff;
}

.job-hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.job-hero__dept {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem;
    border: 1px solid var(--car-dline);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.job-hero__dept-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--job-accent);
    /* The department colours are chosen against white, so on the dark band
       the dot gets a halo to keep it visible. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--job-accent) 30%, transparent);
}

.job-hero__flag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: rgba(255, 92, 138, .16);
    font-size: .74rem;
    font-weight: 700;
    color: #FF8FAE;
}

.job-hero__flag-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
}
.job-hero__flag-icon svg { width: 100%; height: 100%; }
.job-hero__flag--closed {
    background: rgba(255, 255, 255, .10);
    color: var(--car-ddim);
}

.job-hero__title {
    margin: 0;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: #fff;
}

.job-hero__summary {
    max-width: 62ch;
    margin: 1.1rem 0 0;
    font-size: clamp(.98rem, 1.5vw, 1.09rem);
    line-height: 1.75;
    color: var(--car-dtext);
}

.job-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.job-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid var(--car-dline);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    font-size: .85rem;
    color: #fff;
}

.job-hero__chip-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: var(--car-ddim);
}
.job-hero__chip-icon svg { width: 100%; height: 100%; }

/* ── Body layout ──────────────────────────────────────────── */
.job-body {
    padding-block: clamp(3rem, 7vw, 5rem);
    background: var(--car-white);
}

.job-body__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.job-body__main { min-width: 0; }

/* ── Content blocks ───────────────────────────────────────── */
.job-block { margin-top: 2.6rem; }
.job-block:first-child,
.job-prose { margin-top: 0; }
.job-prose + .job-block { margin-top: 2.6rem; }

.job-block__heading {
    margin: 0 0 1.1rem;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--car-ink);
}

/* The WYSIWYG body — styled loosely, since an editor can put anything here. */
.job-prose {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--car-body);
}
.job-prose > p { margin: 0 0 1.1rem; }
.job-prose > p:last-child { margin-bottom: 0; }
.job-prose h3 {
    margin: 1.8rem 0 .7rem;
    font-size: 1.13rem;
    font-weight: 700;
    color: var(--car-ink);
}
.job-prose ul,
.job-prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.job-prose li { margin-bottom: .5rem; }
.job-prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.job-prose strong { color: var(--car-ink); font-weight: 600; }

/* ── Tick lists ───────────────────────────────────────────── */
.job-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-list__item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .72rem 0;
    border-bottom: 1px solid var(--car-line);
    font-size: .98rem;
    line-height: 1.7;
    color: var(--car-body);
}
.job-list__item:last-child { border-bottom: none; }

.job-list__tick {
    display: inline-flex;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    /* Nudged to sit on the first line's optical centre. */
    margin-top: .28rem;
    color: var(--job-accent);
}
.job-list__tick svg { width: 100%; height: 100%; }

/* ── Skill pills ──────────────────────────────────────────── */
.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-skill {
    padding: .5rem 1rem;
    border: 1px solid var(--car-line);
    border-radius: 999px;
    background: var(--car-wash);
    font-size: .87rem;
    font-weight: 600;
    color: var(--car-ink);
    transition: border-color .22s ease, color .22s ease;
}
.job-skill:hover {
    border-color: var(--job-accent);
    color: var(--job-accent);
}

/* ── Sticky summary card ──────────────────────────────────── */
.job-body__side {
    position: sticky;
    /* Clears the fixed site header. */
    top: 100px;
}

.job-side-card {
    padding: 1.7rem;
    border: 1px solid var(--car-line);
    border-radius: var(--car-radius);
    background: var(--car-white);
    box-shadow: var(--car-shadow-md);
}

.job-side-card__title {
    margin: 0 0 1.2rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--car-ink);
}

.job-side-card__list {
    margin: 0 0 1.5rem;
}

.job-side-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem 0;
    border-bottom: 1px solid var(--car-line);
}
.job-side-card__row:last-child { border-bottom: none; }

.job-side-card__row dt {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    font-size: .85rem;
    color: var(--car-muted);
}

.job-side-card__row dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    text-align: right;
    color: var(--car-ink);
}

.job-side-card__icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: var(--job-accent);
}
.job-side-card__icon svg { width: 100%; height: 100%; }

.job-side-card__btn {
    width: 100%;
}

.job-side-card__closed {
    margin: 0 0 1rem;
    padding: .8rem .95rem;
    border-radius: 11px;
    background: var(--car-wash);
    font-size: .87rem;
    line-height: 1.6;
    text-align: center;
    color: var(--car-muted);
}

.job-side-card__posted {
    margin: 1rem 0 0;
    font-size: .8rem;
    text-align: center;
    color: var(--car-muted);
}

/* ── Related roles ────────────────────────────────────────── */
.job-related {
    padding-block: clamp(3rem, 7vw, 5rem);
    background: var(--car-wash);
}

.job-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.job-related__heading {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--car-ink);
}

.job-related__all {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap .22s ease;
}
.job-related__all span {
    display: inline-flex;
    width: 15px;
    height: 15px;
}
.job-related__all span svg { width: 100%; height: 100%; }
.job-related__all:hover { gap: .7rem; }

/* ── Mobile apply bar ─────────────────────────────────────── */
.job-applybar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    /* Clears the iOS home indicator. */
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--car-line);
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 -6px 24px rgba(30, 5, 60, .10);
}

.job-applybar__copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.job-applybar__copy strong {
    font-size: .9rem;
    font-weight: 700;
    color: var(--car-ink);
    /* One line only — the role title can be long. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-applybar__copy span {
    font-size: .79rem;
    color: var(--car-muted);
}

.job-applybar .car-btn {
    flex-shrink: 0;
    padding: .8rem 1.5rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .job-body__grid {
        grid-template-columns: 1fr;
    }

    .job-body__side {
        position: static;
        top: auto;
    }

    .job-applybar { display: flex; }

    /* Stops the bar covering the last of the footer. Scoped to the element,
       not the class: WordPress also puts `single-job` on <body>, so a bare
       .single-job would apply the padding twice. */
    main.single-job { padding-bottom: 76px; }
}

@media (max-width: 600px) {
    .job-side-card { padding: 1.4rem; }

    .job-side-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .job-side-card__row dd { text-align: left; }

    .job-related__head {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-hero__back,
    .job-related__all,
    .job-skill { transition: none; }
}