/*
  statCardGroup — a single card or a set of cards (component.json statCardGroup, 3 tokens).
  One width for every group: the page's text column (65ch), so a group shares both edges
  with the text above and below (decided by Vivek 2026-09-26; it used to be 900px and
  reach past the column).
  Layouts follow the relationship between the stats:
    single  — one full-width card (default)
    --trio  — three equal peers in a row from 768px up; stacked below
    --summary — one full-width card over two equal cards (1 + 2) from 768px up; stacked below
  The gap after the group (gapNext, 32px) applies wherever the group isn't inside a textBlockGroup;
  inside one, the textBlockGroup's own 32px gap does that job (one owner per gap).
*/

.stat-card-group {
  max-width: var(--stat-card-group-max-width-all); /* the text column it sits in */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stat-card-group-gap-all);
}

:not(.text-block-group) > .stat-card-group + * {
  margin-block-start: var(--stat-card-group-gap-next-all);
}

@media (width >= 768px) {
  .stat-card-group--trio {
    grid-template-columns: repeat(3, 1fr);
  }
  .stat-card-group--summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card-group--summary > :first-child {
    grid-column: 1 / -1;
  }
}