/* stack-cards.css — sticky scroll-scale "stacking cards" (ROUND-2 item 14, ported from the
   owner-supplied motion/lenis React component's BEHAVIOUR onto vanilla GSAP ScrollTrigger).
   Markup contract: [data-stack] (a plain list/container) > [data-stack-card]* (each card), each
   card containing a .stack-card-in wrapper with two children: .stack-card-copy (num/h3/p/cta)
   and a media figure (e.g. .paint). See stack-cards.js for how position/top/min-height/scale are
   applied at runtime; this file only supplies the resting box + two-column layout.
   Tokens used: --r-card (card radius), --nav-h (sticky top offset). --stack-i (per-card index,
   set once as an inline style by stack-cards.js) and --stack-card-vh (the per-card scroll budget,
   60vh phone / 70vh >=1024px, redefined by THIS file's own media query, never by JS - FIX-2 #6)
   drive `top`/`min-height` entirely in CSS so they stay correct across any resize/breakpoint
   change with zero JS recomputation.
   Reduced motion: stack-cards.js does not run at all (returns null) under reduced motion or
   without GSAP/ScrollTrigger, so cards stay in plain document flow with no position/scale set -
   this file never sets position:sticky itself, so that fallback is automatic, not a special case.
   ROUND-3 item 10: BOTH of this file's own media queries moved from min-width:900px to
   min-width:1024px, matching stack-cards.js's own matchMedia('(max-width: 1023px)') init guard
   (the component now only ever takes over below that width) and site.css's .steps min-width:1024px
   grid block — component and grid share exactly one breakpoint, never two competing definitions
   of what ">=desktop" means for this markup.
   Init: call initStackCards(document.querySelector('[data-stack]')) after GSAP/ScrollTrigger and
   the DOM are ready. */
[data-stack-card] {
  position: relative;
  border-radius: var(--r-card);
  padding: 30px;
  will-change: transform;
  backface-visibility: hidden;
  --stack-dim: 0;
  --stack-i: 0;
  --stack-card-vh: 60vh;
}
/* ROUND-3 item 10: moved from 900px to 1024px so this component and the process grid's own
   min-width:1024px block (site.css) share exactly ONE breakpoint - see stack-cards.js's guard. */
@media (min-width: 1024px) {
  [data-stack-card] { --stack-card-vh: 70vh; }
}
/* stack-cards.js adds .is-active to the [data-stack] root only once it has actually taken over
   (GSAP + ScrollTrigger present, motion not reduced) - sticky/top/min-height only exist then, so
   the no-JS/reduced-motion fallback is a genuine plain stack, never a mis-offset one (FIX-2 #6/#7:
   both driven by CSS custom properties + a media query, never a JS pixel/vh snapshot). */
[data-stack].is-active [data-stack-card] {
  position: sticky;
  top: calc(var(--nav-h) + 24px + var(--stack-i) * 16px);
  min-height: var(--stack-card-vh);
}
/* FIX-1 (CRITIC-2-phone #1): a receding card is dimmed via this opaque-black OVERLAY, never by
   lowering the card element's own opacity. The card's real background (--paper-2/--sand/--green)
   stays fully opaque at all times, so nothing physically behind it (another card sitting 16px
   further back) can ever show through, however far the card has receded. stack-cards.js only
   ever writes the --stack-dim custom property (0..~0.4); it does not set `opacity` on the card. */
[data-stack-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: #000;
  opacity: var(--stack-dim);
  pointer-events: none;
}
.stack-card-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.stack-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* ROUND-3 item 10: moved from 900px to 1024px (see the note above); process cards additionally
   force this back to a single column at >=1024px (site.css's .steps .stack-card-in), since the
   loop sits ABOVE the copy there too, not beside it — this two-column layout is for any OTHER
   [data-stack] consumer this component might gain later. */
@media (min-width: 1024px) {
  .stack-card-in {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 32px;
  }
}