/* Responsive Grid System */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-sm); /* 16px mobile margins */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm); /* 16px gutter */
}

/* Column span utilities (mobile-first: 4-column base) */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }

/* --------------------------------
   Tablet: 768px+ (8 columns)
   -------------------------------- */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-lg); /* 32px tablet margins */
  }

  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-md); /* 24px gutter */
  }

  .col-tablet-1  { grid-column: span 1; }
  .col-tablet-2  { grid-column: span 2; }
  .col-tablet-3  { grid-column: span 3; }
  .col-tablet-4  { grid-column: span 4; }
  .col-tablet-5  { grid-column: span 5; }
  .col-tablet-6  { grid-column: span 6; }
  .col-tablet-7  { grid-column: span 7; }
  .col-tablet-8  { grid-column: span 8; }
}

/* --------------------------------
   Desktop: 1024px+ (12 columns)
   -------------------------------- */
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-md); /* 24px, container max-width handles centering */
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

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