/* ============================================================
   Design System — Layout
   Container, grid, flex, and spacing utilities.
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ── Grid system ───────────────────────────────────────────── */

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── KPI row — responsive 1 -> 2 -> 4 columns ─────────────── */

.kpi-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
}

/* ── Flex utilities ────────────────────────────────────────── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ── Stack (vertical spacing) ──────────────────────────────── */

.stack > * + * { margin-top: var(--space-4); }
.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-8); }

/* ── Responsive breakpoints ────────────────────────────────── */

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}