/* ============================================================
 * Component: kpi-strip
 * Promoted from pages/01-home.html [data-label="Section · Proof strip"].
 * Tokens only. RTL-safe (logical properties). Light-theme-aware via the
 * semantic aliases (--surface / --border / --fg… / --accent-3).
 * ========================================================== */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin: 0; /* reset <dl> UA margin */
}

.kpi-strip__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5);
  text-align: start;
}

/* Data tick — the restrained data/success accent. The accent is a short rule,
 * NOT the value text:
 * chartreuse-on-paper fails contrast as body text. */
.kpi-strip__item::before {
  content: "";
  display: block;
  inline-size: var(--s-6);
  border-block-start: 1px solid var(--accent-3);
  margin-block-end: var(--s-4);
}

/* Eyebrow label — tracked ALL-CAPS ~11px, data rendered in mono */
.kpi-strip__label {
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--s-3);
}

/* Value — numbers/data render in --mono, kept at full foreground
 * contrast under the light theme */
.kpi-strip__value {
  font-family: var(--mono);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  margin-block-end: var(--s-2);
}

.kpi-strip__caption {
  font-family: var(--sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

/* ── Responsive: 4 → 2 → 1 columns ─────────────────────────────
 * Media queries cannot consume CSS custom properties (platform
 * limitation), so breakpoints are literal px. 900px mirrors the
 * repo-wide collapse in wireframe.css; 600px (2 → 1) has no repo
 * precedent yet — flagged as an open question in README.md. */
@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kpi-strip { grid-template-columns: minmax(0, 1fr); }
}