/**
 * Blue Ridge Core Theme — Grid System
 * See docs/design-system/04-grid-system.md for full rationale.
 */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wp--preset--spacing--lg);
}

/* Auto-fit variant — preferred default for variable-length card/tile
   collections; reflows without a breakpoint table. */
.grid--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--wp--preset--spacing--lg);
}

.grid--gap-md { gap: var(--wp--preset--spacing--md); }
.grid--gap-xl { gap: var(--wp--preset--spacing--xl); }

.grid > .col-span-3  { grid-column: span 3; }
.grid > .col-span-4  { grid-column: span 4; }
.grid > .col-span-6  { grid-column: span 6; }
.grid > .col-span-12 { grid-column: span 12; }

/* Collapse to a single column below the md breakpoint (768px) by default —
   see docs/design-system/05-breakpoints.md for why this is a literal value. */
@media (max-width: 767px) {
  .grid > [class*="col-span-"] {
    grid-column: span 12;
  }
}