/* ============================================================
   grid.css: 12-koloms grid, max 1160px, 24px zijpadding, 22px gutter
   (designtaal F). Alle layouts op dit grid; Flexbox alleen voor
   micro-componenten. Asymmetrie (8/4, 7/5) is welkom.
   ============================================================ */

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
}

/* Kolombreedtes (desktop-first benaming, mobile stapelt alles) */
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Start-offsets voor asymmetrische layouts */
.col-start-2 { grid-column-start: 2; }
.col-start-4 { grid-column-start: 4; }

/* Tablet: 2 kolommen voor herhaalde groepen, hoofd/zijbalk stapelt */
@media (max-width: 960px) {
    .col-2, .col-3, .col-4, .col-5 { grid-column: span 6; }
    .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
    .col-start-2, .col-start-4 { grid-column-start: auto; }
}

/* Mobiel: alles stapelt */
@media (max-width: 560px) {
    .grid { gap: 16px; }
    .col-2, .col-3, .col-4, .col-5, .col-6 { grid-column: span 12; }
}