/* ============================================================
   Grid System
   A 4-column, fluid-width layout grid.

   - Page width is fluid (no max-width); the grid simply fills
     whatever width it's given.
   - 24px is kept clear on the left and right edges of the screen.
   - 4 equal columns share the remaining space.
   - 4px gutters sit between the columns (the --grid-gutter token).

   Desktop / large-screen values only for now — mobile margins
   will be tuned at a breakpoint later.
   ============================================================ */

:root {
  --grid-columns: 4;      /* number of columns            */
  --grid-gutter: 4px;     /* space between columns        */
  --grid-margin: 24px;    /* clear space at screen edges  */
}

/* --- The grid container -----------------------------------------
   Put content directly inside a .grid; children are placed with
   the .col-* span utilities below. The 24px edge margin is the
   container's inline padding, so the columns themselves never
   touch the screen edge.                                          */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
}

/* --- Column-span utilities --------------------------------------
   .col-1 … .col-4 make a child span that many of the 4 columns.
   Omit for a default single-column item.                          */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

/* Start a child at a specific column (1-indexed), e.g. push an
   item into column 3. Combine with a .col-* span.                 */
.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }