/* ==============================================================
   §28 — Metrics
   Dark band, one heading, three ruled columns of value + caption.
   ============================================================== */

.metrics {
  /* Container, not a media query — the guide wraps this in a second
     padded box. Also what the cqi tokens resolve against. */
  container-type: inline-size;

  background: var(--color-metrics-surface);
  color: var(--color-metrics-caption);
}

.metrics__inner {
  max-width: var(--metrics-max);
  margin-inline: auto;

  /* On __inner, not on .metrics: cqi never resolves against the
     element that defines the container. */
  padding-block: var(--metrics-pad-block);
  padding-inline: var(--container-pad);
}


/* --- Heading ------------------------------------------------------ */

.metrics__heading {
  margin: 0 0 var(--metrics-heading-gap);
  font-size: var(--text-metrics-heading);
  line-height: var(--leading-heading);
  color: var(--color-metrics-heading);
}


/* --- Columns ------------------------------------------------------ */

.metrics__list {
  display: grid;
  grid-template-columns: var(--metrics-cols);
  gap: var(--metrics-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rule is the item's own top edge, so three columns give three
   separate rules with the gutter between them — not one rule across
   the row. */
.metrics__item {
  min-width: 0;
  border-top: var(--metrics-rule-w) solid var(--color-metrics-rule);
  padding-top: var(--metrics-rule-gap);
}


/* --- Value ---------------------------------------------------------- */

.metrics__value {
  margin: 0 0 var(--metrics-caption-gap);
  font-size: var(--text-metrics-value);
  /* One line by definition — a metric that wraps is a layout fault,
     not a long number. --leading-none keeps the box exactly the type
     size so the caption gap below it is the token and nothing else. */
  line-height: var(--leading-none);
  color: var(--color-metrics-value);
}


/* --- Caption -------------------------------------------------------- */

.metrics__caption {
  margin: 0;
  font-size: var(--text-metrics-caption);
  line-height: var(--leading-normal);
  color: var(--color-metrics-caption);
}


/* ==============================================================
   T4 — Responsive
   Container queries, not media queries — .metrics sets its own
   inline-size container above.
   ============================================================== */

/* No 2-column stage: three items in two columns is two and an
   orphan. The grid gap already serves both axes, so the gap between
   columns becomes the gap between stacked items with no second
   token. Each item keeps its own rule, which is now what separates
   it from the one above. */
@container (max-width: 879px) {

  .metrics__list { grid-template-columns: minmax(0, 1fr); }

  /* Alone in the row, a narrow caption column runs long. Capped at
     the same measure the three-column layout already had, so
     stacking changes the line count, not the measure. */
  .metrics__caption { max-width: 60ch; }
}