/* base/grid.css — reusable 12-column grid + named layout areas.
   Utility classes; layouts opt in where useful. */

.grid {
  display: grid;
  gap: var(--space-4, 16px);
}

/* 12-column track grid. Children span with .col-N (1..12). */
.grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Auto-fit responsive cards: as many columns as fit at >= min width. */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 240px), 1fr));
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ── Named application areas ─────────────────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  grid-template-areas: "rail main";
  min-height: 100vh;
}
.admin-grid__rail { grid-area: rail; }
.admin-grid__main { grid-area: main; }

.dashboard-grid {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "topbar"
    "tabs"
    "content";
  min-height: 100vh;
}
.dashboard-grid__topbar  { grid-area: topbar; }
.dashboard-grid__tabs    { grid-area: tabs; }
.dashboard-grid__content { grid-area: content; }

/* Collapse multi-column grids to a single column on narrow screens. */
@media (max-width: 768px) {
  .grid--12 { grid-template-columns: minmax(0, 1fr); }
  [class*="col-"] { grid-column: span 1 !important; }

  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
  }
  .admin-grid__rail { display: none; }
}