/* ---------- Layout grid ----------
   12-column fluid grid, no max-width container (full-bleed, bounded only
   by the side margin below). Modeled after an audit of mouthwash.studio's
   real CSS — see docs/grid-system.md for the full breakdown and usage
   examples before touching this file. */

:root {
  /* Content cap for very large screens, like mouthwash.studio (its page
     containers stop at 2000px and centre). Up to 2000px nothing changes.
     Full-bleed blocks (welcome video, project bleeds/playgrounds, footer)
     don't use .grid and keep spanning the whole screen. */
  --content-max: 2000px;
  --grid-margin: 60px;
  --grid-gutter: 10px;
  --grid-gutter-half: 10px;
}

@media (max-width: 1180px) {
  :root {
    --grid-margin: 25px;
  }
}

@media (max-width: 768px) {
  :root {
    --grid-margin: 20px;
  }
}

/* 12-column container. Children use .w-1 .. .w-12 to span that many
   columns. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

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

/* Card grids not tied to the 12-column ratio (project listings, news…).
   Set --grid-cols on the element to pick the desktop column count; it
   collapses to 2 columns ≤1180px and 1 column ≤768px automatically,
   matching mouthwash's .work-grid / .news-grid pattern. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  gap: var(--grid-gutter-half);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1180px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}