/* ============================================================
   BEINC — Insight Detail Page Hero (Section CSS)
   Full-vh hero on white background. Two evenly-split rows below
   the nav: hero content (eyebrow + heading + body) on top,
   featured media (image OR video) below. The media grows on
   scroll from a centered 40vw card to a full-bleed edge-to-edge
   strip, losing its rounded corners as it hits the viewport
   sides.

   Dashed-line system on this page (greyish on white):
   - 4 horizontals around the nav bar (services-hero pattern)
   - 2 nav-side verticals running ONLY from the top of the
     viewport down to the nav bar's bottom edge (NOT full hero)
   - 1 mid horizontal between the two hero rows
   - 2 edge verticals at global pad-x — handled by the parent
     .idp-frame so they can span hero + insight content together

   Depends on: global.css
   ============================================================ */


/* ── FRAME WRAPPER ──
   Hosts the 2 edge vertical lines that span both .idp-hero and
   .idp-content. position:relative so the absolute-positioned
   edges anchor to it. */
.idp-frame {
    position: relative;
    background: var(--color-white);
}

/* The edge dashed lines themselves — DO NOT destruct on scroll.
   Always visible. JS sizes/positions them on load + resize.
   translateZ(0) puts each line on its own composited layer so the
   GPU doesn't repaint them every frame as the scrubbing media
   beneath changes width — that subpixel repaint was the source of
   the right-edge flicker. */
.idp-frame__edge {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
    z-index: 4;
    /* Reveal animation handled in JS via scaleY 0→1 from top */
    transform: translateZ(0) scaleY(0);
    transform-origin: top center;
    will-change: transform;
    backface-visibility: hidden;
}
.idp-frame__edge--left  { left: var(--pad-x); }
.idp-frame__edge--right { right: var(--pad-x); }


/* ── HERO SECTION ── */
.idp-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    background: var(--color-white);
    overflow: clip;
    isolation: isolate;
}


/* ── DASHED GUIDES (around nav + nav-side verticals + mid) ──
   Greyish on white. Same reveal/destruct behaviour as services
   hero, but the verticals only span top→nav-bottom instead of
   the full section height. */
.idp-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.idp-hero__guide {
    position: absolute;
    opacity: 0;
    background: none;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 4 horizontals flanking the nav (top + bottom) */
.idp-hero__guide--left-top,
.idp-hero__guide--left-bottom,
.idp-hero__guide--right-top,
.idp-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
}
.idp-hero__guide--left-top,
.idp-hero__guide--left-bottom { left: 0; transform-origin: left center; }
.idp-hero__guide--right-top,
.idp-hero__guide--right-bottom { transform-origin: right center; }

/* 2 verticals at the nav bar's L/R edges — top of screen → nav bottom */
.idp-hero__guide--vert-left,
.idp-hero__guide--vert-right {
    width: 0;
    top: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    transform-origin: center top;
}

/* Mid horizontal between the 2 rows — always full width (no
   contract-to-nav-pill state on this page). */
.idp-hero__guide--mid {
    height: 0;
    left: 0;
    width: 100%;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    transform-origin: left center;
}


/* ── HERO CONTENT (rows) ──
   Rows wrapper covers the area BELOW the nav (top offset = nav
   height). Split is 40/60 — top row holds the text stack, bottom
   row holds the featured media. The smaller text row keeps the
   text visually anchored toward the upper portion (matching the
   mockup), while the larger media row gives the image room to
   live + grow without overflowing into the text area. The mid
   dashed line sits at the row boundary (40% of below-nav). */
:root {
    --idp-text-row-frac: 0.4;
}

/* No z-index on the rows wrapper — keeps the children participating
   in the .idp-hero stacking context directly so we can lift the
   media row above the dashed guides (which sit at z=5). */
.idp-hero__rows {
    position: absolute;
    top: var(--nav-section-height, 13vh);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.idp-hero__row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 40px 0;
    box-sizing: border-box;
    position: relative;        /* needed for z-index to take effect */
}

/* 40/60 split via numeric flex-grow ratios. */
.idp-hero__row--content {
    flex: 4 1 0;
    z-index: var(--z-content);  /* z=2, below guides */
}

/* Media row sits ABOVE the dashed guides (z=5) so the scrub-grow
   image visibly covers the mid horizontal dashed line as it widens
   past it. */
.idp-hero__row--media {
    flex: 6 1 0;
    z-index: 6;
}

/* Top row — content stack */
.idp-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
    max-width: 50vw;
    padding: 0 var(--pad-x);
}

.idp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-black2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-none);
}

.idp-hero__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(14px, 1.1vw, 16px);
    height: clamp(14px, 1.1vw, 16px);
    color: var(--color-black2);
    flex-shrink: 0;
}

.idp-hero__eyebrow-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.idp-hero__eyebrow-icon svg path { fill: currentColor; }

.idp-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    margin: 0;
}

.idp-hero__body {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-black2);
    margin: 0;
}


/* Bottom row — featured media (image OR video).
   Sizing is responsive-by-construction:
     • The rest width is the SMALLER of (40vw) OR (the largest width
       that fits at 16:9 inside the media row's usable height). On a
       wide-and-short viewport where 40vw would otherwise overflow
       its row, the height-derived cap kicks in and the image is
       held to a comfortable size.
     • The scrub then interpolates the width from rest → 100vw via a
       single CSS variable (--p, 0 → 1). Border-radius interpolates
       from var(--radius) → 0 against the same --p.
   GSAP only writes --p; the browser handles all the responsive
   math, so resize is automatically correct without JS recompute. */
@property --idp-media-p {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

.idp-hero__row--media {
    position: relative;
}

.idp-hero__media {
    --idp-media-p: 0;
    /* Available room for the image after row's 40px top + 40px bottom padding. */
    --idp-media-row-h: calc((100vh - var(--nav-section-height, 8vh)) * calc(1 - var(--idp-text-row-frac)));
    --idp-media-avail-h: calc(var(--idp-media-row-h) - 80px);
    --idp-media-rest-w: min(40vw, calc(var(--idp-media-avail-h) * 16 / 9));
    /* Desktop + tablet: end at the global pad-x edges (where the edge
       dashed lines sit) — image stays inside the page frame instead
       of going full-bleed. Mobile keeps the full-bleed end below. */
    --idp-media-end-w: calc(100vw - 2 * var(--pad-x));

    position: absolute;
    left: 50%;
    top: 50%;
    /* translate3d forces a composited layer so width/radius scrubs
       don't drag the edge dashed lines into per-frame repaints. */
    transform: translate3d(-50%, -50%, 0);
    width: calc(var(--idp-media-rest-w) + (var(--idp-media-end-w) - var(--idp-media-rest-w)) * var(--idp-media-p));
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) * (1 - var(--idp-media-p)));
    overflow: hidden;
    background: var(--color-darkgreyish);
    will-change: width, border-radius;
    backface-visibility: hidden;
}

.idp-hero__media > img,
.idp-hero__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* ============================================================
   TABLET (≤1023px)
   Same dashed-line geometry. Heading scales down via clamp().
   ============================================================ */
@media (max-width: 1023px) {
    .idp-hero__content { max-width: 70vw; }
}


/* ============================================================
   MOBILE (≤767px)
   - Hero hugs its rows instead of locking to 100vh — page is
     more compact, no large dead space.
   - Rows + media flip from absolute to in-flow so the hero can
     actually shrink to fit.
   - 4 horizontals around nav still appear.
   - 2 nav-side verticals also appear (matching the main insights
     page) — JS positions them top → nav-bottom.
   - Edge verticals end at the mid-hero horizontal — JS handles
     the height.
   - Media rest = 60vw, end = 100vw (full-bleed, no padding).
   ============================================================ */
@media (max-width: 767px) {
    .idp-hero {
        height: auto;
        min-height: 0;
    }

    .idp-hero__rows {
        position: relative;
        top: 0;
        padding-top: var(--nav-section-height, 8vh);
    }

    .idp-hero__row {
        flex: 0 0 auto;   /* shrink-wrap content; no flex split */
    }

    .idp-hero__content {
        max-width: 100%;
        padding: 0 calc(var(--pad-x) + var(--space-5));
        gap: var(--space-4);
    }

    .idp-hero__row--media {
        position: relative;
    }

    .idp-hero__media {
        /* In-flow on mobile so the hero can hug it. */
        position: relative;
        left: auto;
        top: auto;
        transform: translate3d(0, 0, 0);
        margin: 0 auto;

        /* Rest = 60vw, end = full-bleed 100vw. No height-derived cap
           needed since the row hugs the image instead of constraining it. */
        --idp-media-rest-w: 60vw;
        --idp-media-end-w: 100vw;
    }
}