/* ============================================================================
   DESIGN SYSTEM · 04 · LAYOUT
   ----------------------------------------------------------------------------
   Containers, grids, density modes. Mobile-first.
   ============================================================================ */

/* ── App container (page wrapper) ───────────────────────────────────────── */
.container-app {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-container-pad);
  padding-block: var(--ds-page-pad-y);
}

.container-narrow {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--ds-container-pad);
  padding-block: var(--ds-page-pad-y);
}

.container-prose {
  max-width: 65ch;
  margin-inline: auto;
}

/* ── Sections (vertical rhythm) ─────────────────────────────────────────── */
.section + .section { margin-top: var(--ds-space-7); }
.section-tight + .section-tight { margin-top: var(--ds-space-5); }
.section-loose + .section-loose { margin-top: var(--ds-space-8); }

/* ── Stack (vertical flex with gap) ─────────────────────────────────────── */
.stack       { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.stack-xs    { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.stack-md    { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--ds-space-5); }
.stack-xl    { display: flex; flex-direction: column; gap: var(--ds-space-6); }

/* ── Cluster (horizontal flex that wraps) ───────────────────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}
.cluster-sm { gap: var(--ds-space-2); }
.cluster-lg { gap: var(--ds-space-4); }

.cluster-between { justify-content: space-between; }
.cluster-end     { justify-content: flex-end; }
.cluster-center  { justify-content: center; }

/* ── Grid (auto-fit responsive) ─────────────────────────────────────────── */
.grid-auto {
  display: grid;
  gap: var(--ds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

/* KPI grid: 1 → 2 → 4 columns */
.grid-kpi {
  display: grid;
  gap: var(--ds-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 540px)  { .grid-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-kpi { grid-template-columns: repeat(4, 1fr); } }

/* Two-column with sidebar (responsive) */
.grid-with-aside {
  display: grid;
  gap: var(--ds-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grid-with-aside { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ── Divider ────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--ds-border-default);
  border: 0;
  margin-block: var(--ds-space-4);
}
.divider-soft { background: var(--ds-border-subtle); }

/* ── Density modes (apply to a wrapper to compact controls) ─────────────── */
.density-compact .btn    { height: var(--ds-control-h-sm); padding-inline: var(--ds-space-3); font-size: var(--ds-text-sm); }
.density-compact .field-input,
.density-compact .field-select { height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); font-size: var(--ds-text-sm); }
.density-compact .table th,
.density-compact .table td { padding-block: var(--ds-space-2); }
.density-compact .stack    { gap: var(--ds-space-2); }

/* ── Surface helpers ────────────────────────────────────────────────────── */
.surface-app    { background: var(--ds-surface-app); }
.surface-0      { background: var(--ds-surface-0); }
.surface-1      { background: var(--ds-surface-1); }
.surface-ink    { background: var(--ds-surface-ink); color: var(--ds-text-inverse); }
.surface-glass  {
  background: var(--ds-surface-glass);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* ── Sticky page header (under app header) ──────────────────────────────── */
.sticky-page-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  background: var(--ds-surface-glass);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ds-border-subtle);
  padding-block: var(--ds-space-3);
}