/* ==========================================================================
   Hero Home Block — Smith 2.0
   Source: Figma "Smith 2.0" hero (node 10754:5835)
   Teal background, white serif headline + gold accent, staggered photo collage.
   ========================================================================== */

.hero-home {
    background-color: var(--color-surfie-green, #0f7e7c);
    color: var(--color-white, #ffffff);
    overflow: hidden;
}

.hero-home__inner {
    /* 1280px content + side padding (border-box): 1280 + 2*64 = 1408 so the
       Figma 1280px content width survives the gutters at >=1440 viewports. */
    max-width: 1408px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 992px) {
    .hero-home__inner {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 40px;
        /* No vertical padding on desktop so the collage bleeds to the
           hero's top and bottom edges (Figma); the text column gets its
           own vertical padding to stay centred. */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Single-photo layout (DEV Home 10773:68221): the frame is 824px total
       with content at y31 (the design nav overlays the hero top). With our
       stacked nav the equivalent offset is 31px, making the hero 31 + 793 =
       824px like the frame — 112px here pushed the heading ~80px low
       (Scout 20-46 run, Home header 29.2%). */
    .hero-home--layout-single .hero-home__inner {
        /* No inner top padding: the collage runs flush to the hero's top edge
           (in the frame the tiles continue under the transparent nav). The
           31px content offset moves to the text column below. */
        padding-top: 0;
        /* Photo runs flush to the right viewport edge (Figma DEV Home
           10773:68221) while the text column keeps the 1280px grid's left
           edge: drop the right gutter/max-width and fold the centering
           margin into padding-left once the viewport exceeds 1408px. */
        /* The frame's collage ends at x1360 (80px inset on the 1280 grid,
           Photo x784 within Content x80 w1280) — NOT flush to the viewport.
           Scout 20-02 diff: heading half clean, photo column fully red from
           an 80px horizontal offset. Inner returns to the standard 1408 grid. */
    }

    /* Match the frame's comparable zone: the 824px frame includes an 80px
       transparent overlay nav, so the content zone below the nav is 744px,
       with the collage's top 49px hidden behind the nav (tiles start at
       frame y31). Our stacked nav sits above the section, so the section
       itself is that 744px zone: photo fixed at 744 showing the BOTTOM of
       the 793px collage, heading at the frame's 238px offset. */
    .hero-home--layout-single .hero-home__photo {
        height: 744px;
    }

    .hero-home--layout-single .hero-home__photo img {
        object-position: bottom;
    }

    .hero-home--layout-single .hero-home__lead {
        justify-content: flex-start;
        padding-top: clamp(120px, 16.53vw, 238px);
        padding-bottom: 0;
    }
}

/* -------------------------------------------------------------------------
   Lead: headline + gold accent
   ------------------------------------------------------------------------- */
.hero-home__lead {
    flex: 1 1 auto;
    max-width: 743px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .hero-home__lead {
        /* No extra right padding: Figma's 46px text/collage gap falls out of
           space-between (1280 - 743 lead - 491 collage = 46). */
        padding-top: clamp(56px, 7vw, 96px);
        padding-bottom: clamp(56px, 7vw, 96px);
    }
}

.hero-home__title {
    margin: 0;
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 4rem; /* -> 64px */
    line-height: 1.2;
    letter-spacing: -0.01em; /* Figma -0.64px @ 64px */
    color: var(--color-white, #ffffff);
}

.hero-home__accent {
    /* Figma "Book Lines Home hero" (10852:9159): 704x26 cluster, 40px below headline. */
    width: min(704px, 92%);
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 22px; /* rows sit 26px apart line-centre to line-centre */
}

.hero-home__accent-line {
    display: block;
    height: 2px;
    background-color: var(--color-selective-yellow, #f0b200);
}

/* Top row: one long rule indented from the left (Figma 553w @ x111). */
.hero-home__accent .is-top {
    width: 78.55%;   /* 553/704 */
    margin-left: 15.77%; /* 111/704 */
}

/* Bottom row: long rule flush left + short rule offset right (327w @ x0, 185w @ x452). */
.hero-home__accent-row {
    display: flex;
}

.hero-home__accent-row .is-mid {
    width: 46.45%; /* 327/704 */
}

.hero-home__accent-row .is-short {
    display: block;
    width: 26.28%;      /* 185/704 */
    margin-left: 17.75%; /* (452-327)/704 */
}

/* -------------------------------------------------------------------------
   Collage: two staggered columns of photos
   ------------------------------------------------------------------------- */
.hero-home__collage {
    display: flex;
    gap: 16px;
    width: 100%;
}

@media (min-width: 992px) {
    .hero-home__collage {
        flex: 0 0 491px;
        width: 491px;
        align-self: stretch;
    }
}

.hero-home__collage-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Right column sits lower for the staggered look — its last image lands on
   the hero's bottom edge while column A's first image sits at the top. */
.hero-home__collage-col--b {
    margin-top: clamp(24px, 5vw, 72px);
}

.hero-home__collage-item {
    position: relative;
    width: 100%;
    aspect-ratio: 319 / 340;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.08); /* subtle placeholder before images are set */
}

.hero-home__collage-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -------------------------------------------------------------------------
   Single-photo variant (Smith 2.0 Home DEV frame 10773:68221)
   One tall photo panel on the right, bleeding to the hero's top/bottom edges.
   ------------------------------------------------------------------------- */
.hero-home__photo {
    width: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.08);
    /* Figma right panel 496 x 793 -> keep the tall portrait proportion. */
    aspect-ratio: 496 / 793;
}

@media (min-width: 992px) {
    .hero-home__photo {
        flex: 0 0 496px;
        width: 496px;
        align-self: stretch;
        aspect-ratio: auto; /* fill the hero height on desktop */
    }
}

.hero-home__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop shows the portrait crop; the mobile crop is hidden until small screens. */
.hero-home__photo-img--mobile {
    display: none;
}

@media (max-width: 991px) {
    /* Figma Home mobile hero: a landscape photo sits below the centred headline. */
    .hero-home__photo--has-mobile {
        aspect-ratio: 360 / 219;
    }
    .hero-home__photo--has-mobile .hero-home__photo-img--desktop {
        display: none;
    }
    .hero-home__photo--has-mobile .hero-home__photo-img--mobile {
        display: block;
    }
    /* Centre the headline + accent on mobile, matching the Figma mobile frame. */
    .hero-home__lead {
        align-items: center;
        text-align: center;
    }
    .hero-home__accent {
        margin-inline: auto;
    }
}