/* ==========================================================================
   03 · STAT CARD GRID
   A mosaic of five stat cards on the white canvas; the cards themselves are
   the muted ground. Two equal columns from 768 up (left: tall + wide,
   right: three wide), one column below.

   Everything vertical is content-driven — the reference sets no fixed card
   heights, so a caption that wraps simply grows its card.
   ========================================================================== */

/* Half the grid at every breakpoint: 4/4 mobile, 4/8 tablet, 6/12 desktop. */
.rb-statcardgrid__column {
  --rb-span-m: 4;
  --rb-span-t: 4;
  --rb-span-d: 6;
}

/* --- Card -----------------------------------------------------------------
   Default shape is the WIDE card: art on the leading edge, caption alongside.
   -------------------------------------------------------------------------- */
.rb-statcardgrid__card {
  display: flex;
  background: var(--rb-sys-bg-muted);
  overflow: hidden;
}

.rb-statcardgrid__media {
  flex: none;
  align-self: stretch;
  width: 40%;
  /* 204px — the widest the side plate is ever cropped to, on the 644px
     desktop card. Below that the 40% share is narrower and wins. */
  max-width: 204px;
  object-fit: cover;
}

/* --- Tall variant: art becomes a full-width band above the caption --------- */
.rb-statcardgrid__card--tall {
  flex-direction: column;
}

.rb-statcardgrid__card--tall .rb-statcardgrid__media {
  width: 100%;
  max-width: none;
  /* 2.7:1 — the letterbox crop the reference gives this plate. */
  aspect-ratio: 2.7 / 1;
}

/* --- Caption --------------------------------------------------------------
   Chip pinned to the top, readout to the bottom, 48px minimum between them.
   -------------------------------------------------------------------------- */
.rb-statcardgrid__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rb-ref-space-9);
  min-width: 0;
  padding: var(--rb-ref-space-4);
}

/* Keep the shared chip at its intrinsic width inside a stretching column. */
.rb-statcardgrid__chip {
  align-self: flex-start;
}

.rb-statcardgrid__stat {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-2);
}

/* The numeral is one token — never let it wrap or balance. Tabular figures
   keep it from jittering while the count-up runs. */
.rb-statcardgrid__value {
  text-wrap: nowrap;
  font-variant-numeric: tabular-nums;
}

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