/* ==========================================================================
   04 · ONE ARCHITECTURE, THREE SURFACES  (variant A — card STACK)
   Three cards share one grid footprint (grid-area: stack) so the section's
   height is always the TALLEST card at every breakpoint — switching cards can
   never move the page. Inactive cards stay laid out (visibility, not display)
   and ship marked inert; js/areas/carousel.js keeps inert in sync.

   Below 1200 the card is one column — media band on top, text beneath.
   At 1200 it splits: a fixed 480px text panel and a media panel that takes
   whatever is left of the 1440px canvas.

   This file is state + layout only. Every transition lives in
   css/interactions/carousel.css, gated by body[data-rbs-carousel] and
   body[data-rbs-motion-level] — with all JS absent this section is static
   and card 01 is the rendered state.

   NORMALISED: the card's internal vertical padding now sits on the 8px scale
   through one preset token, --rbs-carousel-pad (Studio knob: 24/40/56px,
   default 40px). It fixes the cramped 24px bottom pad the reference shipped
   on mobile, and desktop block padding becomes 2×pad / pad (80/40 at the
   default — the reference's off-grid 96/40, squared with the heading rhythm).
   ========================================================================== */

/* --------------------------------------------------------------------------
   PIN — inert wrapper in the shipped variant; the scrub variant makes it
   position:sticky inside the section-as-runway (interactions/carousel.css).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   HEADING BLOCK
   Not rendered below 768 — the reference omits it there entirely. The <h2>
   still names the section via aria-labelledby, which reads hidden text.
   -------------------------------------------------------------------------- */
.rb-surfaces__heading { display: none; }

.rb-surfaces__title-line { display: block; }

/* --------------------------------------------------------------------------
   CARD STACK — one shared footprint
   -------------------------------------------------------------------------- */
.rb-surfaces__stack {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
}

.rb-surfaces__card {
  grid-area: stack;
  position: relative;
  background: var(--rb-sys-bg-canvas);
  overflow: hidden;
}

/* Inactive siblings keep their box (so the stack never resizes) but leave the
   a11y tree and the tab order. main.js flips data-active/aria-hidden; the
   carousel area mirrors inert. No transition here — instant with JS absent
   and at the Static motion level; the motion pass layers its own. */
.rb-surfaces__card[data-active="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hairline rules bracketing the card. Desktop only, as in the reference. */
.rb-surfaces__rule { display: none; }

/* --------------------------------------------------------------------------
   SPLIT — media above text below 1200, side by side at 1200
   -------------------------------------------------------------------------- */
.rb-surfaces__split {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   TEXT PANEL
   Block padding rides the Studio's padding preset; 40px is the shipped value.
   -------------------------------------------------------------------------- */
.rb-surfaces__panel {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-7);
  padding: var(--rbs-carousel-pad, 40px) var(--rb-ref-space-4);
}

.rb-surfaces__category {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-3);
}

/* NORMALISED: reference dot was 11px — snapped to the 4px grid. */
.rb-surfaces__marker {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-sys-bg-accent);
}

/* Lede + feature list. Flex `gap`, not `.rb-stack`: the base reset's
   `ul[class] { margin: 0 }` out-specifies `.rb-stack > * + *`, so a classed
   <ul> silently loses its stack margin. */
.rb-surfaces__copy {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-5);
}

.rb-surfaces__lede { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   MEDIA PANEL
   Fixed band heights below 1200; at 1200 it stretches to the card.
   -------------------------------------------------------------------------- */
.rb-surfaces__media {
  /* The text panel leads in the DOM; the band is lifted above it visually. */
  order: -1;
  /* 280px — the band height the reference crops this plate to on mobile. */
  height: 280px;
}

/* Stat readout, pinned to the trailing bottom corner of the plate. */
.rb-surfaces__stat {
  position: absolute;
  right: var(--rb-ref-space-4);
  bottom: var(--rb-ref-space-4);
}

/* 136px — the label column the reference wraps every readout to, which is
   what keeps this a compact badge instead of a banner across the plate. */
.rb-surfaces__stat .rb-statbox__label { max-width: 136px; }

/* NORMALISED: reference pinned this with `top:44%; right:50%`, which is not a
   centre at all. Centred properly. */
.rb-surfaces__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rb-surfaces__play-icon {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   COUNTER — "01 / 03" over the top-trailing corner of the plate.
   Not rendered below 768, as in the reference.
   NORMALISED: reference was 11px / 0.08em; snapped to the L1 label step.
   The rolling-digit clone the carousel area builds shares this class, so it
   inherits the exact same position; the roll internals live in
   css/interactions/carousel.css.
   -------------------------------------------------------------------------- */
.rb-surfaces__counter { display: none; }

/* --------------------------------------------------------------------------
   CONTROLS — 20px above and below a 32px button makes the 72px strip.
   -------------------------------------------------------------------------- */
.rb-surfaces__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-ref-space-4);
  padding-block: var(--rb-ref-space-5);
}

.rb-surfaces__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

/* One arrow-down glyph, rotated into all four directions.
   NORMALISED: reference drew it at 14px, which is off the 4px grid. */
.rb-surfaces__nav-icon {
  width: 16px;
  height: 16px;
}
.rb-surfaces__nav-icon--prev { transform: rotate(90deg); }
.rb-surfaces__nav-icon--next { transform: rotate(-90deg); }

/* ==========================================================================
   TABLET — 768
   ========================================================================== */
@media (min-width: 768px) {

  /* NORMALISED: reference padding was 40 / 16 top and bottom. */
  .rb-surfaces__heading {
    display: block;
    padding-block: var(--rb-ref-space-8) var(--rb-ref-space-4);
  }

  .rb-surfaces__panel {
    padding: var(--rbs-carousel-pad, 40px) var(--rb-ref-space-7);
  }

  /* 320px — the band height the reference crops this plate to at tablet. */
  .rb-surfaces__media { height: 320px; }

  /* NORMALISED: reference offset the readout by 85px, which is off-grid. */
  .rb-surfaces__stat {
    right: var(--rb-ref-space-9);
    bottom: var(--rb-ref-space-12);
  }

  .rb-surfaces__counter {
    display: block;
    position: absolute;
    top: var(--rb-ref-space-6);
    right: var(--rb-ref-space-7);
    z-index: var(--rb-sys-z-raised);
    color: var(--rb-sys-fg-slate);
  }

  .rb-surfaces__nav-icon--prev { transform: rotate(180deg); }
  .rb-surfaces__nav-icon--next { transform: none; }
}

/* ==========================================================================
   DESKTOP — 1200
   ========================================================================== */
@media (min-width: 1200px) {

  /* NORMALISED: reference padding was 91 / 30 top and bottom. */
  .rb-surfaces__heading {
    padding-block: var(--rb-ref-space-12) var(--rb-ref-space-7);
  }

  /* NORMALISED: reference rules sat at 50px leading / 48px trailing. Squared. */
  .rb-surfaces__rule {
    display: block;
    position: absolute;
    inset-block: 0;
    left: var(--rb-ref-space-9);
    width: var(--rb-ref-border-hairline);
    background: var(--rb-sys-border-teal);
  }
  .rb-surfaces__rule--end {
    left: auto;
    right: var(--rb-ref-space-9);
  }

  /* 800px — the card height the reference holds the plate at (828px, driven by
     its scroll-jacked viewport), snapped to the grid. Every card meets it, so
     the shared footprint never jumps. */
  .rb-surfaces__split {
    flex-direction: row;
    align-items: stretch;
    min-height: 800px;
  }

  /* 480px — a clean third of the 1440px canvas; reference measured 477px.
     Block padding: 2×pad over pad — 80/40 at the shipped preset, every stop
     a multiple of 8 (was 96/40, off the section rhythm). */
  .rb-surfaces__panel {
    flex: 0 0 480px;
    padding: calc(var(--rbs-carousel-pad, 40px) * 2)
             var(--rb-ref-space-6)
             var(--rbs-carousel-pad, 40px)
             var(--rb-ref-space-11);
  }

  .rb-surfaces__media {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
  }
}