/* =========================================================================
   Nathalie Bosters — Kindertheater & Kindercoaching
   style.css
   -------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & basis
   3.  Typografie
   4.  Layout helpers
   5.  Knoppen
   6.  Header / navigatie
   7.  Hero
   8.  Secties: diensten, quote, galerij, over, opleidingen
   9.  Reviews
   10. Contact & footer
   11. Subpagina-onderdelen
   12. Lightbox
   13. Animaties
   14. Responsive
   ========================================================================= */

/* ============================ 1. DESIGN TOKENS ========================== */
:root {
  /* Kleuren — afgeleid van het logo (2026) */
  --c-teal-900: #1d4a50;
  --c-teal-700: #245a61;
  --c-teal-500: #3f8f8a;
  --c-mint-400: #3fc8c0;
  --c-sage-400: #7fb79a;
  --c-sage-200: #a8d5a2;
  --c-clay-500: #a5675c;
  --c-coral-400: #e79a8d;
  --c-coral-500: #d98576;
  --c-coral-600: #c9614e;
  /* Tekstkleur op de coral knop. Wit haalde daar maar 2,2:1; dit 5,7:1. */
  --c-coral-ink: #4a2a22;

  /* Neutralen */
  --c-cream: #fdf0e4;
  --c-cream-dark: #eee7d9;
  --c-blush: #fbf3ef;
  --c-mist: #eef4ee;
  --c-ink: #3a423c;
  --c-ink-soft: #5a625b;
  --c-ink-mute: #616660;
  --c-white: #ffffff;
  --c-forest: #4b5c52;
  --c-forest-dark: #3f4d44;

  /* Typografie */
  --font-head: 'Quicksand', 'Trebuchet MS', sans-serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.25rem, 1.2rem + 4.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.3vw, 2.375rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;

  /* Ruimte */
  --sp-section: clamp(3.5rem, 2rem + 6vw, 5.625rem);
  --sp-gutter: clamp(1.25rem, 0.75rem + 2vw, 1.75rem);
  --wrap: 1180px;

  /* Vorm */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 6px 16px rgba(80, 90, 80, 0.07);
  --shadow-md: 0 10px 30px rgba(80, 90, 80, 0.09);
  --shadow-lg: 0 20px 50px rgba(80, 90, 80, 0.14);

  --ease: cubic-bezier(0.22, 0.68, 0.31, 1);
  /* 58px logo + 2x14px padding + 1px rand. Wijzig je de logohoogte of de
     padding van .site-header__inner, pas dit dan mee aan: dit token stuurt
     de scroll-offset van de ankerlinks en de hoogte van het mobiele menu. */
  --header-h: 87px;
}

/* ============================ 2. RESET & BASIS ========================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* figure en blockquote hebben in de browser standaard 'margin: 1em 40px'.
   Zonder deze regel worden de reviewkaarten en het quote-blok 80px smaller. */
figure, blockquote, dl, dd { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--c-coral-600);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--c-teal-700); }

::selection { background: var(--c-coral-400); color: #fff; }

:focus-visible {
  outline: 3px solid var(--c-mint-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-teal-700);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--font-head);
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ 3. TYPOGRAFIE ============================ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-teal-700);
}

h1 { font-size: var(--fs-hero); letter-spacing: -0.5px; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Was 13px in coral-400: dat haalde maar 2,0:1 contrast op de crème, blush en
   mist achtergronden en las daardoor slecht. Nu 15px en coral-600 — dezelfde
   kleur die links al hebben, dus binnen het palet, en 3,6:1. De letterspacing
   iets terug, want 1,5px op kleine kapitalen trekt de woorden uit elkaar.
   De varianten op donkere vlakken (.reviews, .highlight) houden hun eigen
   kleur; daar was het contrast al goed. */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-coral-600);
  margin-bottom: 12px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

/* ============================ 4. LAYOUT ================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }
/* Voor een sectie die inhoudelijk bij de sectie erbóven hoort: geen eigen
   bovenruimte, zodat de twee als één geheel lezen. Zonder dit staat er twee
   keer sectiepadding boven elkaar en valt het blok los. */
.section--aansluitend { padding-top: 0; padding-bottom: 3rem; }
.section--medium { padding-top: 2rem; }

.section-head {
  /* Breder dan de 660px van de kop, zodat een lead van één zin ook op één regel
     past. De kop houdt hieronder zijn eigen breedte, dus die breekt precies
     zoals eerst. */
  max-width: 760px;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3.125rem);
  text-align: center;
}
/* Op 404.html en privacy.html is de paginakop een h1 binnen een .section-head.
   Die moet er hetzelfde uitzien als de h2 van de gewone secties; de forse
   --fs-hero hoort alleen bij de hero. */
.section-head h1,
.section-head h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0;
  max-width: 660px;
  margin: 0 auto 14px;
}

.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 36px; }

/* Witte band tussen de hero en de eerste sectie. Zet de onderrand van de
   herofoto af tegen de paginaachtergrond; die is sinds 2026-09-12 donkerder en
   liep daardoor vrij direct in de foto over. */
.band-wit {
  background: var(--c-white);
  height: clamp(1.75rem, 3vw, 3rem);
}

.bg-blush { background: var(--c-blush); }
.bg-mist { background: var(--c-mist); }
.bg-white { background: var(--c-white); }

.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ============================ 5. KNOPPEN =============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  text-align: center;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Donkere tekst in plaats van wit. Wit op deze zachte coral haalde 2,23:1 en
   dat is de meest geklikte knop van de site; met --c-coral-ink is het 5,7:1 en
   op de hoverkleur 4,6:1. De achtergrondkleur zelf blijft ongewijzigd. */
.btn--primary {
  background: var(--c-coral-400);
  color: var(--c-coral-ink);
  box-shadow: 0 8px 20px rgba(231, 154, 141, 0.4);
}
.btn--primary:hover { background: var(--c-coral-500); color: var(--c-coral-ink); }

.btn--teal {
  background: var(--c-teal-700);
  color: #fff;
  box-shadow: 0 8px 20px rgba(36, 90, 97, 0.25);
}
.btn--teal:hover { background: var(--c-teal-900); color: #fff; }

.btn--light {
  /* Bewust de oude, lichtere crèmetint en niet --c-cream: deze knop staat op de
     donkere hero's, nooit naast de paginaachtergrond. Hier wint contrast met de
     foto van kleurgelijkheid met de rest van de pagina. */
  background: #fef4eb;
  color: var(--c-coral-600);
  box-shadow: 0 10px 26px rgba(120, 60, 50, 0.24);
}
.btn--light:hover { color: var(--c-teal-700); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

.btn--sm { font-size: 0.9375rem; padding: 11px 20px; }

.link-arrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-arrow::after {
  content: '→';
  transition: transform 0.2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================ 6. HEADER ================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--c-cream-dark);
  transition: box-shadow 0.25s var(--ease);
}
/* De blur staat bewust op een pseudo-element en niet op .site-header zelf:
   backdrop-filter maakt een element het containing block voor position:fixed,
   waardoor het fullscreen mobiele menu binnen de header zou blijven hangen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 244, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(80, 90, 80, 0.08); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 58px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }

/* Onderdelen die alleen in het fullscreen mobiele menu bestaan */
.nav__panel-head,
.nav__contact { display: none; }

.nav__list {
  display: flex;
  gap: 24px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
}
.nav__list a {
  color: #4a5450;
  padding-block: 4px;
  position: relative;
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--c-coral-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__list a:hover { color: var(--c-teal-700); }
.nav__list a:hover::after,
.nav__list a[aria-current='page']::after { transform: scaleX(1); }
.nav__list a[aria-current='page'] { color: var(--c-teal-700); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--c-teal-700);
}
.nav-toggle:hover { background: rgba(36, 90, 97, 0.07); }
.nav-toggle__bar {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

/* ============================ 7. HERO ================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  overflow: hidden;
}
.hero--compact { min-height: 420px; }

.hero__media {
  position: absolute;
  inset: 0;
}
/* <picture> is inline: expliciet block + volle hoogte, anders werkt object-fit niet */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Uitsnede-varianten: kies het zwaartepunt van de foto */
.hero__media--low img { object-position: center 78%; }
.hero__media--high img { object-position: center 25%; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(60, 30, 26, 0.45) 0%, rgba(60, 30, 26, 0) 62%),
    linear-gradient(115deg,
      rgba(165, 103, 92, 0.88) 0%,
      rgba(217, 133, 118, 0.7) 46%,
      rgba(36, 90, 97, 0.52) 100%);
}
/* --- Hero met de hartballon-foto ---------------------------------------
   De foto is 1246px breed, dus niet oprekken naar full-bleed. In plaats
   daarvan staat hij rechts en vult een kleurverloop de linkerhelft.

   Drie lagen zorgen dat er geen rand te zien is:
   1. De achtergrond van de sectie volgt hetzelfde verloop als de muur op de
      foto: links donker, naar rechts toe lichter, met een lichtplek rechtsboven
      op de plek waar de spot op de foto staat.
   2. De foto zelf vervaagt naar links weg via mask-image, dus er is geen harde
      fotorand meer.
   3. De overlay dooft over een lange afstand uit voor de leesbaarheid.
   Mobiel: zie het blok onder 860px in sectie 14. */
.hero--hart {
  /* Vulling links. De donkerste kolom staat direct naast de foto, want daar is
     de foto zelf bijna zwart; naar links toe loopt hij op naar de wandkleur.
     De stops zijn in px vanaf rechts, zodat de overgang op elke schermbreedte
     op dezelfde plek t.o.v. de foto valt. */
  background:
    radial-gradient(720px 520px at calc(100% - 160px) 4%, rgba(120, 190, 176, 0.30) 0%, rgba(120, 190, 176, 0) 72%),
    linear-gradient(to left,
      #0b2c30 0,
      #0b2c30 min(62vw, 940px),
      #123a40 calc(min(62vw, 940px) + 10vw),
      #1a4c53 calc(min(62vw, 940px) + 26vw),
      #1d5259 100%);
}
/* De foto is 62% breed en wordt onderaan uitgelijnd. Horizontaal wordt er niets
   weggesneden, dus de hele groep staat er nog op; verticaal verdwijnt alleen de
   lege muur bovenin (ruim 200 regels, de ballon begint pas op regel 405).
   Onderaan blijft alles staan, inclusief de handen die de kinderen vasthouden. */
.hero--hart .hero__media {
  left: auto;
  right: 0;
  width: min(62%, 940px);
  /* Zachte uitvloeiing naar links: geen zichtbare fotorand. De ramp is klaar
     voordat de hartballon in beeld komt, zodat die niet vervaagt. */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 9%,
    rgba(0, 0, 0, 0.68) 17%,
    rgba(0, 0, 0, 0.92) 24%,
    #000 31%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 9%,
    rgba(0, 0, 0, 0.68) 17%,
    rgba(0, 0, 0, 0.92) 24%,
    #000 31%);
}
.hero--hart .hero__media img { object-position: center bottom; }
.hero--hart .hero__overlay {
  background: linear-gradient(to left,
    rgba(14, 50, 55, 0) 0,
    rgba(14, 50, 55, 0) 760px,
    rgba(14, 50, 55, 0.32) calc(760px + 8vw),
    rgba(14, 50, 55, 0.62) calc(760px + 22vw),
    rgba(14, 50, 55, 0.8) 100%);
}
.hero--hart h1,
.hero--hart .hero__text { text-shadow: 0 2px 18px rgba(10, 40, 42, 0.45); }
/* Iets kleiner dan de titels op de subpagina's: met de volle maat kwam het
   laatste woord van regel twee op de smallere laptopschermen tegen de
   hartballon aan. Alleen deze hero, dus de rest van de site blijft gelijk. */
.hero--hart h1 { font-size: clamp(2rem, 1.05rem + 3.7vw, 3.125rem); }

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(3.5rem, 2rem + 6vw, 5rem);
}
.hero__content { max-width: 640px; }

.hero h1,
.hero p { color: #fff; }
.hero h1 {
  margin-bottom: 22px;
  text-shadow: 0 2px 18px rgba(90, 50, 42, 0.28);
}
.hero__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 36px;
  text-shadow: 0 1px 10px rgba(90, 50, 42, 0.3);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Donkerder teal dan het token: op de perzik achtergrond leest teal-500 te
   licht (2,6:1), teal-700 haalt 5,3:1. */
.hero .badge { color: var(--c-teal-700); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Zelfde perzikverloop als het contactblok boven de footer, zodat de badge
     en dat blok dezelfde kleur hebben. */
  background: linear-gradient(150deg, #fbe9e3, #f6d5cb);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--c-teal-500);
  margin-bottom: 26px;
}
.badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-sage-400);
}

/* Breadcrumb op subpagina's */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}
.crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: rgba(255, 255, 255, 0.75); }
.crumbs span[aria-hidden] { opacity: 0.6; }

/* ============================ 8. SECTIES =============================== */
/* --- Dienstenkaarten --- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-cream-dark);
  border-radius: 22px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--c-ink-soft); font-size: var(--fs-small); margin-bottom: 18px; }
.card .link-arrow { margin-top: auto; }

.card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card__icon--teal { background: #eaf3ec; color: var(--c-teal-500); }
.card__icon--coral { background: #fbe9e3; color: var(--c-coral-500); }
.card__icon--blue { background: #e7eef4; color: #3f7f92; }

/* --- Quote-blok --- */
/* Klein sfeerbeeld naast het uitgelichte citaat op de homepage. */
.quote-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* Citaat en foto vormen samen één vlak. De achtergrond, de ronding en de
     binnenruimte staan daarom hier en niet meer op .quote-block. Exact dezelfde
     padding als het citaat eerst zelf had, dus de tekst blijft op z'n plek
     staan; alleen de foto schuift mee naar binnen het vlak in.
     .quote-row zit bewust binnen een losse .wrap en is er zelf niet één: anders
     valt de zijmarge van .wrap binnen dit vlak en loopt de achtergrond op
     mobiel door tot de schermrand. */
  background: var(--c-mist);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
}
.quote-row .quote-block {
  flex: 1;
  background: none;
  border-radius: 0;
  padding: 0;
}
.quote-row__foto {
  flex: none;
  width: clamp(350px, 18vw, 220px);
  text-align: center;
}
.quote-row__foto img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(80, 90, 80, 0.16);
}

.quote-block {
  background: var(--c-mist);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  text-align: center;
}
.quote-block::before {
  content: '\201C';
  display: block;
  font-family: var(--font-head);
  font-size: 64px;
  line-height: 0.6;
  color: #bcd4c3;
  margin-bottom: 6px;
}
.quote-block__main {
  font-family: var(--font-head);
  font-size: clamp(1.1875rem, 1rem + 1.1vw, 1.5rem);
  line-height: 1.55;
  font-weight: 500;
  color: #2f6a63;
  max-width: 820px;
  margin: 0 auto 14px;
}
.quote-block__sub {
  font-size: var(--fs-body);
  color: #5a655c;
  max-width: 640px;
  margin-inline: auto;
}

/* --- Galerij --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;
}
.gallery__item {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--c-cream-dark);
  padding: 0;
  cursor: zoom-in;
  display: block;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(40, 60, 50, 0.35));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.gallery__item:hover::after { opacity: 1; }

.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

/* --- Over Nathalie --- */
.about {
  display: grid;
  /* Tekst links in de brede kolom, foto's rechts in de smalle. Stond eerder
     omgekeerd; zie changelog 2026-09-12. */
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
.about__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lg);
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.about__body p { color: #4f574f; line-height: 1.7; }

/* Vier foto's in een 2x2-raster, op de plek waar eerder één portret stond.
   Vierkante cellen, zodat staande en liggende foto's samen een rustig blok
   vormen. Wordt gebruikt in .about (homepage) en in .split (toneellessen). */
.foto-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
.foto-raster img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 5px solid #fff;
  box-shadow: var(--shadow-lg);
}


.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 28px;
}
.stats__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.875rem;
  color: var(--c-teal-500);
  line-height: 1.1;
}
.stats__label { font-size: 0.875rem; color: var(--c-ink-mute); }

/* --- Opleidingen --- */
.pill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pill {
  background: var(--c-white);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.pill::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-sage-400);
  flex-shrink: 0;
}

/* ============================ 9. REVIEWS =============================== */
.reviews {
  background: linear-gradient(180deg, #55685b, var(--c-forest));
  color: #fff;
}
.reviews .eyebrow { color: #f3c1b6; }

/* Kopblok exact zoals het oorspronkelijke Claude Design-concept:
   620px breed, 40px eronder, kop 36px met 8px marge. */
.reviews .section-head {
  max-width: 620px;
  margin-bottom: 40px;
}
.reviews h2 {
  color: #fff;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  margin-bottom: 8px;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.tab {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 11px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #eef1ec;
  transition: all 0.2s var(--ease);
}
.tab:hover { border-color: #f3c1b6; }
.tab[aria-selected='true'] {
  background: #f3c1b6;
  border-color: #f3c1b6;
  color: var(--c-forest-dark);
}

/* Kolommen in plaats van een raster. Met een grid kreeg elke rij de hoogte van
   de langste review erin; korte reviews lieten daardoor gaten vallen en de
   onderranden liepen rafelig. Nu stapelen de blokken zich per kolom op en
   sluiten ze op elkaar aan. `break-inside: avoid` houdt een review heel. */
.review-grid { column-count: 3; column-gap: 20px; }

.review {
  break-inside: avoid;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 26px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.review::before {
  content: '\201C';
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1;
  color: #f3c1b6;
  margin-bottom: 8px;
}
.review p {
  font-size: 0.96875rem;
  line-height: 1.65;
  color: #eef1ec;
  font-style: italic;
}

/* =========================== 10. CONTACT & FOOTER ====================== */
.contact-card {
  background: linear-gradient(150deg, #fbe9e3, #f6d5cb);
  border-radius: 28px;
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  align-items: center;
  box-shadow: 0 20px 50px rgba(217, 133, 118, 0.18);
}
.contact-card__intro p { color: #7a504a; font-size: var(--fs-lead); max-width: 440px; margin-bottom: 28px; }
.contact-card__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.contact-details {
  background: #fff;
  border-radius: var(--r-md);
  padding: 30px;
  box-shadow: 0 12px 30px rgba(80, 90, 80, 0.1);
}
.contact-details h3 { font-size: 1.1875rem; margin-bottom: 18px; }
.contact-details dl { margin: 0; display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-small); color: #4f574f; }
.contact-details dt {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-teal-700);
  margin-bottom: 2px;
}
.contact-details dd { margin: 0; }

/* Nspire-logo naast de regel "Voorheen".
   Het aangeleverde bestand is een rechthoek waarvan de tentflappen links en
   rechts al zijn afgesneden; op verzoek van Nathalie tonen we hem daarom als
   rechthoek in plaats van uitgeknipt, en kleiner. */
.contact-details__voorheen {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-details__voorheen picture { flex: none; }
.contact-details__voorheen img {
  width: 72px;
  height: auto;
  border-radius: 6px;
}

.site-footer { background: var(--c-forest-dark); color: #cfd8cf; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 44px;
}
.site-footer__logo {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 12px 18px;
}
.site-footer__logo img { height: 46px; width: auto; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.875rem;
}
.site-footer__nav a { color: #cfd8cf; }
.site-footer__nav a:hover { color: #fff; }

.site-footer__meta { font-size: 0.8125rem; color: #9fb0a3; text-align: right; }
.site-footer__meta em { font-style: italic; }

/* =========================== 11. SUBPAGINA'S =========================== */
/* Tekstblok met opsomming */
.prose { max-width: 720px; }
.prose p { color: #4f574f; line-height: 1.75; }

.check-list { display: grid; gap: 12px; margin-block: 20px; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: #4f574f;
  line-height: 1.6;
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #eaf3ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233f8f8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Split-blok: tekst naast beeld */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
.split--reverse .split__media,
.split--reverse .foto-raster { order: -1; }
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Workshop-/aanbodkaart met meta */
.offer {
  background: #fff;
  border: 1px solid var(--c-cream-dark);
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.offer:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.offer p { color: var(--c-ink-soft); font-size: var(--fs-small); }
.offer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: #eaf3ec;
  color: var(--c-teal-500);
}
.tag--coral { background: #fbe9e3; color: var(--c-coral-600); }
/* Doelgroeplabel op de workshopkaarten: onderscheidt zich van de duur-tags,
   nu basis- en voortgezet onderwijs in één blok staan. */
.tag--sage { background: #e6f0e8; color: #3f6b52; }

/* Uitgelicht blok (bv. 'Kei fijn groepje') */
.highlight {
  background: linear-gradient(140deg, var(--c-teal-700), #2f7a72);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.highlight h2, .highlight h3 { color: #fff; margin-bottom: 6px; }
.highlight p { color: #dbeceb; }
.highlight .eyebrow { color: #9fe3dd; }
/* Het blok compacter houden: de alinea's staan dicht op elkaar en de tekst is
   iets kleiner dan de lopende tekst elders. Het gaat om veel korte regels; met
   de normale maten werd het blok onnodig hoog. */
.highlight p { margin-bottom: 0.75rem; font-size: 0.9375rem; line-height: 1.6; }
/* De ondertitel moet zich nog wel onderscheiden van de lopende tekst, nu die
   binnen dit blok kleiner is gezet. */
.highlight .lead { margin-bottom: 1rem; font-size: 1.0625rem; color: #eaf5f3; }
/* De reeks vragen: korte regels onder elkaar, nét iets ruimer dan een gewone
   alinea zodat ze los van elkaar te lezen zijn. */
.highlight__vragen { line-height: 1.75; }
.highlight__facts {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  padding: 24px;
  display: grid;
  gap: 16px;
}
.highlight__fact { display: flex; gap: 12px; align-items: baseline; }
.highlight__fact strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}
.highlight__fact span { font-size: var(--fs-small); color: #cfe6e4; }

/* Foto-strip (gelijke tegels) */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo-strip .gallery__item { aspect-ratio: 1 / 1; }

/* Losse CTA-band */
.cta-band {
  background: var(--c-blush);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 3vw, 3rem);
  text-align: center;
}
.cta-band p { max-width: 560px; margin-inline: auto; color: var(--c-ink-soft); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }

/* =========================== 12. LIGHTBOX ============================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 40, 34, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lightbox__figure img {
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  margin-inline: auto;
}

.lightbox__btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================== 13. ANIMATIES ============================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================== 14. RESPONSIVE ============================ */
@media (max-width: 960px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { column-count: 2; }
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 420px; }
  .foto-raster { max-width: 460px; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media,
  .split--reverse .foto-raster { order: 0; }
  .highlight { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* ---- Fullscreen menu ---- */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 80;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--sp-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--c-cream);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--c-cream-dark);
  }
  .nav__panel-head img { height: 52px; width: auto; }

  .nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--c-teal-700);
    transition: background-color 0.2s var(--ease);
  }
  .nav__close:hover { background: rgba(36, 90, 97, 0.07); }

  .nav__list {
    flex-direction: column;
    gap: 0;
    font-size: 1.375rem;
    margin-top: 10px;
  }
  .nav__list a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--c-cream-dark);
    color: var(--c-teal-700);
  }
  .nav__list a::after { display: none; }
  .nav__list a[aria-current='page'] { color: var(--c-coral-600); }

  .nav .btn {
    margin-top: 28px;
    width: 100%;
    font-size: 1.0625rem;
    padding: 16px 28px;
  }

  .nav__contact {
    display: block;
    margin: auto 0 0;
    padding-top: 28px;
    font-size: var(--fs-small);
    color: var(--c-ink-mute);
  }
  .nav__contact a { color: var(--c-teal-700); font-weight: 600; }

  /* Pagina eronder mag niet meescrollen zolang het menu open staat */
  body.is-menu-open { overflow: hidden; }

  .hero { min-height: 560px; }
  .hero__inner { padding-block: 3.5rem; }

  /* --- Hartballon-hero op mobiel -------------------------------------
     Foto niet bijsnijden maar onderaan plakken op ware verhouding, met
     het kleurverloop erboven. Tekst staat dus op een rustige achtergrond en
     hart plus gezichten blijven volledig zichtbaar. Het verloop draait hier
     mee naar verticaal en de horizontale mask van de desktopweergave gaat uit.
     De ::after-gradient hoort bij de fotobox zelf, zodat de bovenrand van de
     foto op elk schermformaat even naadloos overloopt. */
  .hero--hart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Geen vaste hoogte meer: de hero is precies zo hoog als tekst + foto. */
    min-height: 0;
    /* Effen kleur, exact dezelfde als waar de ::after-blend mee begint. Een
       verloop hier zou op de bovenrand van de foto een zichtbare lijn geven,
       omdat de blend één vaste kleur is. */
    background: #16464b;
  }
  .hero--hart .hero__inner { order: 1; }
  .hero--hart .hero__media {
    order: 2;
    /* Uit de absolute positionering halen: de foto staat nu gewoon ónder de
       tekst in de flow. Daardoor kan hij nooit meer achter de knoppen
       schuiven, hoe kort het scherm ook is of hoe groot iemand zijn
       lettergrootte heeft staan. relative blijft nodig voor de blend. */
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero--hart .hero__media picture { height: auto; }
  .hero--hart .hero__media img {
    height: auto;
    object-fit: fill;
    object-position: center;
  }
  .hero--hart .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      #16464b 0%,
      rgba(22, 70, 75, 0.88) 14%,
      rgba(22, 70, 75, 0.42) 26%,
      rgba(22, 70, 75, 0) 40%);
  }
  .hero--hart .hero__overlay { display: none; }
  .hero--hart .hero__inner { padding-block: 2.75rem 1.75rem; }
}

@media (max-width: 720px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }

  /* Foto onder het citaat in plaats van ernaast. */
  .quote-row { flex-direction: column; }
  .quote-row__foto { width: 150px; }
  .pill-grid { grid-template-columns: 1fr; }
  .review-grid { column-count: 1; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { text-align: left; }

  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__btn { width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .hero__actions, .contact-card__actions, .cta-band__actions { flex-direction: column; }
  .stats { gap: 22px; }
}

/* Smalle telefoons: tekstblok wat compacter, zodat er boven de vouw meer van
   de foto meekomt. */
@media (max-width: 560px) {
  /* Bovenruimte gelijk aan die op tablet (44px): met 28px kwam het label te
     dicht onder de header te hangen. Onderaan blijft het compacter. */
  .hero--hart .hero__inner { padding-block: 2.75rem 1.5rem; }
  .hero--hart h1 { margin-bottom: 14px; }
  .hero--hart .hero__text {
    margin-bottom: 22px;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  /* 4px zette het label vrijwel tegen de titel aan. 20px geeft er lucht
     omheen en maakt het tekstblok iets hoger, waardoor er onder de knoppen
     ook meer van het groene vlak zichtbaar blijft. */
  .hero--hart .badge { margin-bottom: 20px; }
  .hero--hart .hero__actions { gap: 10px; }
}