/* ==========================================================================
   EVAA — PINNED BACKGROUND MODULE (shared)
   The background image STAYS STILL while the copy scrolls over it.

   Brees, 7/29, twice: "the image stays where it is, stays sticky and/or
   absolute, and then the text and stuff scrolls over it" — and then, when the
   first attempt drifted instead: "I don't see the parallax happening. The img
   scrolls with the text. The img should be sticky while the text scrolls."

   🔴 THIS REPLACED parallax.css + parallax.js, BOTH DELETED.
   That module translated the image at a fraction of scroll speed — a classic
   parallax drift. It measurably worked (56px of travel) but it is not what was
   asked for: a drifting image still travels with the page. This pins.
   ⚠️ THE WHOLE EFFECT IS NOW CSS. The rAF loop is gone; there is no JS at all.

   ---- WHERE THIS APPLIES, AND WHERE IT MUST NOT --------------------------
     ✅ Mid-page image sections:  PWU §4 "Who We Partner With"
                                 About §4 "Our Philosophy"
                                 (+ any future page — hence a shared module)
     ⛔ BOTTOM CTA SECTIONS — excluded by Brees. PWU §6 and homepage §10 both
        have background images and stay static.
     ⛔ HOMEPAGE §7 — left alone. It already has its own sticky stage, and
        v4.css warns it must never receive overflow:hidden.

   ---- 🔴 THE TRAP THIS MODULE WALKS STRAIGHT INTO -------------------------
   `overflow:hidden` ON AN ANCESTOR SILENTLY TURNS `position:sticky` INTO A
   NO-OP. This project has already been bitten by exactly that — v4.css carries
   the note on homepage §7 — and the OLD parallax module *required* overflow
   hidden on the section to clip its drifting image.
   So the section must NOT clip. Clipping moves to `.pin-bg__media`, which is
   the sticky element's own box and is free to hide its overflow.
   ⚠️ Never add overflow:hidden / overflow:clip to a [data-pinned-bg] section.
   The effect will not error — it will just quietly stop pinning, which is
   precisely how the first version of this looked "fine" while being wrong.

   ---- HOW THE GEOMETRY WORKS ----------------------------------------------
   .pin-bg__media is 100vh tall and sticks to top:0, then pulls the following
   content back up over itself with margin-bottom:-100vh. So the media occupies
   no layout height, sits under the copy, and stays put while the copy travels.
   🔴 THE CONTENT MUST BE AT LEAST 100vh TALL. The section's height comes
   entirely from its content (the media contributes zero after the negative
   margin). If the content were shorter than the viewport, the 100vh media
   would overflow the section — and because the section cannot clip (see
   above), it would spill onto whatever follows. `min-height:100vh` on the wrap
   is what prevents that. It is load-bearing, not styling.
   ========================================================================== */

[data-pinned-bg] {
  position: relative;
  /* ⚠️ deliberately NO overflow — see above. */

  /* 🔴 THIS LINE FIXES A REAL BUG THAT WAS LIVE ON STAGING (found 7/30).
     ------------------------------------------------------------------
     THE BUG: the media SPILLS PAST THE SECTION and paints over whatever
     follows. On About it covered "Our Commitment" — heading, body copy and the
     notes image — with the misty-path background, leaving NAVY TEXT ON A DARK
     PHOTOGRAPH. Partner With Us had it too. Both were live, and both had been
     sent to Sean for review.

     WHY IT HAPPENS: `margin-bottom: -100vh` collapses the media's MARGIN BOX to
     zero height. Sticky constrains the element by its margin box, so a
     zero-height margin box means the pin NEVER RELEASES — its 900px visual box
     just keeps hanging below the section. And because the media is POSITIONED
     with z-index:0 while the following sections are not positioned and have
     transparent backgrounds, the media paints ABOVE their background AND their
     text (CSS 2.1 painting order: positioned z-index:0 elements paint after
     non-positioned block backgrounds and inline content).

     WHY NOTHING CAUGHT IT: pinned-bg-check.js only ever asserted that the image
     HOLDS and that the copy TRAVELS — both of which were true. It never looked
     below the section boundary. A spill check now runs there too.
     ⚠️ getBoundingClientRect() IGNORES clip-path, so a geometry assertion
     cannot verify this fix. The check samples PAINTED PIXELS instead.

     WHY clip-path AND NOT overflow: `overflow:hidden` would clip it — and would
     also silently kill the pin, which is the trap this whole file is written
     around. `clip-path` clips without creating a scroll container, so sticky is
     untouched. Verified: pin drift unchanged, spill gone.
     ⚠️ Do NOT "simplify" this to overflow:hidden. That reintroduces the exact
     failure documented above this line. */
  clip-path: inset(0);

  /* 🔴 THE PADDING MOVES TO THE WRAP — QA'd BY BREES 7/31.
     "On the About page, the Our Philosophy section, there's a dark blue band
     right above the image there, and that shouldn't be there. The Partner With
     Us page, same thing on the Who We've Partnered."
     THE CAUSE: `.v4-sec` sets `padding-block: clamp(72px, 8vw, 128px)` — 102px
     at 1280 — and `.pin-bg__media` is an in-flow child, so the sticky media
     started 102px BELOW the section's top edge. Those 102px rendered as a strip
     of the section's own `--navy-deep`, above the photograph. There was an
     identical strip BELOW it (section 1,105px vs media 900px) that reads as
     part of the next gap, which is why only the top one got reported.
     THE FIX: the section carries no block padding; the wrap carries it instead,
     so the media starts flush at the section's top edge and fills it exactly.
     ⚠️ Padding on the wrap is INSIDE its `min-height:100vh` (border-box), so the
     load-bearing "content must be >= 100vh" rule above still holds — the wrap
     is still at least a viewport tall, and the media still cannot overflow.
     ⚠️ This is a SHARED module: About and Partner With Us both use it, and both
     were wrong. Fixing it in one page's stylesheet would have left the other. */
  padding-block: 0;
}

.pin-bg__media {
  position: sticky; top: 0;
  height: 100vh;
  margin-bottom: -100vh;      /* the copy rides back up over it */
  overflow: hidden;           /* clipping lives HERE, not on the section */
  z-index: 0;
  pointer-events: none;
}
.pin-bg__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pin-bg__scrim { position: absolute; inset: 0; }

/* The copy. min-height is load-bearing — see the geometry note above.
   ⚠️ The block padding lives HERE, not on the section — see the note on
   [data-pinned-bg]. It must match `.v4-sec`'s value or these sections will sit
   at a different rhythm to every other one on the page. */
[data-pinned-bg] > .wrap {
  position: relative; z-index: 2;
  min-height: 100vh;
  padding-block: clamp(72px, 8vw, 128px);
  display: flex; flex-direction: column; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  /* Scroll-coupled position changes can be uncomfortable, so unpin entirely:
     the media reverts to a plain absolutely-positioned background filling the
     section, which is exactly how these sections looked before any of this.
     Nothing is lost — the effect was never load-bearing. */
  .pin-bg__media {
    position: absolute; inset: 0;
    height: auto; margin-bottom: 0;
  }
  [data-pinned-bg] > .wrap { min-height: 0; display: block; }
}