/**
 * @file grid.css
 * Grid component — flexibel kolomraster met CSS Grid.
 */

.nnn-grid {
  display: grid;
  width: 100%;
}

/* ─── Kolommen ────────────────────────────────────────────── */

.nnn-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.nnn-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.nnn-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Tussenruimte ────────────────────────────────────────── */

.nnn-grid--gap-none { gap: 0; }
.nnn-grid--gap-sm   { gap: var(--nnn-space-md); }
.nnn-grid--gap-md   { gap: var(--nnn-space-xl); }
.nnn-grid--gap-lg   { gap: var(--nnn-space-xxl); }

/* ─── Verticale uitlijning ────────────────────────────────── */

.nnn-grid--align-start   { align-items: start; }
.nnn-grid--align-center  { align-items: center; }
.nnn-grid--align-end     { align-items: end; }
.nnn-grid--align-stretch { align-items: stretch; }

/* ─── Kolomcel ────────────────────────────────────────────── */

.nnn-grid__col {
  min-width: 0; /* voorkomt overflow bij lange woorden */
}

/* ─── Responsive ──────────────────────────────────────────── */

/* Tablet: 3- en 4-koloms worden 2-koloms */
@media (max-width: 1024px) {
  .nnn-grid--cols-3,
  .nnn-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobiel: alles wordt 1 kolom */
@media (max-width: 600px) {
  .nnn-grid--cols-2,
  .nnn-grid--cols-3,
  .nnn-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}