/* Numbers — V0.1 Case Studies 62:3045: heading, then values 79px below it; four values
   across the 1180 content width. Equal columns, so nothing shifts while the numbers
   count up (review 2026-09-24, P1); tabular figures too, where the font has them (the
   local Ekstra copy doesn't, so digits still vary in width inside a fixed column). */
.block--stats .stats__heading { margin-bottom: var(--space-40); font-weight: 400; }
.block--stats .stats__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-48) var(--space-32);
  container-type: inline-size;
}
.block--stats .stats__item { min-width: 0; }
/* V0.1: Ekstra Light 105 (Display/1 is 108, same weight). */
.block--stats .stats__value { display: grid; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.block--stats .stats__value > * { min-width: 0; }
@media (max-width: 1023px) { .block--stats .stats__value { white-space: normal; overflow-wrap: anywhere; } } /* long values wrap rather than widen the page */
.block--stats .stats__value > [aria-hidden] { grid-area: 1 / 1; }
.block--stats .stats__ghost { visibility: hidden; }
.block--stats .stats__label { margin-top: var(--space-12); line-height: 1.3; }
/* V0.1: note is Ekstra 18. */
.block--stats .stats__note { font-size: 18px; line-height: 1.3; }

/* Equal columns are narrower than "48.4m" at 108 (296px in a 272 column), so the size
   steps down until a five-character value (~2.75em in Ekstra Light) fits its column:
   99px at the 1184 content width with four values, 77 with five. --stats-n is the count. */
.block--stats .stats__value { font-size: min(var(--fs-display-1), calc((100cqi - (var(--stats-n) - 1) * var(--space-32)) / var(--stats-n) / 2.75)); }

@media (max-width: 767px) {
  /* Two by two at Display/2, not four tall rows (mobile experience, 2026-09-30): "48.4m" is
     ~110px at 40, well inside half a phone. A long label wraps under its number, balanced
     so "account sign ups" doesn't leave "ups" alone. */
  /* max(9em, …): two across, until a large text size makes 9em more than half the width; then one, so "Headquarters" no
     longer runs into its neighbour (Nick's phone, 11-05). The em is the list's, so it grows with the text. */
  .block--stats .stats__list { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(max(9em, 40%), 1fr)); gap: var(--space-32) var(--space-16); }
  .block--stats :is(.stats__label, .stats__note) { text-wrap: balance; }
  .block--stats .stats__value { font-size: var(--fs-display-2); }
  .block--stats .stats__label { margin-top: var(--space-8); }
  .block--stats .stats__note { font-size: var(--fs-label-md); margin-top: var(--space-4); }
}