/* ============================================================
   BEINC — PDP Project Overview (Section CSS)

   Sits ON TOP OF the hero (z:2) and is pulled up by --pdp-bar-h
   so its top edge aligns with the bottom of the hero (where the
   info bar peeks). Visually: the section "covers" the hero as
   the user scrolls (because it's later in the DOM with higher
   z-index, plus the hero is sticky/pinned).

   Layout — desktop:
     • 2 columns (55vw text / 45vw media)
     • Inner padding: ONLY the outer pad-x (no inner pad-x like
       the hero), so the content sits closer to the screen edges
       — see CLAUDE.md spec.
     • Below the columns: 2-image gallery row, full content width
       with a gap, respecting outer pad-x.

   Tablet: text-only column (no media column — hero media stays
   in hero on tablet). Gallery same as desktop.

   Mobile: same as tablet but gallery wraps into single column.
   ============================================================ */


.pdp-overview {
    position: relative;
    z-index: 2;
    background: var(--color-black2);
    color: var(--color-white);
    /* Pull up by bar-h so this section's top sits at the same y
       as the info bar's top (the bar covers the top bar-h of
       this section). */
    margin-top: calc(-1 * var(--pdp-bar-h, clamp(72px, 8vh, 110px)));
    padding-top: calc(var(--pdp-bar-h, clamp(72px, 8vh, 110px)) + var(--space-10));
    padding-bottom: var(--space-10);
    min-height: 100vh;
}

.pdp-overview__columns {
    display: grid;
    grid-template-columns: 55vw 45vw;
    align-items: center;
    min-height: calc(60vh);
    margin-bottom: var(--space-10);
}

.pdp-overview__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.pdp-overview__col--text {
    /* Outer global pad on the LEFT only — content respects global pad-x.
       NOTE: --pad-x is `2%` and would normally resolve against this
       column's width (55vw on desktop) → 1.1vw of viewport, which is
       LESS than the global 2vw rhythm. Use 2vw directly here so the
       text aligns with the gallery below and with content in other
       sections. (Tablet/mobile collapse the grid to 1fr — column is
       full-width there, so `var(--pad-x)` resolves correctly to 4vw.
       Override is below in the @media block.) */
    padding-left: 2vw;
    padding-right: var(--space-9);
}

.pdp-overview__col--media {
    /* Outer global pad on the RIGHT only. Media itself is the
       sticky overlay (#pdpHeroMedia) painted on top by JS. */
    padding-right: var(--pad-x);
    min-height: 1px;
}

.pdp-overview__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: var(--leading-none);
    color: var(--color-white);
    margin: 0 0 var(--space-3) 0;
}

.pdp-overview__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 60ch;
}

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


/* ============================================================
   GALLERY — 2 images side-by-side, gap matches global pad-x
   ============================================================
   IMPORTANT — `gap` on grid resolves percentage values against the
   container's WIDTH for column-gap and HEIGHT for row-gap. With no
   explicit container height that means a percentage row-gap can
   collapse to 0. We use `vw` units so both axes resolve against the
   viewport width consistently and the row-gap actually renders. */
.pdp-overview__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;                  /* desktop pad-x = 2vw */
    padding: 0 2vw;
}


/* ============================================================
   RESPONSIVE — TABLET (768–1023px)
   Single column text — hero media stays in hero, no overview col 2.
   ============================================================ */
@media (max-width: 1023px) {
    .pdp-overview__columns {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .pdp-overview__col--text {
        /* Tablet/mobile: column is now full-width (grid is 1fr), so
           `var(--pad-x)` resolves correctly to 4vw on this breakpoint.
           Override the desktop's hardcoded 2vw on the left. */
        padding-left: var(--pad-x);
        padding-right: var(--pad-x);
    }

    .pdp-overview__col--media {
        display: none;
    }

    .pdp-overview {
        padding-top: calc(var(--pdp-bar-h, clamp(72px, 8vh, 110px)) + var(--space-9));
    }

    /* Tablet+phone: gallery gap & padding scale to 4vw (= global pad-x). */
    .pdp-overview__gallery {
        gap: 4vw;
        padding: 0 4vw;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
   Same as tablet for the columns; gallery wraps to single column.
   ============================================================ */
@media (max-width: 767px) {
    .pdp-overview {
        padding-top: calc(var(--pdp-bar-h, clamp(56px, 7vh, 72px)) + var(--space-7));
        padding-bottom: var(--space-9);
    }

    .pdp-overview__heading {
        font-size: 24px;
    }

    .pdp-overview__gallery {
        grid-template-columns: 1fr;
        gap: 4vw;             /* row-gap = mobile global pad-x */
    }

    .pdp-overview__columns {
        margin-bottom: var(--space-9);
    }
}