/* =================================================================== PAGE HERO section css =================================================================== */
/* Inner-page sub-banner: dark photo band under the header with rounded bottom corners,
   the H1 (and optional intro), and the breadcrumb sitting in a bottom-left tab cut
   out of the band (.notch--b). .page-hero--center = 404 with its own badge notch. */
.page-hero {
    position: relative;
    display: flex; align-items: center;
    min-height: 520px;
    padding-block: 190px var(--sp100);
    background: var(--ink);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;

    & .page-hero__media {
        position: absolute; inset: 0;
        overflow: hidden;

        &::after { position: absolute; inset: 0; background: var(--hero-shade); content: ''; }
    }

    & .page-hero__img { width: 100%; height: 100%; object-fit: cover; }

    & .page-hero__inner { position: relative; }

    & .page-hero__content { max-width: 900px; }

    & .page-hero__title {
        font-size: var(--f70);
        color: var(--white);
    }

    & .page-hero__text {
        max-width: 640px;
        margin-top: var(--sp20);
        font-size: var(--f18);
        color: var(--white-muted);
    }

    /* breadcrumb tab: anchored to the container's left edge, on the band's bottom edge */
    & .page-hero__bar {
        position: absolute; inset-inline: 0; bottom: 0;
        height: 0;
    }

    & .page-hero__breadcrumb {
        left: var(--gutter);
        padding: var(--sp10) var(--sp20) var(--sp5);
    }

    & .page-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        list-style: none;
        font-family: var(--font-mona);
        font-size: var(--f12);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ink);
    }

    & .page-hero__crumb {
        display: flex; align-items: center;
        gap: var(--sp8);

        & + .page-hero__crumb::before { content: '/'; }
        & a { display: flex; align-items: center; gap: var(--sp8); }
        & a:hover { color: var(--primary); }
        & [aria-current] { color: var(--body-text); }
    }

    & .page-hero__home {
        display: flex; align-items: center; justify-content: center;
        width: 24px; height: 24px;
        background: var(--primary);
        border-radius: var(--r-sm);
        color: var(--white);
    }

    & .page-hero__links {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--sp15) var(--sp30);
        margin-top: var(--sp40);
        color: var(--white);
    }

    & .page-hero__badge {
        --notch-r: var(--r-xl);

        & .notch-badge { width: 90px; height: 90px; background: var(--primary); color: var(--white); }
    }

    /* 404: centred content, oversized code above the title */
    &.page-hero--center {
        min-height: 820px;
        border-radius: 0 0 0 var(--r-xl);
        text-align: center;

        & .page-hero__content { margin-inline: auto; }
        & .page-hero__text { margin-inline: auto; }
    }

    & .page-hero__code {
        display: block;
        margin-bottom: var(--sp10);
        font-family: var(--font-mona);
        font-size: var(--f200);
        font-weight: 600;
        line-height: 1;
        letter-spacing: var(--lsTight);
        color: var(--primary);
    }
}

/* =================================================================== PAGE HERO responsive =================================================================== */
@media (max-width: 1199.98px) {
    .page-hero {
        min-height: 440px;
        padding-block: 170px var(--sp100);
    }
}

@media (max-width: 767.98px) {
    .page-hero {
        min-height: 0;
        flex-direction: column; align-items: stretch;
        padding-block: 140px var(--sp100);
        border-radius: 0 0 var(--r-lg) var(--r-lg);

        /* breadcrumb drops the tab and becomes a plain trail under the title */
        & .page-hero__bar { position: relative; height: auto; margin-top: var(--sp20); }

        & .page-hero__breadcrumb {
            --notch-bg: transparent;

            position: static;
            justify-content: flex-start;
            padding: 0;
        }

        & .page-hero__crumbs { color: var(--white); }
        & .page-hero__crumb [aria-current] { color: var(--white-muted); }
        & .page-hero__badge { --notch-r: var(--r-lg); }
        & .page-hero__badge .notch-badge { width: 60px; height: 60px; }
        &.page-hero--center { min-height: 0; border-radius: 0 0 0 var(--r-lg); }
    }
}

@media (max-width: 575.98px) {
    .page-hero {
        & .page-hero__badge { display: none; }
        &.page-hero--center { border-radius: 0 0 var(--r-lg) var(--r-lg); }
    }
}