/* Gedeelde maatvoering met even brede beeld- en tekstkolommen. */
:root {
  --inhoud-breedte: 1120px;
  --pagina-rand: 30px;
  --intro-boven: 65px;
  --intro-onder: 40px;
  --kolom-ruimte: 36px;
  --blok-ruimte: 28px;
  --sectie-ruimte: 65px;
}

main:not(.home-main) {
  max-width: var(--inhoud-breedte);
  margin-inline: auto;
  padding-inline: var(--pagina-rand);
}
.intro { padding-block: var(--intro-boven) var(--intro-onder); }

/* Behoud de bestaande omslag naar één kolom op kleine schermen. */
@media (min-width: 651px) {
  .chapter, .atm-content, .avans-content, .brain-layout,
  .dementie-layout, .motivation-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 751px) {
  .school-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Een gedeelde bovenrand voor beeld en tekst, zonder handmatige offsets. */
.chapter, .avans-content, .brain-layout, .dementie-layout,
.brain-story-top, .motivation-story, .school-layout {
  column-gap: var(--kolom-ruimte);
}
.chapter, .avans-content, .brain-layout, .dementie-layout {
  margin-block: 0 var(--sectie-ruimte);
}
.chapter > *, .brain-layout > *, .home-learning > * { min-width: 0; }
.chapter-copy { padding-top: 0; }
.chapter-copy > :first-child, .avans-story > :first-child { margin-top: 0; }
.chapter-copy > :last-child { margin-bottom: 0; }
.brain-story-top figure:first-child, .brain-story-top figure:last-child { transform: none; }

/* Beeldreeksen krijgen dezelfde minimale tussenruimte als ATM. */
.chapter-illustrations, .education-images, .brain-images {
  display: flex;
  flex-direction: column;
  gap: var(--blok-ruimte);
}
.chapter-illustrations > *, .education-images > *, .brain-images > .brain-diagram {
  margin-block: 0;
}
.motivation-visual, .school-images, .avans-image { gap: var(--blok-ruimte); }

/* Deze twee pagina's hebben hun titel binnen het inhoudsraster. */
.motivation-story, .school-layout {
  max-width: none;
  margin: 0;
  padding-block: var(--intro-boven) var(--sectie-ruimte);
  row-gap: var(--blok-ruimte);
}
.motivation-story > h1, .school-layout > h1 {
  margin: 0 0 calc(24px + var(--intro-onder) - var(--blok-ruimte));
}
.motivation-visual { margin-bottom: 0; }

/* Hetzelfde ritme tussen tekstsecties; korte leeskolommen blijven behouden. */
.chapter-copy h2:not(:first-child), .avans-story h2:not(:first-child),
.brain-story h2, .education-article h2:not(:first-child),
.article-copy h2:not(:first-child), .motivation-copy > h2,
.school-copy h2, .dementie-copy h2:not(:first-child) { margin-top: 36px; }
.brain-story { margin-bottom: var(--sectie-ruimte); }
.education-article, .article-copy { padding-bottom: var(--sectie-ruimte); }
.education-banner { margin-bottom: var(--blok-ruimte); }

/* Home behoudt zijn brede openingsbeeld; de inhoud volgt de artikelmarges. */
.home-learning, .home-quote {
  max-width: var(--inhoud-breedte);
  margin-inline: auto;
  padding-inline: var(--pagina-rand);
}
.home-learning {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kolom-ruimte);
  padding-block: var(--intro-boven) var(--blok-ruimte);
  align-items: start;
}
.home-quote { padding-block: var(--blok-ruimte) var(--sectie-ruimte); }
.not-found { padding-block: var(--intro-boven) var(--sectie-ruimte); }

@media (max-width: 850px) {
  :root { --intro-boven: 40px; }
}
@media (max-width: 650px) {
  :root {
    --pagina-rand: 20px;
    --intro-onder: 25px;
    --kolom-ruimte: 28px;
    --sectie-ruimte: 40px;
  }
  .chapter, .brain-layout, .brain-story-top, .home-learning { gap: var(--blok-ruimte); }
  .home-learning { grid-template-columns: 1fr; }
  .brain-diagram { max-width: none; }
  main h1 { overflow-wrap: anywhere; }
}