/* ============================================================
   BEINC — Project Detail Page (PDP) Hero (Section CSS)

   Layout:
     • 100vh tall MINUS the info-bar height (so info bar peeks
       at the bottom of the initial viewport).
     • 2 columns on desktop (55vw text / 45vw media), each with
       inner pad-x. Vertical content centering.
     • Tablet: 50/50 columns.
     • Mobile: stacked rows (text top, media bottom) with a
       horizontal divider between them.

   Dashed guide lines (mirrors services-hero pattern):
     • 4 horizontal lines flanking the nav (top + bottom)
     • 2 vertical lines at the nav pill's L/R edges (run from
       below nav DOWN to bottom of hero)
     • 2 vertical lines at the screen edges (aligned with the
       global pad-x, run from TOP of viewport DOWN to bottom
       of hero — these fill the ENTIRE hero VH unlike the nav
       verticals which start below the nav)
     • 1 vertical mid line between the columns (runs from below
       the nav DOWN to bottom of hero)

   Color: --color-greyish (lighter than services-hero which used
   --color-grid). Hero background is cream (--color-white).
   ============================================================ */


/* ── Section Tunables ─────────────────────────────────────── */
.pdp-hero {
    /* Mirror the services-cards bar dimensions so info bar feels
       like the same component family. */
    --pdp-bar-h:           clamp(72px, 8vh, 110px);
    --pdp-bar-blur-h:      10vh;
    --pdp-guide-color:     var(--color-greyish);

    position: sticky;
    top: 0;
    width: 100%;
    height: calc(100vh - var(--pdp-bar-h));
    height: calc(100lvh - var(--pdp-bar-h));
    background: var(--color-white);
    color: var(--color-black2);
    overflow: clip;
    isolation: isolate;
    z-index: 1;
}


/* ============================================================
   GUIDE LINES — same animation pattern as services-hero
   (positioned absolutely, opacity 0 by default — JS reveals).
   ============================================================ */
.pdp-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.pdp-hero__guide {
    position: absolute;
    opacity: 0;
    background: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    /* All lines use --pdp-guide-color so the section can flip
       grey-ish for white bg, dark for the rest. */
    --guide-color: var(--pdp-guide-color);
    --guide-border: var(--guide-width) var(--guide-style) var(--guide-color);
}

/* Horizontal lines flanking nav */
.pdp-hero__guide--left-top,
.pdp-hero__guide--left-bottom,
.pdp-hero__guide--right-top,
.pdp-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
}

.pdp-hero__guide--left-top,
.pdp-hero__guide--left-bottom { left: 0; transform-origin: left center; }
.pdp-hero__guide--right-top,
.pdp-hero__guide--right-bottom { transform-origin: right center; }

/* Vertical lines — at nav L/R edges (run from below-nav to bottom-of-hero) */
.pdp-hero__guide--vert-nav-left,
.pdp-hero__guide--vert-nav-right {
    width: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
}

/* Vertical lines — at screen edges (aligned w/ global pad-x).
   These run from TOP of section all the way down. */
.pdp-hero__guide--vert-edge-left,
.pdp-hero__guide--vert-edge-right {
    width: 0;
    top: 0;
    height: 100%;
    border-left: var(--guide-border);
    transform-origin: center top;
}
.pdp-hero__guide--vert-edge-left  { left: var(--pad-x); }
.pdp-hero__guide--vert-edge-right { right: var(--pad-x); transform: translateX(-1px); }

/* Vertical line between columns (runs from below-nav to bottom-of-hero) */
.pdp-hero__guide--vert-mid {
    width: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
    /* JS sets `top` (= nav bottom) and `height` */
}


/* ============================================================
   COLUMNS — 55vw text / 45vw media on desktop
   The columns container respects the global pad-x on the outer
   left/right edges (so the columns sit inside the screen-edge
   dashed lines). Each column has an ADDITIONAL inner pad-x on
   both sides so content doesn't touch the column boundaries
   (the screen-edge verticals + the mid vertical).
   ============================================================ */
.pdp-hero__columns {
    position: absolute;
    inset: 0;
    padding: var(--nav-section-height, 13vh) var(--pad-x) 0;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    z-index: var(--z-content);
}

.pdp-hero__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Inner padding equal to the global pad-x. We use vw units (not the
       --pad-x token) because percentage paddings resolve against the
       CONTAINING BLOCK's width — which is the column itself, not the
       viewport. 2vw on desktop, 4vw on tablet+phone matches the global
       padding values defined in global.css. */
    padding: var(--space-9) 2vw;
    min-width: 0;
}

@media (max-width: 1023px) {
    .pdp-hero__col {
        padding: var(--space-9) 4vw;
    }
}

.pdp-hero__col--text {
    gap: var(--space-9);
}

/* Title block: eyebrow + heading group, vertically grouped */
.pdp-hero__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pdp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-black2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.pdp-hero__mark {
    display: inline-flex;
    width: 14px;
    height: 16px;
    flex-shrink: 0;
}

.pdp-hero__mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pdp-hero__mark svg path {
    fill: var(--color-black2);
}

.pdp-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: var(--leading-none);
    color: var(--color-black2);
    margin: 0;
}

/* Hero body wrapper — holds N <p> children (rendered by the binder
   from project.detail.hero.body, which can be a single string or an
   array of paragraphs). Children inherit body styling; gap adds
   spacing between paragraphs. */
.pdp-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56ch;
}

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


/* The media column on desktop is reserved space — the actual
   media element is the sticky overlay (#pdpHeroMedia) positioned
   on top by JS. The placeholder keeps the grid stable. */
.pdp-hero__col--media {
    /* No content — sticky overlay paints over this region. */
}


/* ============================================================
   STICKY HERO MEDIA OVERLAY
   Positioned absolutely by JS to align with hero col 2 initially,
   then animated to overview col 2 position.
   z-index: above sections, below info bar — DESKTOP ONLY (the
   media needs to land in the overview's right column so it must
   stack above the overview).
   ============================================================ */
.pdp-hero-media-sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 30;
    pointer-events: none;
    will-change: transform, width;
}

/* Tablet + mobile: media stays in hero only — no translation to
   overview. Drop z-index BELOW the overview (z:2) so when the
   overview enters from below, it cleanly covers the media instead
   of the media bleeding over the overview content. */
@media (max-width: 1023px) {
    .pdp-hero-media-sticky {
        z-index: 1;
    }
}

.pdp-hero-media-sticky .pdp-media {
    width: 100%;
    height: 100%;
}


/* ============================================================
   RESPONSIVE — TABLET (768–1023px)
   50/50 columns, no media transition (media stays in hero).
   ============================================================ */
@media (max-width: 1023px) {
    .pdp-hero__columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
   Single column, stacked rows with horizontal divider.
   ============================================================ */
@media (max-width: 767px) {
    .pdp-hero {
        position: relative;        /* drop sticky on mobile — sections scroll naturally */
        height: calc(100svh - var(--pdp-bar-h));
    }

    .pdp-hero__columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        padding: var(--nav-section-height, 13vh) var(--pad-x) 0;
    }

    .pdp-hero__col {
        padding: var(--space-5) var(--pad-x);
    }

    .pdp-hero__col--text {
        gap: var(--space-5);
        justify-content: flex-end;
        padding-bottom: var(--space-6);
    }

    .pdp-hero__col--media {
        position: relative;
        justify-content: flex-start;
        padding-top: var(--space-6);
    }

    .pdp-hero__title-block {
        gap: var(--space-4);
    }

    .pdp-hero__heading {
        font-size: clamp(24px, 7vw, 32px);
    }

    .pdp-hero__body {
        font-size: 13px;
    }

    /* Hide only the column-divider mid vertical on mobile (single
       column on mobile = no need for it). The 4 nav-flanking
       horizontals + 2 nav-side verticals stay visible on mobile,
       matching the insights main page / detail page pattern.
       The 2 outer screen-edge verticals also stay. */
    .pdp-hero__guide--vert-mid {
        display: none;
    }
}