/* =============================================================
   24-column responsive grid
   -------------------------------------------------------------
   Breakpoints  | cols | gutter | outer margin
   xl  ≥1280px  |  24  |  24px  |  48px
   md  768–1279 |  12  |  20px  |  32px
   sm  480–767  |   8  |  16px  |  24px
   xs   <480    |   4  |  16px  |  16px

   Usage:
     <div class="grid">
       <div class="col-12 md:col-6 sm:col-4 xs:col-2">…</div>
     </div>

   Notes:
   - Desktop-first. Default `.col-N` applies everywhere; `md:`,
     `sm:`, `xs:` variants override at and below their breakpoint.
   - `min(N, var(--grid-cols))` clamps spans so a `.col-24` on a
     4-col viewport spans 4, never overflows.
   - Press the `G` key to toggle the overlay (see grid-overlay.js).
   ============================================================= */

:root {
  --grid-cols: 24;
  --grid-gutter: 24px;
  --grid-margin: 48px;
  /* Grid stops expanding past 1920px. On viewports wider than that, the
     grid stays at 1920px wide and `margin-inline: auto` adds equal empty
     space on each side. So the visible "outer margin" = the 48px padding
     inside the grid + (viewport − 1920) / 2 of auto-centered space. */
  --grid-max-width: 1920px;
}

@media (max-width: 1279px) {
  :root {
    --grid-cols: 12;
    --grid-gutter: 20px;
    --grid-margin: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --grid-cols: 8;
    --grid-gutter: 16px;
    --grid-margin: 24px;
  }
}

@media (max-width: 479px) {
  :root {
    --grid-cols: 4;
    --grid-gutter: 16px;
    --grid-margin: 16px;
  }
}

/* -------------------------------------------------------------
   Container
   ------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* -------------------------------------------------------------
   Span helpers — default (active at all sizes, clamped to cols)
   ------------------------------------------------------------- */
.col-1  { grid-column: span min(1,  var(--grid-cols)); }
.col-2  { grid-column: span min(2,  var(--grid-cols)); }
.col-3  { grid-column: span min(3,  var(--grid-cols)); }
.col-4  { grid-column: span min(4,  var(--grid-cols)); }
.col-5  { grid-column: span min(5,  var(--grid-cols)); }
.col-6  { grid-column: span min(6,  var(--grid-cols)); }
.col-7  { grid-column: span min(7,  var(--grid-cols)); }
.col-8  { grid-column: span min(8,  var(--grid-cols)); }
.col-9  { grid-column: span min(9,  var(--grid-cols)); }
.col-10 { grid-column: span min(10, var(--grid-cols)); }
.col-11 { grid-column: span min(11, var(--grid-cols)); }
.col-12 { grid-column: span min(12, var(--grid-cols)); }
.col-13 { grid-column: span min(13, var(--grid-cols)); }
.col-14 { grid-column: span min(14, var(--grid-cols)); }
.col-15 { grid-column: span min(15, var(--grid-cols)); }
.col-16 { grid-column: span min(16, var(--grid-cols)); }
.col-17 { grid-column: span min(17, var(--grid-cols)); }
.col-18 { grid-column: span min(18, var(--grid-cols)); }
.col-19 { grid-column: span min(19, var(--grid-cols)); }
.col-20 { grid-column: span min(20, var(--grid-cols)); }
.col-21 { grid-column: span min(21, var(--grid-cols)); }
.col-22 { grid-column: span min(22, var(--grid-cols)); }
.col-23 { grid-column: span min(23, var(--grid-cols)); }
.col-24 { grid-column: span min(24, var(--grid-cols)); }

/* -------------------------------------------------------------
   Span helpers — md (≤1279px → 12-col grid)
   ------------------------------------------------------------- */
@media (max-width: 1279px) {
  .md\:col-1  { grid-column: span min(1,  var(--grid-cols)); }
  .md\:col-2  { grid-column: span min(2,  var(--grid-cols)); }
  .md\:col-3  { grid-column: span min(3,  var(--grid-cols)); }
  .md\:col-4  { grid-column: span min(4,  var(--grid-cols)); }
  .md\:col-5  { grid-column: span min(5,  var(--grid-cols)); }
  .md\:col-6  { grid-column: span min(6,  var(--grid-cols)); }
  .md\:col-7  { grid-column: span min(7,  var(--grid-cols)); }
  .md\:col-8  { grid-column: span min(8,  var(--grid-cols)); }
  .md\:col-9  { grid-column: span min(9,  var(--grid-cols)); }
  .md\:col-10 { grid-column: span min(10, var(--grid-cols)); }
  .md\:col-11 { grid-column: span min(11, var(--grid-cols)); }
  .md\:col-12 { grid-column: span min(12, var(--grid-cols)); }
}

/* -------------------------------------------------------------
   Span helpers — sm (≤767px → 8-col grid)
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .sm\:col-1 { grid-column: span min(1, var(--grid-cols)); }
  .sm\:col-2 { grid-column: span min(2, var(--grid-cols)); }
  .sm\:col-3 { grid-column: span min(3, var(--grid-cols)); }
  .sm\:col-4 { grid-column: span min(4, var(--grid-cols)); }
  .sm\:col-5 { grid-column: span min(5, var(--grid-cols)); }
  .sm\:col-6 { grid-column: span min(6, var(--grid-cols)); }
  .sm\:col-7 { grid-column: span min(7, var(--grid-cols)); }
  .sm\:col-8 { grid-column: span min(8, var(--grid-cols)); }
}

/* -------------------------------------------------------------
   Span helpers — xs (≤479px → 4-col grid)
   ------------------------------------------------------------- */
@media (max-width: 479px) {
  .xs\:col-1 { grid-column: span min(1, var(--grid-cols)); }
  .xs\:col-2 { grid-column: span min(2, var(--grid-cols)); }
  .xs\:col-3 { grid-column: span min(3, var(--grid-cols)); }
  .xs\:col-4 { grid-column: span min(4, var(--grid-cols)); }
}

/* -------------------------------------------------------------
   Column-start helpers (optional — for offsets / explicit placement)
   ------------------------------------------------------------- */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-14 { grid-column-start: 14; }
.col-start-15 { grid-column-start: 15; }
.col-start-16 { grid-column-start: 16; }
.col-start-17 { grid-column-start: 17; }
.col-start-18 { grid-column-start: 18; }
.col-start-19 { grid-column-start: 19; }
.col-start-20 { grid-column-start: 20; }
.col-start-21 { grid-column-start: 21; }
.col-start-22 { grid-column-start: 22; }
.col-start-23 { grid-column-start: 23; }
.col-start-24 { grid-column-start: 24; }

/* =============================================================
   Visible overlay (toggled by `G` key — see grid-overlay.js)
   ============================================================= */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

body[data-grid-overlay="on"] .grid-overlay {
  display: block;
}

.grid-overlay__inner {
  height: 100%;
  align-content: stretch;
  grid-auto-rows: 1fr;
}

.grid-overlay__cell {
  border-left: 1px solid #e0e4e9;
  border-right: 1px solid #e0e4e9;
}