/* ---------------------------------------------------------------------------
   The home page hero, as a notice board.

   The rest of this site already speaks the language of a government notice -
   "last date to apply", "vacancy closed", the selection and joining notice - so
   the hero is built the same way: a masthead rule, a dated eyebrow, and the
   openings themselves listed underneath. A job seeker landing here should see
   real posts with real closing dates before they see a single marketing line.

   Kept in its own file rather than added to custom.css, which is 7,000 lines of
   template. Everything here is scoped under .hero so it cannot leak.

   Colours come from the template's own tokens: --primary-color #eb1c24 is the
   brand red and is left exactly as it is.
   --------------------------------------------------------------------------- */

.hero.hero-slider-layout {
    --notice-ink: #141312;
    --notice-paper: #f5f3ef;
    --notice-rule: rgba(255, 255, 255, .22);
}

/* ---- the photograph, made readable ----

   The template left .hero-slide::before with no background at all, so the
   headline sat directly on whatever the photograph happened to be doing. A
   two-stop scrim, heavier at the left where the text is, fixes the contrast
   without flattening the image. */

.hero.hero-slider-layout .hero-slide::before {
    background:
        linear-gradient(100deg,
            rgba(20, 19, 18, .93) 0%,
            rgba(20, 19, 18, .82) 38%,
            rgba(20, 19, 18, .45) 68%,
            rgba(20, 19, 18, .30) 100%);
}

/* A slow drift on the photograph. It is the only ambient motion on the page:
   the slide already moves, and anything more would fight the content. */
.hero.hero-slider-layout .hero-slide .hero-slider-image img {
    animation: heroDrift 24s ease-in-out infinite alternate;
}

@keyframes heroDrift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.6%, -1%, 0); }
}

.hero.hero-slider-layout .hero-slide {
    padding: 150px 0 120px;
}

/* ---- masthead ----

   A hairline rule and a dated line, the way a notice is headed. The date is
   real - it is today - so the board reads as maintained rather than decorative. */

.hero-masthead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 13px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--notice-rule);
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

    .hero-masthead .mast-mark {
        width: 9px;
        height: 9px;
        background: var(--primary-color);
        flex: 0 0 9px;
        /* Not a circle. A square tally mark, like a stamp on a form. */
    }

    .hero-masthead .mast-count {
        margin-left: auto;
        color: #fff;
    }

/* ---- the headline ----

   Plus Jakarta Sans at 800 with the tracking pulled in. The template shipped
   this face already; the weight and the negative tracking are what make it
   read as a masthead rather than body copy set large. */

.hero-content .hero-headline {
    font-size: clamp(2.4rem, 5.4vw, 4.35rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    margin: 0 0 18px;
    text-wrap: balance;
}

    /* The last word carries the accent, so the eye lands on the end of the
       sentence rather than on a decorative shape. */
    .hero-content .hero-headline .accent {
        color: var(--primary-color);
    }

.hero-content .hero-lead {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
    max-width: 46ch;
    margin: 0 0 30px;
}

/* ---- the openings ----

   The signature of this page. Each chip is one live vacancy: the post, and the
   date it shuts. Read straight from Job_Details, so the board is never stale
   and never claims an opening that has closed. */

.hero-openings {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.hero-opening {
    display: block;
    background: rgba(245, 243, 239, .07);
    border: 1px solid var(--notice-rule);
    border-left: 3px solid var(--primary-color);
    border-radius: 3px;
    padding: 11px 16px 10px;
    text-decoration: none;
    min-width: 205px;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

    .hero-opening:hover,
    .hero-opening:focus-visible {
        background: var(--notice-paper);
        transform: translateY(-2px);
    }

        /* Inverting on hover is the point: the chip becomes the printed notice. */
        .hero-opening:hover .op-post,
        .hero-opening:focus-visible .op-post {
            color: var(--notice-ink);
        }

        .hero-opening:hover .op-date,
        .hero-opening:focus-visible .op-date {
            color: #6a6560;
        }

    .hero-opening .op-post {
        display: block;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
        margin-bottom: 4px;
    }

    .hero-opening .op-date {
        display: block;
        font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
        font-size: 11px;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .6);
    }

        /* A week or less left is the one thing on this page worth shouting
           about, so it is the only place the red is used as text. */
        .hero-opening .op-date.is-urgent {
            color: #ff6b70;
        }

        .hero-opening:hover .op-date.is-urgent {
            color: var(--primary-color);
        }

.hero-openings-empty {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    border: 1px dashed var(--notice-rule);
    border-radius: 3px;
    padding: 13px 18px;
    margin: 0 0 30px;
}

/* ---- actions ---- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

    .hero-actions .btn-ghost {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, .38);
        border-radius: 40px;
        padding: 13px 30px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        transition: background .18s ease, border-color .18s ease;
    }

        .hero-actions .btn-ghost:hover,
        .hero-actions .btn-ghost:focus-visible {
            background: rgba(255, 255, 255, .12);
            border-color: #fff;
            color: #fff;
        }

/* ---- pagination, restyled to match the rule ---- */

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
    width: 26px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, .38);
    opacity: 1;
    margin: 0 4px 0 0;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
    width: 44px;
}

/* ---- keyboard ---- */

.hero a:focus-visible,
.hero button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
    .hero.hero-slider-layout .hero-slide .hero-slider-image img {
        animation: none;
        transform: scale(1.06);
    }

    .hero-opening {
        transition: none;
    }

        .hero-opening:hover {
            transform: none;
        }
}

/* ---- narrow screens ----
   Most of this site's traffic is a mid-range Android phone. The chips go full
   width so a post name never truncates, and the padding comes right down. */

@media (max-width: 991px) {
    .hero.hero-slider-layout .hero-slide {
        padding: 110px 0 96px;
    }
}

@media (max-width: 767px) {
    .hero.hero-slider-layout .hero-slide {
        padding: 92px 0 84px;
    }

    .hero-masthead {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 10.5px;
        letter-spacing: 1px;
    }

        .hero-masthead .mast-count {
            margin-left: 0;
            width: 100%;
        }

    .hero-opening {
        min-width: 0;
        width: 100%;
    }

    .hero-actions {
        gap: 10px;
    }

        .hero-actions .btn-default,
        .hero-actions .btn-ghost {
            flex: 1 1 auto;
            text-align: center;
        }

    .hero.hero-slider-layout .hero-pagination {
        bottom: 34px;
        padding-left: 27px;
    }
}