/* AOO herbruikbare layoutbasis — september 2026
 * Aanvulling op de bestaande CSS, geen vervanging van base.css of tokens.css.
 * Laad na de bestaande stylesheets. Zet aoo-ui op het omvattende blok.
 * Gebruik bestaande componenten (btn, callout, infocard) met hun eigen CSS.
 * Alle nieuwe layoutclasses werken alleen op/binnen .aoo-ui.
 */
.aoo-ui {
  --aoo-layout-max: 1200px;
  --aoo-layout-reading: 720px;
  --aoo-layout-gutter: clamp(1rem, 3vw, 1.5rem);
  --aoo-layout-gap: var(--aoo-space-3, 1.5rem);
  font-family: var(--aoo-font-base, system-ui, sans-serif);
  line-height: 1.65;
}
.aoo-ui, .aoo-ui *, .aoo-ui *::before, .aoo-ui *::after {
  box-sizing: border-box;
}

/* Breedte: nooit breder dan het bovenliggende WordPress-blok. */
.aoo-ui.aoo-container, .aoo-ui .aoo-container {
  width: 100%;
  max-width: var(--aoo-layout-max);
  margin-inline: auto;
  padding-inline: var(--aoo-layout-gutter);
}
.aoo-ui.aoo-reading, .aoo-ui .aoo-reading {
  width: 100%;
  max-width: var(--aoo-layout-reading);
  margin-inline: auto;
}
.aoo-ui.aoo-section, .aoo-ui .aoo-section {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Stapelen: gap regelt de ruimte; directe kindmarges worden verwijderd.
 * Gebruik op een Groep met directe kinderen, niet op een oude inner wrapper.
 */
.aoo-ui.aoo-stack, .aoo-ui .aoo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--aoo-layout-gap);
}
.aoo-ui.aoo-cluster, .aoo-ui .aoo-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aoo-layout-gap);
}

/* Automatische kolommen reageren ook op een smalle contentkolom.
 * Basis: minimaal 240px per kaart; resterende ruimte wordt verdeeld.
 */
.aoo-ui.aoo-grid, .aoo-ui .aoo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--aoo-layout-gap);
}
/* Vaste aantallen, met terugval op basis van de beschikbare blokbreedte. */
.aoo-ui.aoo-grid--2, .aoo-ui .aoo-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - var(--aoo-layout-gap)) / 2)), 1fr));
}
.aoo-ui.aoo-grid--3, .aoo-ui .aoo-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - 2 * var(--aoo-layout-gap)) / 3)), 1fr));
}
.aoo-ui.aoo-grid--4, .aoo-ui .aoo-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, (100% - 3 * var(--aoo-layout-gap)) / 4)), 1fr));
}
.aoo-ui:is(.aoo-stack, .aoo-cluster, .aoo-grid) > *,
.aoo-ui :is(.aoo-stack, .aoo-cluster, .aoo-grid) > * {
  min-width: 0;
  margin: 0;
}

/* Witruimte: op dezelfde container als stack, cluster of grid. */
.aoo-ui.aoo-gap-sm, .aoo-ui .aoo-gap-sm { --aoo-layout-gap: var(--aoo-space-1, .5rem); }
.aoo-ui.aoo-gap-md, .aoo-ui .aoo-gap-md { --aoo-layout-gap: var(--aoo-space-2, 1rem); }
.aoo-ui.aoo-gap-lg, .aoo-ui .aoo-gap-lg { --aoo-layout-gap: var(--aoo-space-4, 2rem); }
.aoo-ui.aoo-gap-xl, .aoo-ui .aoo-gap-xl { --aoo-layout-gap: var(--aoo-space-5, 3rem); }
.aoo-ui.aoo-pad, .aoo-ui .aoo-pad { padding: var(--aoo-space-3, 1.5rem); }
.aoo-ui.aoo-pad-sm, .aoo-ui .aoo-pad-sm { padding: var(--aoo-space-2, 1rem); }
.aoo-ui.aoo-align-start, .aoo-ui .aoo-align-start { align-items: start; }
.aoo-ui.aoo-justify-between, .aoo-ui .aoo-justify-between { justify-content: space-between; }
.aoo-ui.aoo-text-center, .aoo-ui .aoo-text-center { text-align: center; }

/* Neutraal paneel: .aoo-card bestaat al en is een foto-overlaykaart. */
.aoo-ui.aoo-panel, .aoo-ui .aoo-panel {
  background: var(--aoo-surface, #fff);
  color: var(--aoo-fg, #111827);
  border: 1px solid var(--aoo-border, #e5e7eb);
  border-radius: var(--aoo-radius, 12px);
  padding: var(--aoo-space-3, 1.5rem);
  overflow-wrap: anywhere;
}
.aoo-ui.aoo-panel > :first-child, .aoo-ui .aoo-panel > :first-child { margin-top: 0; }
.aoo-ui.aoo-panel > :last-child, .aoo-ui .aoo-panel > :last-child { margin-bottom: 0; }
.aoo-ui.aoo-panel--soft, .aoo-ui .aoo-panel--soft { background: var(--aoo-surface-alt, #f9fafb); }
.aoo-ui.aoo-panel--raised, .aoo-ui .aoo-panel--raised { box-shadow: var(--aoo-shadow-sm, 0 4px 12px #00000014); }
/* Combineer met .aoo-stack op de kaart: actie onderaan bij kaarten van gelijke hoogte. */
.aoo-ui .aoo-stack > .aoo-push-bottom, .aoo-ui.aoo-stack > .aoo-push-bottom { margin-top: auto; }

/* Afbeelding: op de img zelf. Gebruik width/height en een passende alt in HTML. */
.aoo-ui img.aoo-media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--aoo-radius-sm, 10px);
}
.aoo-ui img.aoo-media--wide { aspect-ratio: 16 / 9; }
.aoo-ui img.aoo-media--square { aspect-ratio: 1; }

/* Scrollbare tabelcontainer; geef tabindex="0", role="region" en aria-label.
 * Gebruik hierin een gewone table; combineer niet met aoo-table--responsive.
 */
.aoo-ui .aoo-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.aoo-ui .aoo-scroll-x > table { width: 100%; min-width: 40rem; }
.aoo-ui .aoo-anchor { scroll-margin-top: var(--aoo-anchor-offset, 6rem); }
.aoo-ui .aoo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.aoo-ui :focus-visible {
  outline: 3px solid var(--aoo-link, #0b57d0);
  outline-offset: 3px;
}
.aoo-ui [hidden] { display: none !important; }
/* Alleen binnen nieuwe blokken; bestaande animaties daar worden ook beperkt. */
@media (prefers-reduced-motion: reduce) {
  .aoo-ui *, .aoo-ui *::before, .aoo-ui *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}