/**
 * Paginaraamwerk: de container-breedte en de verticale ruimte tussen zones.
 * Hoe de zones er zelf uitzien, staat in css/regions/<zone>.css.
 */

/* Gecentreerde kolom met zijmarges; gebruikt door bijna elke zone. */
.l-container {
  width: 100%;
  max-width: calc(var(--max-breedte) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Zones in <main> sluiten op elkaar aan, zoals op het origineel:
   banner → kruimelpad → inhoud zonder extra ruimte. Alleen als de inhoud
   niet direct onder het kruimelpad staat (voorpagina), krijgt hij 10px
   ruimte erboven. */
.zone-main-wrapper {
  display: flex;
  flex-direction: column;
  padding-block: 0 var(--s-6);
}

.zone-main-wrapper > .zone-content {
  margin-top: var(--gap);
}

.zone-breadcrumb:has(.kruimelpad) + .zone-content {
  margin-top: 0;
}

.zone-main-wrapper:focus {
  outline: none; /* main krijgt focus via de skip-link; geen rand nodig */
}

/* Rijen met widgets (top, footer, bottom) delen deze verdeling:
   zoveel kolommen als er passen, minimaal ongeveer 260px breed. */
.zone-top-widgets,
.zone-footer-widgets,
.zone-bottom-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap);
}