/* ================================================================
   number-band.css — reusable component
   Uses: block 01a-band (4 numbers), 03 Cost (3 numbers), 10 Evidence (4 numbers), 11 Team (2 proof points)
   Pattern: metrics-section.tsx (line 127) — grid-cols-1 md:grid-cols-N gap-px bg-border
   ================================================================ */

.number-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-border);
}
.number-item {
  background: var(--c-bg);
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
}
.sec--secondary .number-item { background: var(--c-secondary); }

/* Dark section — number-band на fg bg */
.sec--fg .number-band { background: rgba(250, 250, 249, 0.15); }
.sec--fg .number-item { background: var(--c-fg); }
/* На dark — цифры yellow БЕЗ text-stroke (не нужна обводка) + sources yellow */
.sec--fg .number-value {
  color: var(--c-accent);
  -webkit-text-stroke: 0;
}
.sec--fg .number-desc { color: var(--c-bg); }
.sec--fg .number-source { color: var(--c-accent); opacity: 1; }
.sec--fg .number-label { color: rgba(250, 250, 249, 0.6); }
.sec--fg .eyebrow { color: rgba(250, 250, 249, 0.6); }

/* Убираем per-suffix .accent inside .number-value — теперь весь value yellow */
.number-value .accent {
  color: inherit;
  -webkit-text-stroke: inherit;
}

/* На light bg — цифры foreground (чёрные), sources muted */
.number-value {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-number);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight-3);
  color: var(--c-fg);
  font-variant-numeric: tabular-nums;
}
.number-desc {
  margin-top: var(--space-3);
  max-width: 44ch;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-fg);
}
.number-source {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-source);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.number-label {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-fg-muted);
}

/* Number-band variants — number of columns на desktop */
@container (min-width: 640px) {
  .number-band { grid-template-columns: repeat(2, 1fr); }
  .number-item { padding: var(--space-6); }
}
@container (min-width: 960px) {
  .number-band.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .number-band.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .number-item { padding: var(--space-6) var(--space-4); }
}