/* =========================================================================
   VaaS-Kerk — stylesheet

   Opzet: mobiel eerst, daarna één breekpunt naar de brede weergave.
   Breekpunten staan in `em`, zodat de indeling meeschuift wanneer een bezoeker
   de tekstgrootte van zijn browser verhoogt. De doelgroep doet dat vaker dan
   gemiddeld, dus dat is hier geen detail.
   ========================================================================= */

:root {
  /* Huisstijl */
  --colour-base: #294057;
  --colour-accent: #39b54a;
  --colour-soft: #e2eff6;
  --colour-line: #dce7ef;
  --colour-text-muted: #5c7488;
  --colour-surface: #ffffff;

  /*
   * Het merkgroen #39B54A haalt op wit geen AA-contrast (2,7:1) en is dus
   * onbruikbaar voor tekst of voor een knop met witte letters. Deze donkerder
   * variant komt op 4,7:1 en wordt gebruikt zodra er tekst overheen gaat.
   * Het merkgroen zelf blijft over voor kleine, niet-tekstuele accenten.
   */
  --colour-accent-strong: #2a8438;
  --colour-accent-strong-hover: #226e2e;

  /*
   * Warme neutralen naast de koele huisstijl. Geen tweede merkkleur, maar
   * gebroken wit met een steek naar de baksteen uit het beeldmateriaal. Bedoeld
   * voor blokken die uitnodigend moeten zijn in plaats van zakelijk.
   */
  --colour-warm: #faf7f2;
  --colour-warm-tint: #f3ece2;
  --colour-warm-line: #eae3d9;

  --font-body: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Ruimtemaat; alles in rem zodat het meeschaalt met de tekstgrootte. */
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3.5rem;
  --space-xxl: 5rem;

  --width-container: 72rem;
  --width-prose: 34rem;
  --radius: 4px;
}

/* -------------------------------------------------------------------------
   Basis
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--colour-base);
  background-color: var(--colour-surface);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 900;
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-m);
  max-width: var(--width-prose);
}

a {
  color: var(--colour-base);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--colour-accent-strong-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* Eén duidelijke focusring voor het hele document; nooit uitzetten. */
:focus-visible {
  outline: 3px solid var(--colour-accent-strong);
  outline-offset: 2px;
}

.container {
  width: min(100% - 2 * var(--space-m), var(--width-container));
  margin-inline: auto;
}

.skip-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  position: absolute;
  left: var(--space-m);
  top: var(--space-xs);
  z-index: 10;
  padding: var(--space-xs) var(--space-m);
  background: var(--colour-surface);
  border: 2px solid var(--colour-base);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6em 1.4em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}

.button--accent {
  background-color: var(--colour-accent-strong);
  color: var(--colour-surface);
}

.button--accent:hover {
  background-color: var(--colour-accent-strong-hover);
  color: var(--colour-surface);
}

.button--outline {
  border-color: var(--colour-base);
  color: var(--colour-base);
}

.button--outline:hover {
  background-color: var(--colour-soft);
  color: var(--colour-base);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  max-width: none;
  margin-top: var(--space-l);
}

/* -------------------------------------------------------------------------
   Koptekst en navigatie
   ------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--colour-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.375rem;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-logo__accent {
  color: var(--colour-accent-strong);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em 0.9em;
  font: inherit;
  font-weight: 700;
  color: var(--colour-base);
  background: none;
  border: 2px solid var(--colour-line);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

/*
 * Zonder JavaScript staat het menu open en is de knop nutteloos: dan verbergen
 * wij de knop in plaats van het menu. Het script zet `data-js` op <html> zodra
 * het draait; pas daarna mag het menu inklappen.
 */
:root:not([data-js="on"]) .nav-toggle {
  display: none;
}

:root[data-js="on"] .site-nav:not([data-open]) {
  display: none;
}

.site-nav {
  flex-basis: 100%;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-s) 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: var(--colour-base);
  text-decoration: none;
  border: 0;
  background: none;
  border-bottom: 1px solid var(--colour-line);
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  cursor: pointer;
}

.site-nav__link[aria-current="page"],
.site-nav__toggle.is-current {
  color: var(--colour-accent-strong);
}

.site-nav__submenu {
  display: none;
  padding: 0 0 var(--space-s) var(--space-m);
}

.site-nav__kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__kolomkop {
  margin: var(--space-s) 0 0;
  max-width: none;
  font-size: 0.9375rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}

.site-nav__item--group[data-open] > .site-nav__submenu,
.site-nav__item--group:focus-within > .site-nav__submenu {
  display: flex;
  flex-direction: column;
}

.site-nav__submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  text-decoration: none;
}

.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible {
  text-decoration: underline;
}

.site-nav__cta {
  margin-top: var(--space-m);
}

@media (min-width: 62em) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: none;
  }

  /*
   * Dezelfde selector als hierboven, maar op breed scherm staat het menu altijd
   * open. `flex` en niet `block`, anders valt de flex-indeling van de balk weg.
   */
  :root[data-js="on"] .site-nav:not([data-open]),
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    flex-basis: auto;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }

  .site-nav__item {
    position: relative;
  }

  .site-nav__link {
    width: auto;
    padding: var(--space-xs) 0;
    border-bottom: 2px solid transparent;
  }

  .site-nav__link[aria-current="page"],
  .site-nav__toggle.is-current {
    border-bottom-color: var(--colour-accent-strong);
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none;
    gap: var(--space-l);
    padding: var(--space-m) var(--space-l);
    background: var(--colour-surface);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgb(41 64 87 / 12%);
  }

  .site-nav__kolom {
    min-width: 15rem;
  }

  .site-nav__kolomkop {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--colour-line);
  }

  /* Het menu van "Voor wie" heeft één kolom en zou anders te smal worden. */
  .site-nav__submenu:has(.site-nav__kolom:only-child) .site-nav__kolom {
    min-width: 20rem;
  }

  .site-nav__item--group:hover > .site-nav__submenu,
  .site-nav__item--group[data-open] > .site-nav__submenu,
  .site-nav__item--group:focus-within > .site-nav__submenu {
    display: flex;
    flex-direction: row;
  }

  .site-nav__cta {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------------------
   Secties
   ------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-xl) var(--space-l);
}

.hero__intro {
  font-size: 1.25rem;
  color: var(--colour-text-muted);
  max-width: var(--width-prose);
}

/*
 * Hero met beeld. Op een smal scherm staat de foto boven de tekst en blijft de
 * tekst gewoon op wit staan: een donker vlak over een kleine foto laat er niets
 * van over. Pas op een breed scherm komt de tekst over het beeld te liggen.
 */
.hero--beeld {
  position: relative;
  padding-top: 0;
}

.hero__beeld {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-l);
}

@media (min-width: 62em) {
  .hero--beeld {
    display: grid;
    align-items: center;
    min-height: 30rem;
    overflow: hidden;
    padding-block: var(--space-xl);
  }

  .hero--beeld .hero__beeld {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
  }

  /*
   * Een verloop in de basiskleur, links vrijwel dekkend en naar rechts weg.
   * Daardoor haalt witte tekst altijd ruim AA, welke foto er ook onder ligt —
   * bij een foto alleen kun je dat niet garanderen.
   */
  .hero--beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgb(41 64 87 / 94%) 0%,
      rgb(41 64 87 / 88%) 32%,
      rgb(41 64 87 / 0%) 64%
    );
  }

  .hero--beeld .hero__inner {
    position: relative;
    z-index: 1;
  }

  .hero--beeld h1 {
    color: var(--colour-surface);
  }

  .hero--beeld .hero__intro {
    color: rgb(255 255 255 / 88%);
  }

  /* De omlijnde knop is standaard donker en zou op het beeld wegvallen. */
  .hero--beeld .button--outline {
    border-color: rgb(255 255 255 / 70%);
    color: var(--colour-surface);
  }

  .hero--beeld .button--outline:hover {
    background-color: rgb(255 255 255 / 12%);
    color: var(--colour-surface);
  }

  .hero--beeld :focus-visible {
    outline-color: var(--colour-surface);
  }
}

.section {
  padding-block: var(--space-xl);
}

.section--soft {
  background-color: var(--colour-soft);
  /*
   * #5C7488 haalt op dit lichtblauwe vlak net geen AA (4,2:1). Binnen deze
   * secties daarom een fractie donkerder, wat op 4,9:1 uitkomt.
   */
  --colour-text-muted: #4f6478;
}

.section__intro {
  font-size: 1.125rem;
  color: var(--colour-text-muted);
}

.prose > :last-child {
  margin-bottom: 0;
}

.plain-list,
.plain-links {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--width-prose);
}

.plain-list li {
  padding-left: var(--space-m);
  margin-bottom: var(--space-s);
  position: relative;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--colour-accent);
}

.plain-links li {
  border-bottom: 1px solid var(--colour-line);
}

.plain-links a {
  display: block;
  padding: var(--space-s) 0;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Uitspraken uit de praktijk
   ------------------------------------------------------------------------- */

.statements {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
  border-top: 1px solid var(--colour-line);
}

.statements__item {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--colour-line);
  font-size: 1.25rem;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Doorverwijsblokken — maximaal drie naast elkaar
   ------------------------------------------------------------------------- */

.link-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-l) var(--space-xl);
}

.link-card h3 {
  margin-bottom: var(--space-xs);
}

.link-card p {
  color: var(--colour-text-muted);
  margin-bottom: 0;
}

@media (min-width: 40em) {
  .link-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .link-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Proces als tijdlijn
   ------------------------------------------------------------------------- */

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--space-l);
}

.process__step {
  counter-increment: stap;
  padding-top: var(--space-m);
  border-top: 2px solid var(--colour-line);
}

.process__step::before {
  content: counter(stap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-s);
  border-radius: 50%;
  background-color: var(--colour-base);
  color: var(--colour-surface);
  font-weight: 900;
}

.process__step p {
  color: var(--colour-text-muted);
  margin-bottom: 0;
}

@media (min-width: 62em) {
  .process {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-l);
  }
}

/* -------------------------------------------------------------------------
   Veelgestelde vragen
   ------------------------------------------------------------------------- */

.faq {
  max-width: 48rem;
  border-top: 1px solid var(--colour-line);
}

.faq__item {
  border-bottom: 1px solid var(--colour-line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-m);
  font-weight: 700;
  cursor: pointer;
}

.faq__item p {
  color: var(--colour-text-muted);
  padding-bottom: var(--space-m);
}

/* -------------------------------------------------------------------------
   Afsluitende blokken
   ------------------------------------------------------------------------- */

.related {
  padding-block: var(--space-l);
  border-top: 1px solid var(--colour-line);
}

.related h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-s);
}

.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
}

.related__list a {
  font-weight: 700;
}

.cta {
  background-color: var(--colour-soft);
  padding-block: var(--space-xl);
}

.cta p {
  max-width: var(--width-prose);
  color: #4f6478;
}

/* -------------------------------------------------------------------------
   Voettekst
   ------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-xxl);
  padding-block: var(--space-xl) var(--space-l);
  border-top: 1px solid var(--colour-line);
}

.site-footer__columns {
  display: grid;
  gap: var(--space-l);
}

.site-footer__column h2 {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-s);
}

.site-footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__column li {
  margin-bottom: var(--space-xs);
}

.site-footer__column a {
  display: inline-block;
  padding-block: 0.35rem;
}

.site-footer__contact {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--colour-line);
}

.site-footer__notice {
  color: var(--colour-text-muted);
  max-width: 40rem;
}

.site-footer__legal {
  color: var(--colour-text-muted);
  margin: 0;
}

@media (min-width: 40em) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .site-footer__contact {
    display: flex;
    gap: var(--space-xl);
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------------
   Beweging beperken wanneer de bezoeker daarom vraagt
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   Jaarkalender
   Periode links, wat er gebeurt rechts, met een doorlopende lijn ertussen.
   Op smalle schermen komt de periode boven de tekst te staan.
   ------------------------------------------------------------------------- */

.jaarkalender {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}

.jaarkalender__moment {
  position: relative;
  padding: 0 0 var(--space-l) var(--space-l);
  border-left: 2px solid var(--colour-line);
}

.jaarkalender__moment:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.jaarkalender__moment::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--colour-accent-strong);
  border: 2px solid var(--colour-surface);
}

.jaarkalender__moment[data-bron="gemeente"]::before {
  background-color: var(--colour-base);
}

.jaarkalender__periode {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
  color: var(--colour-text-muted);
}

.jaarkalender__inhoud h3 {
  margin-bottom: var(--space-xs);
}

.jaarkalender__inhoud p {
  margin-bottom: 0;
  color: var(--colour-text-muted);
}

.jaarkalender__herkomst {
  margin-top: var(--space-xs);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--colour-base);
}

@media (min-width: 48em) {
  .jaarkalender__moment {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-l);
  }

  .jaarkalender__periode {
    margin-bottom: 0;
    text-align: right;
  }
}

/* Uitgelichte slotzin; iets groter, zonder een kop te worden. */
.lead-out {
  font-size: 1.375rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Tegels op de naad tussen hero en inhoud

   Op een smal scherm staan ze gewoon onder elkaar onder de hero. Pas op een
   breed scherm schuiven ze over de onderrand van het beeld heen. Ze hebben een
   dekkende achtergrond, zodat de tekst nooit op de foto komt te liggen.
   ------------------------------------------------------------------------- */

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tegels {
  padding-block: var(--space-l) 0;
}

.tegels__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.tegel {
  padding: var(--space-m);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
}

.tegel h3 {
  margin-bottom: var(--space-xs);
  font-size: 1.125rem;
}

.tegel p {
  margin-bottom: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 1rem;
}

@media (min-width: 40em) {
  .tegels__lijst {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  /*
   * De hero krijgt extra ruimte onderin, zodat de knoppen niet achter de
   * tegels verdwijnen als de tegels eroverheen schuiven.
   */
  .hero--beeld {
    padding-bottom: 7rem;
  }

  .tegels {
    position: relative;
    z-index: 2;
    margin-top: -5.5rem;
    padding-block: 0 var(--space-l);
  }

  .tegels__lijst {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }

  .tegel {
    box-shadow: 0 4px 16px rgb(41 64 87 / 10%);
  }
}

/* Iconen: één set, lijnstijl, neemt de tekstkleur van de omgeving over. */
.icoon {
  display: block;
  color: var(--colour-base);
}

.tegel .icoon {
  margin-bottom: var(--space-s);
}

/* -------------------------------------------------------------------------
   Drie kolommen die samen één redenering vormen

   Onder elkaar op een smal scherm, naast elkaar zodra er ruimte is. De kolom
   met nadruk draagt het antwoord; die krijgt het lichtblauwe vlak, zodat de
   rij leest als probleem, probleem, antwoord.
   ------------------------------------------------------------------------- */

.kolommen {
  padding-block: var(--space-xl);
}

.kolommen__lijst {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

.kolom h2 {
  font-size: 1.375rem;
  margin-bottom: var(--space-s);
}

.kolom p {
  max-width: none;
  color: var(--colour-text-muted);
}

.kolom > :last-child {
  margin-bottom: 0;
}

.kolom .statements {
  max-width: none;
  border-top: 0;
}

.kolom .statements__item {
  font-size: 1.0625rem;
  padding-block: var(--space-s);
}

.kolom .statements__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kolom--nadruk {
  background-color: var(--colour-soft);
  border-radius: var(--radius);
  padding: var(--space-l);
  /* Zie de toelichting bij .section--soft: #5C7488 haalt hier geen AA. */
  --colour-text-muted: #4f6478;
}

@media (min-width: 62em) {
  .kolommen__lijst {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  /* De kolom met het vlak steekt iets uit, zodat de drie optisch uitlijnen. */
  .kolom--nadruk {
    margin-top: calc(var(--space-l) * -1);
  }
}

.link-card .icoon {
  margin-bottom: var(--space-s);
}

/* -------------------------------------------------------------------------
   Beeldband binnen een sectie
   Een lage, brede uitsnede. Vaste verhouding, zodat de pagina niet verspringt
   terwijl het beeld nog laadt.
   ------------------------------------------------------------------------- */

.beeld-band {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
}

/* -------------------------------------------------------------------------
   Doorverwijskaarten
   Witte kaarten op het zachte vlak, met het icoon in een gekleurde cirkel.
   De hele kaart is klikbaar, maar er staat één link in de leesvolgorde.
   ------------------------------------------------------------------------- */

.link-card {
  position: relative;
  padding: var(--space-l);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.link-card:hover {
  border-color: var(--colour-base);
  box-shadow: 0 6px 18px rgb(41 64 87 / 10%);
}

/* Strekt de link over de hele kaart, zonder een tweede link toe te voegen. */
.link-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.link-card h3 a {
  text-decoration-thickness: 2px;
}

.link-card__icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-m);
  border-radius: 50%;
  background-color: var(--colour-soft);
}

.link-card .icoon {
  margin-bottom: 0;
}

/* De focusring hoort om de hele kaart, niet alleen om de kop. */
.link-card:focus-within {
  border-color: var(--colour-accent-strong);
  box-shadow: 0 0 0 3px var(--colour-accent-strong);
}

.link-card h3 a:focus-visible {
  outline: none;
}

/* -------------------------------------------------------------------------
   Warme sectie
   Gebroken wit in plaats van het koele lichtblauw. De secundaire tekstkleur
   gaat een stap donkerder mee: #5C7488 komt op dit vlak op 4,6:1 uit, en dat
   is te krap om op te vertrouwen.
   ------------------------------------------------------------------------- */

.section--warm {
  background-color: var(--colour-warm);
  --colour-text-muted: #4f6478;
}

/* Compactere, warmere doorverwijskaarten binnen zo'n sectie. */
.section--warm .link-cards {
  gap: var(--space-m);
}

.section--warm .link-card {
  padding: var(--space-m);
  border-color: var(--colour-warm-line);
}

.section--warm .link-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.section--warm .link-card__icoon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-s);
  background-color: var(--colour-warm-tint);
}

.section--warm .link-card:hover {
  border-color: var(--colour-base);
  box-shadow: 0 4px 14px rgb(41 64 87 / 8%);
}

/* -------------------------------------------------------------------------
   Duoblok: tekst en beeld naast elkaar

   Op een smal scherm onder elkaar, tekst eerst. De donkere variant geeft de
   pagina een rustpunt tussen de lichte blokken; wit op de basiskleur haalt
   10,7:1, dus daar is geen twijfel over de leesbaarheid.
   ------------------------------------------------------------------------- */

.duo {
  padding-block: var(--space-xl);
}

.duo__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.duo__afbeelding {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.duo--donker {
  background-color: var(--colour-base);
  color: var(--colour-surface);
}

.duo--donker h2 {
  color: var(--colour-surface);
}

.duo--donker p {
  color: rgb(255 255 255 / 86%);
}

.duo--donker a:not(.button) {
  color: var(--colour-surface);
}

.duo--donker :focus-visible {
  outline-color: var(--colour-surface);
}

/* Het schermbeeld krijgt een lichte rand, zodat het niet in het vlak wegvalt. */
.duo--donker .duo__afbeelding {
  border: 1px solid rgb(255 255 255 / 25%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
}

@media (min-width: 62em) {
  .duo__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-xxl);
  }
}

/* -------------------------------------------------------------------------
   Wat wij wel en niet doen
   ------------------------------------------------------------------------- */

.wel-niet {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.wel-niet__kolom {
  padding: var(--space-l);
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-warm-line);
  border-radius: var(--radius);
}

.wel-niet__kolom h3 {
  margin-bottom: var(--space-m);
}

.wel-niet__kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wel-niet__kolom li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--space-s);
}

.wel-niet__kolom li:last-child {
  margin-bottom: 0;
}

/* Vinkje en kruisje als vorm, niet als kleur: ook zonder kleurzicht duidelijk. */
.wel-niet__kolom--wel li::before,
.wel-niet__kolom--niet li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

.wel-niet__kolom--wel li::before {
  content: "\2713";
  color: #1f6b2c;
}

.wel-niet__kolom--niet li::before {
  content: "\00D7";
  color: #8a2b12;
  font-size: 1.25em;
  line-height: 1.1;
}

@media (min-width: 48em) {
  .wel-niet {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------------------
   Kaarten met beeld
   ------------------------------------------------------------------------- */

.beeld-kaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

.beeld-kaart {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.beeld-kaart:hover {
  border-color: var(--colour-base);
  box-shadow: 0 6px 18px rgb(41 64 87 / 12%);
}

.beeld-kaart:focus-within {
  border-color: var(--colour-accent-strong);
  box-shadow: 0 0 0 3px var(--colour-accent-strong);
}

.beeld-kaart__afbeelding {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.beeld-kaart__tekst {
  padding: var(--space-m);
}

.beeld-kaart h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.beeld-kaart h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.beeld-kaart h3 a:focus-visible {
  outline: none;
}

.beeld-kaart p {
  margin-bottom: 0;
  max-width: none;
  color: var(--colour-text-muted);
  font-size: 1rem;
}

@media (min-width: 40em) {
  .beeld-kaarten {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .beeld-kaarten {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }
}