/* ==========================================================================
   12-Column Grid System
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin-desktop);
}

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

/* Tablet: 8-column collapse */
@media (max-width: 1199px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    padding: 0 var(--grid-margin-tablet);
  }

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

/* Mobile: single column */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding: 0 var(--grid-margin-mobile);
  }

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