/* =================================================================== HERO section css =================================================================== */
.hero {
    /* Composition constants measured from home.pdf (see TOKENS.md §4):
       band 0->1080, h1 box top 250, subtitle 519, card 642 (1137x150),
       button 847 (70 tall), band bottom 1080. Website.pdf leaves all of
       that untouched and adds the ASCII world map behind it. */
    --hero-h: 1080px;
    --hero-top: calc(var(--sp120) + var(--sp120) + var(--sp10));   /* 250 */
    --hero-card-h: 120px;
    --hero-card-pad: var(--sp40);
    /* ASCII map box measured on Website.pdf: x940->1920, y370->1080 */
    --hero-map-top: 370px;
    --hero-map-w: 51%;
    position: relative;
    display: flex;
    align-items: flex-start;
    max-height: var(--hero-h);
    /* height: 100vh; */
    padding-block: var(--hero-top) var(--hero-top);
    background: var(--ink);
    overflow: clip;
    align-items: center;
    & .hero__content {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
        gap: var(--g100);
        max-width: 100%;
        justify-content: space-between;
        align-items: flex-end;

        @media (max-width: 1599.98px) {
            grid-template-columns: minmax(0, 2fr) minmax(0, 0.5fr);
        }

        & .hero__image {
            position: relative;
            height: 100%;
        }
       
    }
    /* the ASCII world map — Website.pdf adds it behind the hero copy.
       Exported from the PDF at 2x as a transparent PNG (the artwork is
       outlined text in the source, so there is no live string to typeset).
       Measured box: x940->1920, y370->1080 on the 1920 artboard, i.e. it
       runs to the right edge and is cut off by the bottom of the band. */
    & .hero__map {
        position: absolute;
        top: 0;
        right: -240px;
        min-width: 750px;
        @media (max-width: 1599.98px) {
            right: -100%;
            min-width: 600px;
        }
        @media (max-width: 1299.98px) {
            right: -100%;
            min-width: 400px;
        }
    }

    & .container { position: relative; z-index: 1; }

    & .hero__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* No max-width: the <br> carries the measured 2-line break. Constraining
       the measure here would re-wrap it whenever the face changes metrics. */
    & .hero__title {
        max-width: none;
    }

    /* measured gap: h1 block bottom 470 -> subtitle box top 519 */
    /* 940px was the measured INK width of this line, not a constraint the
       designer set — it sits on one line in the design, so no max-width. */
    & .hero__subtitle {
        margin-top: var(--sp40);
        font-size: var(--f24);
        color: var(--body-invert);
    }

    /* measured: 1137 x 152, fill --dark-surface, 1px hairline, sharp corners */
    /* Columns are NOT equal — dividers measured at x=632 and x=957 inside a
       card spanning 100->1237, i.e. 532 / 325 / 280. */
    & .hero__card {
        display: grid;
        grid-template-columns: auto auto auto;
        align-items: stretch;
        width: 100%;
        max-width: max-content;
        min-height: auto;
        margin-top: var(--sp40);
        background: #252525;
        padding: var(--sp20) 0;
    }

    & .hero__card-item {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: var(--sp10);
        padding: 0 var(--sp40);
        border-left: 1px solid var(--line-invert-strong);
        
        &:first-child { border-left: 0; }
    }

    /* measured 18px / 700 / .08em — fits the PDF ink box to 0.3% */
    & .hero__card-label {
        font-size: 14px;
        font-weight: var(--fw-display);
        line-height: 1;
        letter-spacing: .08em;
        color: var(--muted-invert-soft);
    }

    & .hero__card-value {
        font-size: var(--f20);
        font-weight: var(--fw-display);
        line-height: var(--lhTight);
        white-space: nowrap;
        color: var(--white);
    }

    /* measured gap: card bottom 792 -> button top 852 */
    & .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp40);
        margin-top: var(--sp60);
    }

    & .hero__note {
        font-size: var(--f18);
        color: var(--muted-invert);
    }
}

/* =================================================================== responsive =================================================================== */
/* The ASCII map is a wide landscape crop that sits to the RIGHT of the copy on
   the artboard. Below 1200 there is no column left for it to sit in, so it
   lands on top of the h1, the subtitle and the detail card instead of behind
   them — verified at 1200, 992 and 768. It therefore comes out at the same
   breakpoint the two-column split does, and the copy takes the full measure. */
@media (max-width: 1199.98px) {
    .hero {
        /* no fixed band height once the map is gone — the copy sets it, so the
           band stops leaving ~200px of empty ink under the button */
        --hero-h: auto;
        --hero-top: var(--sp120);
        padding-top: calc(var(--sp120) * 3);

        & .hero__content {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
        }

        /* the column only ever held the map */
        & .hero__image { display: none; }

        /* max-content was capping the card at the width of its longest value
           once the column narrowed, which left it floating in the band at a
           third of the measure */
        & .hero__card {
            max-width: 100%;
        }

        & .hero__card-value { white-space: normal; }
    }
}

@media (max-width: 991.98px) {
    .hero {
        & .hero__card {
            grid-template-columns: 1fr;
            min-height: 0;
            padding: 0;
        }

        & .hero__card-item {
            border-left: 0;
            border-top: 1px solid var(--line-invert-strong);
            padding: var(--sp20);

            &:first-child { border-top: 0; }
        }
    }
}

@media (max-width: 767.98px) {
    .hero {
        & .hero__card-item { padding-block: var(--sp25); }

        & .hero__actions {
            gap: var(--sp20);
            width: 100%;
        }

        & .hero__note { width: 100%; }
    }
}

@media (max-width: 575.98px) {
    .hero {
        /* the artboard's 2-line break lands mid-phrase once the measure is
           this narrow — the h1 wraps on its own here */
        & .hero__title br { display: none; }
    }
}