/* ==========================================================================
   05 · SURFACES — TABBED
   Three stacked bands inside one container: heading, tab bar, panel. The
   panel is the shared 12-column grid — copy on 4 columns, media plate on 8 —
   which folds to a single column below 1200 exactly as the reference does.

   Almost nothing here is new paint. `.rb-tabs`, `.rb-feature-list`,
   `.rb-arrow-link`, `.rb-statbox` and `.rb-media` all arrive from the shared
   layer; this file only places them and sets the two vertical joints between
   the bands, which the section-rhythm tiers deliberately do not cover.
   ========================================================================== */

/* --- Heading -------------------------------------------------------------- */
/* Two lines of one heading, second line dropped to secondary. Block spans
   rather than <br> so the break is structural, not a typographic hack. */
.rb-surfaces-tabbed__heading-line { display: block; }

/* --- Tab bar --------------------------------------------------------------
   The two joints of the section: heading → tabs, tabs → panel.
   16/32 below 1200, 32/48 at desktop, straight off the space scale.

   `gap` is tightened below 1200 because the shared component carries the
   desktop figure (16px) and three mono labels cannot share a 343px row at
   that gap — the reference tightens to 8px for the same reason.
   -------------------------------------------------------------------------- */
.rb-surfaces-tabbed__tabs {
  gap: var(--rb-ref-space-2);
  margin-block: var(--rb-ref-space-4) var(--rb-ref-space-7);
}

@media (min-width: 1200px) {
  .rb-surfaces-tabbed__tabs {
    gap: var(--rb-ref-space-4);
    margin-block: var(--rb-ref-space-7) var(--rb-ref-space-9);
  }
}

/* --- Panel viewport --------------------------------------------------------
   One block wrapper around the three tabpanels. Layout-inert on its own; the
   tabs interaction module leans on it twice: as the positioning context for
   the outgoing panel's 120ms overlay fade, and as the box whose block-size is
   measured and eased when two tabs disagree about height (an inline style
   sets it, transitions it, then unsets it — see css/interactions/tabs.css). */
.rb-surfaces-tabbed__viewport { position: relative; }

/* --- Panel ---------------------------------------------------------------- */
/* Column gap stays the grid's 24px; the stacked gap is the reference's 32. */
.rb-surfaces-tabbed__panel {
  row-gap: var(--rb-ref-space-7);
}

/* Copy column: the reading block rises, the Explore link sinks to the foot of
   the media plate. Below 1200 there is no plate to align to, so the gap is
   what separates them. */
.rb-surfaces-tabbed__copy {
  --rb-span-m: 4;
  --rb-span-t: 8;
  --rb-span-d: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rb-ref-space-7);
}

/* Title → description → feature list. Spaced with `gap` rather than the shared
   `.rb-stack`, because base's `ul[class] { margin: 0 }` outranks
   `.rb-stack > * + *` and a list inside a stack loses its top margin. */
.rb-surfaces-tabbed__copy-top {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-5);
}

.rb-surfaces-tabbed__arrow { flex: none; }

/* --- Media plate ----------------------------------------------------------
   Fixed heights, not an aspect ratio: the reference gives this plate 280px
   below 1200 and 540px at desktop regardless of how wide the column runs.
   Both sit on the 4px grid. Slate shows only while the video decodes.
   -------------------------------------------------------------------------- */
.rb-surfaces-tabbed__plate {
  --rb-span-m: 4;
  --rb-span-t: 8;
  --rb-span-d: 8;
  height: 280px;
  border-radius: var(--rb-ref-radius-xl);
  background: var(--rb-ref-slate-600);
}

@media (min-width: 1200px) {
  .rb-surfaces-tabbed__plate { height: 540px; }
}

/* --- Stat box -------------------------------------------------------------
   Pinned to the plate's trailing bottom corner, inset by the same step the
   plate's own rhythm uses: 16 below 1200, 32 at desktop.
   -------------------------------------------------------------------------- */
.rb-surfaces-tabbed__stat {
  position: absolute;
  inset-inline-end: var(--rb-ref-space-4);
  inset-block-end: var(--rb-ref-space-4);
}

@media (min-width: 1200px) {
  .rb-surfaces-tabbed__stat {
    inset-inline-end: var(--rb-ref-space-7);
    inset-block-end: var(--rb-ref-space-7);
  }
}

/* The numeral is one token — never wrap or balance it, and keep the figures
   tabular so a later count-up animation cannot make the box jitter. */
.rb-surfaces-tabbed__stat-value {
  color: var(--rb-sys-fg-link);
  text-wrap: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 136px — the measure the reference caps this caption at, so it breaks to two
   short lines beside the numeral instead of stretching the box. */
.rb-surfaces-tabbed__stat-label {
  max-width: 136px;
  text-wrap: pretty;
}