/* ═══════════════════════════════════════════════
   Ubuntu Society — Global Stylesheet
   Fonts: Lora (headings) + Ubuntu (body/ui)
   ═══════════════════════════════════════════════ */

/* ─── Preview password gate ─── */
#pw-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: #FAF8F5;
  display: flex; align-items: center; justify-content: center;
}
#pw-box {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid #E8E0D8; border-radius: 8px;
  padding: 2.5rem 2rem; width: 100%; max-width: 360px;
  box-shadow: 0 4px 24px rgba(28,16,8,.08);
  text-align: center;
}
#pw-form { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
#pw-input {
  font-family: Ubuntu, sans-serif; font-size: .95rem;
  padding: .65rem .9rem; border: 1px solid #E8E0D8; border-radius: 4px;
  outline: none; width: 100%;
}
#pw-input:focus { border-color: #E87722; }
#pw-form button {
  font-family: Ubuntu, sans-serif; font-size: .95rem; font-weight: 500;
  padding: .65rem 1.25rem; background: #E87722; color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
}
#pw-form button:hover { background: #c9661a; }

/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Kleurrichting C — "Groenveld" ──
     Diep groen veld met oatmeal kaarten. Origineel:
     "Kleurrichtingen voor Annette.html" (optie C). */

  /* Goud-accent: knoppen, iconen, badges, nav-accent */
  --orange:       #C07A12;
  --orange-light: #EFE1BE;   /* icoon-achtergrond / is-next-vlak */
  --orange-deep:  #9A5E0C;   /* actief / ingedrukt */

  /* Oatmeal-gronden */
  --cream:        #F3EAD3;   /* pagina / kaarten / nav */
  --sand:         #EADFBF;   /* ALLEEN lichte hover-tint */
  --border:       #E4D8B8;

  /* Inkt op licht */
  --dark:         #23180A;   /* tekst / koppen */
  --mid:          #4A3B24;   /* bodytekst */
  --muted:        #8A7A5E;   /* tertiair / kleine labels */
  --white:        #FFFFFF;

  /* Groene gronden (diepe velden) */
  --field:        #05543A;   /* sectieveld: hero, filosofie */
  --panel:        #064A33;   /* donker paneel: citaat, .bg-dark */
  --footer-bg:    #04331F;   /* footer */

  /* Accent-kleuren (constanten) */
  --label:        #0B6B47;   /* groen accent op lichte grond */
  --em:           #FFB81C;   /* geel accent op groene grond */
  --accent-tint:  #E6D4A9;   /* is-next hover op licht */
  --accent-glow:  rgba(192,122,18,0.16);  /* kaart-hover gloed (goud) */

  /* Inkt op groen (constanten) */
  --on-green:      #F6EFD8;
  --on-green-sub:  rgba(246,239,216,0.80);
  --on-green-mute: rgba(246,239,216,0.60);
  --on-green-rule: rgba(246,239,216,0.22);

  /* ═══ ROL-TOKENS — surface-gebonden ═══
     Dit is de kern van het kleursysteem. Elke sectie kiest een "surface"
     (.surface-green / -panel / -deep, of standaard oatmeal); die surface
     herdefinieert deze rollen. ALLE tekst en randen gebruiken de rollen,
     nooit de losse palet-kleuren. Kaarten zijn zelf een oatmeal-surface,
     dus hun inkt blijft donker — ook boven op een groen veld. Goud
     (--orange) is merk-accent en verandert NIET per surface.
     Standaardwaarden hieronder = lichte (oatmeal) surface. */
  --fg:      var(--dark);    /* koppen / primaire tekst */
  --fg-soft: var(--mid);     /* bodytekst */
  --fg-mute: var(--muted);   /* tertiair / meta / kleine labels */
  --accent:  var(--label);   /* eyebrows + accentlijnen (groen op licht) */
  --link:    var(--label);   /* tekstlinks */
  --rule:    var(--border);  /* hairlines op de huidige surface */

  /* Artikel-accenten (column/blog-body — altijd op lichte leesgrond) */
  --color-forest:  var(--label);  /* koppen / kapitaal / strong — groen */
  --color-gold:    var(--orange); /* breadcrumb + citaatrand — goud */

  --serif:  'Lora', Georgia, serif;
  --sans:   'Ubuntu', system-ui, sans-serif;

  --max:    1120px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Browser-surfaces uit het palet (selectie / focus-ring) — anders erven ze
   de grijze browserdefaults die bij geen enkel ontwerp horen. */
::selection { background: var(--em); color: var(--dark); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
.surface-green :focus-visible,
.surface-panel :focus-visible,
.surface-deep :focus-visible,
.credibility :focus-visible,
footer :focus-visible { outline-color: var(--em); }

.container {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─── Typography helpers ─── */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* Tag-labels in de "Praktische informatie"-sidebar op de leergang- en
   studiereis-pagina's. Eén bron voor alle vier de pagina's: pas de kleur
   hier aan en alle tags veranderen mee. */
.info-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--label);
  margin-bottom: 0.2rem;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.section-sub {
  font-size: 1rem;
  color: var(--fg-mute);
}

/* ─── Buttons ─── */
.btn-primary {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); background: var(--orange-deep); }

.btn-ghost {
  display: inline-block;
  color: var(--fg-soft);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.8rem 1.8rem;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--fg-soft); color: var(--fg); }

.text-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s;
}
.text-link:hover { text-decoration: underline; gap: 0.6rem; }

/* ─── Nav ─── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Het woordmerk "Ubuntu Society" zit onderin de logo-tekening (de tekst
   nestelt naast het icoon-symbool). Zou het hele logo simpel gecentreerd
   staan, dan valt het woordmerk lager dan de menu-items. We tillen het logo
   iets op en laten het menu iets zakken, zodat woordmerk en menu op één lijn
   liggen en het icoon volledig zichtbaar blijft. Zie ook .nav-links/.nav-cta.
   Alleen op desktop — op mobiel (<=680px) is het menu verborgen. */
.nav-logo-img {
  height: 60px;
  width: auto;
  display: block;
  transform: translateY(-9px);
}

.footer-logo-img {
  height: 120px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translateY(9px); /* op één lijn met het woordmerk — zie .nav-logo-img */
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-soft);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--orange); }

/* Dropdown */
.nav-links li { position: relative; }

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: default;
}
.dropdown-toggle::after {
  content: '▾';
  font-size: 0.65rem;
  color: var(--fg-mute);
  margin-top: 1px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0;
  padding-top: calc(0.5rem + 12px);
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 1001;
  list-style: none;
  margin: 0;
}
.nav-links li:hover .dropdown-menu { display: block; }

.dropdown-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  color: var(--fg-soft);
  transition: background 0.15s, color 0.15s;
}
.dropdown-menu a:hover {
  background: var(--sand);
  color: var(--orange);
}

.nav-cta {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  transform: translateY(9px); /* op één lijn met het woordmerk — zie .nav-logo-img */
}
.nav-cta:hover { background: var(--orange); color: var(--white); }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--cream);
  z-index: 99;
  overflow-y: auto;
  padding: 1.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--border);
}

.mobile-menu.is-open { display: block; }

.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.mobile-menu li a,
.mobile-menu li span {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.mobile-menu .sub-links { padding-left: 1rem; }
.mobile-menu .sub-links a {
  font-size: 0.95rem;
  color: var(--fg-soft);
  padding: 0.6rem 0;
}
.mobile-menu .mobile-cta {
  margin-top: 1.5rem;
}

/* ─── Hero ─── */
.hero {
  padding-top: clamp(4rem, 10vw, 7rem);
  padding-bottom: clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 1.25rem;
}

.hero-title em { font-style: italic; color: var(--accent); }

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--fg-soft);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-image { position: relative; }

/* Op tablet/smalle desktop de herofoto afkappen op 380px — vastgezet bij het
   verwijderen van het tweaks-paneel. Onder 680px verdwijnt .hero-image
   helemaal en toont .hero-photo-mobile de foto inline. */
@media (max-width: 900px) {
  .hero-image { max-width: 380px; }
}

.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%; /* anchor to top — keep her face in frame, crop from the bottom */
}

.hero-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--fg-mute);
  font-size: 0.85rem;
  font-style: italic;
  padding: 2rem;
  gap: 0.5rem;
}

.hero-quote-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--cream);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  max-width: 220px;
}

.hero-quote-badge blockquote {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--fg);
  line-height: 1.4;
  border: none;
  padding: 0;
  margin-bottom: 0.5rem;
}

.hero-quote-badge cite {
  font-size: 0.75rem;
  color: var(--fg-mute);
  font-style: normal;
  font-weight: 500;
}

/* Stats strip — removed from design system; keeping stub in case
   the section returns in the future. Old styles deleted. */
.__stats_removed {
  display: none;
}

/* ─── Dispatcher cards ─── */
.dispatcher {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--cream);
}

.dispatcher-header { margin-bottom: 3rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  background: var(--cream);
}

.card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 24px var(--accent-glow);
  transform: translateY(-2px);
}

.card-icon {
  width: 44px;
  height: 44px;
  background: var(--orange-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}
.card-icon svg { width: 22px; height: 22px; }

.card-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
}

.card-text {
  font-size: 0.9rem;
  color: var(--fg-soft);
  line-height: 1.7;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--link);
  margin-top: 0.25rem;
  transition: gap 0.2s;
}
.card:hover .card-link { gap: 0.7rem; }

/* ─── Philosophy strip ─── */
.philosophy {
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.philosophy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.philosophy-quote {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-style: italic;
  color: var(--fg);
  line-height: 1.25;
  position: relative;
  padding-left: 1.5rem;
  border: none;
}

.philosophy-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: var(--em);
  border-radius: 2px;
}

.philosophy-quote cite {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: normal;
  color: rgba(246,239,216,0.55);
  font-weight: 500;
  margin-top: 1rem;
  letter-spacing: 0.04em;
}

/* Filosofie staat op een groen veld: eyebrow + link geel, tekst licht. */
.philosophy-text .eyebrow { margin-bottom: 1rem; color: var(--accent); }
.philosophy-text .text-link { color: var(--accent); }

.philosophy-text p {
  font-size: 1rem;
  color: var(--fg-soft);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.philosophy-text p:last-of-type { margin-bottom: 1.5rem; }

/* ─── Upcoming modules ─── */
.upcoming {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: var(--cream);
}

.upcoming-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.upcoming-header { padding-top: 0.5rem; }
.upcoming-header p { font-size: 0.95rem; color: var(--fg-mute); line-height: 1.7; margin-top: 0.5rem; }
.upcoming-header .btn-primary { margin-top: 2rem; }

.module-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.module-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.module-item:last-child { border-bottom: none; }
.module-item:hover { background: var(--sand); }
.module-item:hover .module-chevron { transform: translateX(3px); color: var(--orange); }

.module-item.is-next {
  background: var(--orange-light);
  border-left: 3px solid var(--orange);
  padding-left: calc(1.5rem - 3px);
}
.module-item.is-next:hover { background: var(--accent-tint); }

.module-chevron {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-mute);
  transition: transform 0.16s, color 0.16s;
}

.module-date-block {
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.25rem;
  min-width: 52px;
}
.module-item.is-next .module-date-block { background: var(--orange); border-color: var(--orange); }

.module-day {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1;
  display: block;
}
.module-item.is-next .module-day { color: var(--white); }

.module-month {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  display: block;
  margin-top: 2px;
}
.module-item.is-next .module-month { color: rgba(255,255,255,0.8); }

.module-number {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.2rem;
}

.module-name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
}

.module-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-next { background: var(--orange); color: var(--white); }
.badge-open { background: var(--border); color: var(--fg-mute); }

.module-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  justify-content: flex-start;
}

.price-note { font-size: 0.82rem; color: var(--fg-mute); line-height: 1.5; }
.price-note strong { color: var(--fg); font-weight: 600; }

/* ─── Credibility / Citaat ─── */
.credibility {
  padding: clamp(3.5rem, 7vw, 5rem) 0;
}

.credibility-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.credibility-with-portrait {
  display: grid;
  /* Portret rechts, 190px breed — vastgezet bij het verwijderen van het tweaks-paneel. */
  grid-template-columns: minmax(0, 1fr) 190px;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: 0;
  align-items: start;
  text-align: left;
  max-width: 1100px;
  margin-inline: auto;
}
.credibility-with-portrait .credibility-text { display: contents; }
.credibility-with-portrait .credibility-label,
.credibility-with-portrait .testimonial-quote,
.credibility-with-portrait .testimonial-cite,
.credibility-with-portrait .credibility-divider,
.credibility-with-portrait .award-text { grid-column: 1; }
.credibility-with-portrait .credibility-portrait {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
.credibility-portrait {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--orange-light);
}
.credibility-portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.credibility-with-portrait .testimonial-quote {
  margin-inline: 0;
  max-width: none;
  margin-bottom: 1rem;
}
.credibility-with-portrait .testimonial-cite {
  margin-bottom: 1.5rem;
}
.credibility-with-portrait .credibility-divider {
  margin: 0 0 1.25rem 0;
}
@media (max-width: 720px) {
  .credibility-with-portrait {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* Photo moves to top, above all text */
  .credibility-with-portrait .credibility-portrait {
    grid-column: 1;
    grid-row: 1;
    max-width: 160px;
    margin-inline: auto;
    margin-bottom: 1.5rem;
  }
  .credibility-with-portrait .credibility-label { grid-row: 2; }
  .credibility-with-portrait .testimonial-quote { grid-row: 3; margin-inline: auto; }
  .credibility-with-portrait .testimonial-cite  { grid-row: 4; }
  .credibility-with-portrait .credibility-divider { grid-row: 5; margin-inline: auto; }
  .credibility-with-portrait .award-text         { grid-row: 6; }
}

.credibility-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.5rem;
  display: block;
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.4;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

.testimonial-cite {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.testimonial-cite-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline: auto;
}
.cite-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(0.15);
}

.credibility-divider {
  width: 48px;
  height: 2px;
  background: var(--em);
  margin: 2.5rem auto;
  border-radius: 2px;
}

.award-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}
.award-text strong { color: var(--accent); font-weight: 600; }

/* ─── Page hero (inner pages) ─── */
/* Grond + inkt komen van .surface-green (zie SURFACES onderaan). */
.page-hero {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.page-hero .container { max-width: 760px; }

.page-hero .eyebrow { margin-bottom: 0.75rem; }

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  margin-bottom: 1.25rem;
}

.page-hero p {
  font-size: 1.1rem;
  color: var(--fg-soft);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: 2rem;
}

/* ─── Gedeelde foto-hero (MOOC-patroon) ─────────────────────────────
   Eén bron van waarheid voor ALLE leergang-hero's: full-bleed foto,
   lichte gelijkmatige sluier, witte tekst links in de 760px-kolom,
   vaste hoogte zodat elke pagina dezelfde hero heeft. Een pagina zet
   enkel zijn eigen background-image (inline). MOOC is de norm. */
.page-hero.hero-cover {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  padding-block: 1.5rem;      /* laat min-height de hoogte bepalen, niet de basispadding */
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.page-hero.hero-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 14, 0.34);
  pointer-events: none;
}
.page-hero.hero-cover > .container { position: relative; z-index: 1; }
.page-hero.hero-cover .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.page-hero.hero-cover h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.page-hero.hero-cover p  { color: rgba(255,255,255,0.9); }
@media (max-width: 600px) {
  .page-hero.hero-cover { min-height: 380px; }
}

/* ─── Taalwissel (page-specific NL/EN toggle, o.a. MOOC) ───────────────
   Zweeft vast rechtsboven, net onder de sticky nav (via --nav-h), zodat
   hij bij het scrollen altijd zichtbaar blijft. Lichte, half-transparante
   pil die op rust gedempt is (niet afleidend) en bij hover oplicht; het
   actieve segment is groen zodat het op elke ondergrond leesbaar blijft.
   z-index onder de mobiele menu-overlay (99) en de nav (1000). */
.lang-switch {
  position: fixed;
  top: calc(var(--nav-h, 80px) + 0.7rem);
  right: 1.1rem;
  z-index: 90;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(11,107,71,0.18);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.lang-switch:hover,
.lang-switch:focus-within { opacity: 1; }
.lang-switch a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  /* Vaste donkere bodytekst-kleur (#23180A = --dark op :root). Niet via
     var(--fg): de pil zit in de .hero-cover-DOM waar de ink-tokens naar
     licht worden geremapt, en hij zweeft over zowel donkere als lichte
     secties — de lichte pil vraagt altijd om donkere tekst. */
  color: #23180A;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.lang-switch a.is-active {
  background: var(--label);
  color: #fff;
}
@media (max-width: 600px) {
  .lang-switch { right: 0.9rem; }
}

/* ─── Content sections (inner pages) ─── */
.content-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Groene/donkere content-secties: geef ze in de template de class
   .surface-green of .surface-panel (zie SURFACES onderaan). */

.content-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.bg-dark h2 { color: var(--white); }

.content-section p {
  font-size: 1rem;
  color: var(--fg-soft);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.bg-dark p { color: rgba(255,255,255,0.65); }

/* ─── Spreker offer list ─── */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.offer-item {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
}

.offer-item .offer-icon {
  width: 40px;
  height: 40px;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.offer-item .offer-icon svg { width: 20px; height: 20px; }

.offer-item h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 0.4rem;
}

.offer-item p {
  font-size: 0.875rem;
  color: var(--fg-mute);
  line-height: 1.6;
  margin: 0;
}

/* ─── Bio block ─── */
.bio-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  align-items: start;
}

.bio-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: var(--border);
  overflow: hidden;
}

.bio-photo img { width: 100%; height: 100%; object-fit: cover; }

.bio-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--fg-mute);
  font-size: 0.85rem;
  font-style: italic;
  padding: 2rem;
  gap: 0.5rem;
}

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

/* ═══════════════════════════════════════════════════════════════════
   SPREKER-PAGINA — cinematische hero, bio-feature en logobalk.
   De hero draait op de surface-green rol-tokens (goud accent, crème inkt);
   scrim-kleuren zijn rgba's van --field (#05543A) / --footer-bg (#04331F).
   ═══════════════════════════════════════════════════════════════════ */

/* Split-hero — groen tekstpaneel links, foto van Annette full-bleed rechts,
   zonder sluier zodat ze scherp in beeld springt. De tekst lijnt links uit
   met de site-kolom (nav/logo), voor rust en consistentie. */
.speaker-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(500px, 62vh, 600px);
  overflow: hidden;
}
.speaker-hero-panel {
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  /* Lijn de tekst uit met de inhoud eronder (containerrand + gutter). */
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: clamp(2rem, 4vw, 3.5rem);
}
.speaker-hero-content { max-width: 30rem; }
.speaker-hero-content .eyebrow { margin-bottom: 0.9rem; }
.speaker-hero-content h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 1.1rem;
}
.speaker-hero-content h1 em { font-style: italic; color: var(--accent); }
.speaker-hero-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  margin-bottom: 1.75rem;
}
.speaker-hero-photo { position: relative; overflow: hidden; }
.speaker-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 26%;
}
/* Naad: een zachte, warme schaduw vanaf het paneel het beeld in, zodat de
   twee helften samenhangen in plaats van botsen. */
.speaker-hero-seam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 28px 0 44px -26px rgba(4, 20, 12, 0.55);
}

/* Eén geënsceneerd moment: de paneeltekst rijst rustig op bij het laden. */
@media (prefers-reduced-motion: no-preference) {
  .speaker-hero-content > * { animation: sprHeroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .speaker-hero-content > *:nth-child(1) { animation-delay: 0.02s; }
  .speaker-hero-content > *:nth-child(2) { animation-delay: 0.10s; }
  .speaker-hero-content > *:nth-child(3) { animation-delay: 0.18s; }
  .speaker-hero-content > *:nth-child(4) { animation-delay: 0.26s; }
}
@keyframes sprHeroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Onder ~820px: stapelen — foto als band bovenaan, tekstpaneel eronder. */
@media (max-width: 820px) {
  .speaker-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .speaker-hero-photo {
    order: -1;
    height: clamp(280px, 56vw, 400px);
  }
  .speaker-hero-photo img { object-position: 50% 22%; }
  .speaker-hero-seam {
    box-shadow: inset 0 -28px 40px -24px rgba(4, 20, 12, 0.6);
  }
  .speaker-hero-panel {
    padding: clamp(2rem, 8vw, 3rem) var(--gutter);
  }
  .speaker-hero-content { max-width: none; }
}

/* Bio-feature — portret naast haar verhaal, op het groene veld. */
.speaker-bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.speaker-bio-media {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--orange-light);
  box-shadow: 0 24px 60px rgba(4,20,12,0.38), 0 8px 18px rgba(4,20,12,0.24);
}
.speaker-bio-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 24%;
}
.speaker-bio-text .eyebrow { margin-bottom: 0.75rem; }
.speaker-bio-text .section-title { margin-bottom: 1.25rem; }
.speaker-bio-text p { color: var(--fg-soft); line-height: 1.8; margin-bottom: 1rem; }
.speaker-bio-text p em { color: var(--accent); font-style: italic; }
.speaker-bio-text .text-link { margin-top: 0.5rem; }
@media (max-width: 720px) {
  .speaker-bio-grid { grid-template-columns: 1fr; gap: 2rem; }
  .speaker-bio-media { max-width: 300px; margin-inline: auto; }
}

/* Logobalk — rustig hairline-raster; logo's grijs en gedempt, vol bij hover. */
.logo-band-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.logo-band-head .eyebrow { margin-bottom: 0.6rem; }
.logo-band-head .section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }

/* Logobalk breder dan de leeskolom, zodat er meer per rij passen en de balk
   minder verticale ruimte inneemt. */
.logo-band .container { max-width: 1340px; }
.logo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Flex-wrap i.p.v. raster: geen kaders, en een niet-volle laatste rij
     centreert vanzelf i.p.v. links uit te lijnen. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.logo-cell {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}
.logo-cell img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.25s, filter 0.25s;
}
.logo-cell:hover img { filter: none; opacity: 1; }

/* Placeholder-tegel — verdwijnt zodra partnerLogos gevuld is. */
.logo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--fg-mute);
  opacity: 0.55;
}
.logo-ph svg { width: 26px; height: 26px; }
.logo-band-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--fg-mute);
}

/* ─── CTA strip ─── */
.cta-strip {
  background: var(--orange-light);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(192,122,18,0.2);
}

.cta-strip .container { text-align: center; }

.cta-strip h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 0.75rem;
}

.cta-strip p {
  font-size: 1rem;
  color: var(--fg-soft);
  margin-bottom: 2rem;
  max-width: 48ch;
  margin-inline: auto;
  line-height: 1.7;
}

.cta-strip .btn-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── Blockquote ─── */
blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 1.25rem;
  margin-left: 0;
  font-style: italic;
  color: var(--fg-soft);
}

/* ─── Footer ─── */
/* Grond + inkt komen van .surface-deep (zie SURFACES onderaan). */
footer {
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.footer-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.footer-logo-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
}

.footer-brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.7;
  max-width: 28ch;
}

.footer-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }

.footer-links .footer-meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
  margin-top: 0.5rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.2);
}

.footer-bottom a {
  color: rgba(255,255,255,0.2);
  transition: color 0.2s;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.45); }

/* ─── Responsive ─── */
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }

  .philosophy-inner { grid-template-columns: 1fr; gap: 2.5rem; }

  .upcoming-inner { grid-template-columns: 1fr; }

  .bio-block { grid-template-columns: 1fr; }
  .bio-photo { max-width: 240px; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { transform: none; } /* geen menu om mee uit te lijnen: logo gewoon centreren */

  .footer-top { grid-template-columns: 1fr; }

  .module-item { grid-template-columns: 52px 1fr; }
  .module-badge { display: none; }
}

/* De oude .opleidingen-hero (wedge) is vervangen door het gedeelde
   .page-hero.hero-cover patroon — zie de leergangen-index. */

/* ═══════════════════════════════════════════════
   BOEKEN — Cover-led product hero (BoekenC v2)
   ═══════════════════════════════════════════════ */
.boeken-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.boeken-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 100%;
  background: var(--panel);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0.55;
  pointer-events: none;
}
.boeken-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 460px;
}
.boeken-hero-text { align-self: center; }
.boeken-hero-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.boeken-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.boeken-hero h1 em { font-style: italic; color: var(--orange); }
.boeken-hero-rule {
  width: 40px;
  height: 2px;
  background: var(--orange);
  margin: 0 0 1.25rem;
  border-radius: 2px;
}
.boeken-hero-lead {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--fg-soft);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
.boeken-hero-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  font-family: var(--sans);
}
.boeken-hero-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.boeken-hero-meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.boeken-hero-meta-item strong {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
}
.boeken-hero-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 0;
}
.boeken-hero-cover {
  position: relative;
  width: min(92%, 420px);
  box-shadow: 0 18px 48px rgba(28,16,8,0.18), 0 6px 14px rgba(28,16,8,0.10);
  border-radius: 4px;
  overflow: hidden;
}
.boeken-hero-cover img { width: 100%; display: block; }
.boeken-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
@media (max-width: 720px) {
  .boeken-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .boeken-hero-stage { order: -1; padding: 0; }
  .boeken-hero-cover { width: min(90%, 340px); }
  .boeken-hero::before { display: none; }
}

/* ═══════════════════════════════════════════════
   OVER — Centered manifesto + diagonal band (OverB)
   ═══════════════════════════════════════════════ */
.over-hero {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
  text-align: center;
}
.over-hero-inner {
  max-width: 760px;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}
.over-hero-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.over-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.over-hero h1 em { font-style: italic; color: var(--orange); }
.over-hero-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  color: var(--fg);
  max-width: 30ch;
  margin: 0 auto;
  border: none;
  padding: 0;
  text-wrap: balance;
}
.over-hero-quote cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}
.over-hero-rule {
  width: 48px;
  height: 2px;
  background: var(--orange);
  margin: 1.5rem auto;
  border-radius: 2px;
}
.over-hero-lead {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--fg-soft);
  line-height: 1.75;
  margin: 0;
  text-wrap: pretty;
}
.over-hero-band {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.over-hero-band-inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}
.over-hero-band-stage {
  position: relative;
  height: clamp(180px, 26vw, 260px);
  border-radius: 4px;
  overflow: hidden;
  background: var(--dark);
}
.over-hero-band-stage img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 60%;
}
@media (max-width: 720px) {
  .over-hero-band-stage { height: 220px; }
}

/* ─── Contributor cards (MOOC docenten) ─── */
.contributor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.contributor-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
a.contributor-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
a.contributor-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.contributor-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.contributor-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.contributor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contributor-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.contributor-role {
  font-size: 0.75rem;
  color: var(--fg-mute);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .contributor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .contributor-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   DAG ACCORDION (studiereis programma)
   ═══════════════════════════════════════════════ */
.dag-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.dag-item {
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.dag-item:last-child { border-bottom: none; }

.dag-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
  user-select: none;
  /* Lands the title below the sticky nav when scrolled into view (nav height set in JS). */
  scroll-margin-top: calc(var(--nav-h, 88px) + 12px);
}
.dag-summary::-webkit-details-marker { display: none; }
.dag-summary:hover { background: var(--sand); }
/* Klikbaar-signalen op hover */
.dag-summary:hover .dag-title { color: var(--orange); }
.dag-summary:hover .dag-chevron { transform: translateX(3px); }
.dag-item[open] > .dag-summary { background: var(--orange-light); border-bottom: 1px solid rgba(192,122,18,0.2); box-shadow: inset 3px 0 0 var(--orange); }

/* Datumblok: standaard al gevuld goud, zodat het als klikbare knop leest.
   Open = iets dieper goud (actief). */
.dag-number {
  min-width: 52px;
  text-align: center;
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 6px;
  padding: 0.4rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.dag-item[open] .dag-number {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--white);
}

.dag-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  flex: 1;
  line-height: 1.3;
  transition: color 0.15s;
}

/* Chevron in goud, leest als een control; roteert bij open. */
.dag-chevron {
  font-size: 1.4rem;
  color: var(--orange);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.dag-item[open] .dag-chevron { transform: rotate(90deg); color: var(--orange-deep); }

.dag-content {
  padding: 1.75rem 1.5rem 2rem;
  border-top: none;
}

.dag-content p { color: var(--fg-soft); line-height: 1.8; margin-bottom: 1rem; }
.dag-content p:last-child { margin-bottom: 0; }

.dag-content h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  margin: 1.5rem 0 0.5rem;
}
.dag-content h4:first-child { margin-top: 0; }

.dag-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-left: 0;
}
.dag-content ul li {
  font-size: 0.9rem;
  color: var(--fg-soft);
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.7;
}
.dag-content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

.dag-content blockquote {
  border-left: 3px solid var(--orange);
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--fg-soft);
  background: var(--orange-light);
  border-radius: 0 4px 4px 0;
}
.dag-content blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--fg-mute);
  margin-top: 0.4rem;
}

/* Accordion content images always show FULL (never cropped). The Eleventy image
   plugin wraps every <img> in a <picture>, so standalone images are direct-child
   <picture> (or <img> when eleventy:ignore'd) — capped in size so one photo doesn't
   dominate the reading column, but shown whole. Gallery groups (.dag-images) below. */
.dag-content img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}
.dag-content > img,
.dag-content > picture {
  display: block;
  width: auto;
  max-width: min(440px, 100%);
  margin: 1rem 0;
}
.dag-content > picture > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive 16:9 video embed (YouTube/Vimeo iframes) — global, reusable. */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin: 1.25rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video FACADE — a poster + play button that loads the real iframe only on click.
   Keeps the thumbnail clean: no video title, no YouTube chrome, just the play button. */
.video-facade {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin: 1.25rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000 center / cover no-repeat;
  cursor: pointer;
}
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-facade-btn::before {
  content: '';
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: var(--orange, #C07A12);   /* brand gold play button */
  transition: background 0.2s, transform 0.2s;
}
.video-facade-btn::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video-facade:hover .video-facade-btn::before { background: #a5680f; transform: scale(1.06); }

/* Full-width variant (used for the MOOC trailer, which sits in its own wide column). */
.video-facade--full { max-width: 100%; }
/* Two videos side by side on wide screens, stacking on narrow. */
.dag-videos,
.video-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.dag-videos .video-embed,
.dag-videos .video-facade,
.video-row .video-embed,
.video-row .video-facade { margin: 0; }
.video-row figure { margin: 0; }
.video-row figcaption { font-size: 0.8rem; color: var(--fg-mute); margin-top: 0.4rem; }
.lit-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; }
.lit-list li { padding-left: 0; }
.lit-list li::before { display: none; }
.lit-list a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
.lit-list a:hover { border-bottom-color: currentColor; }
.lit-tag {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-mute); border: 1px solid var(--border); border-radius: 100px;
  padding: 0.05rem 0.45rem; margin-left: 0.4rem; white-space: nowrap;
}
.module-figure { margin: 0 0 1.5rem; max-width: 80%; }
@media (max-width: 640px) { .module-figure { max-width: 100%; } }
.module-figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.module-figure figcaption { font-size: 0.75rem; color: var(--fg-mute); margin-top: 0.5rem; }

/* Image groups: FULL photos (never cropped) in a wrapping row, capped in height
   so they stay modest. Pictures are the flex items (Eleventy wraps each <img>). */
.dag-images {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.dag-images picture { display: inline-block; line-height: 0; flex: 0 0 auto; }
.dag-images img {
  margin: 0;
  max-height: 220px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
@media (max-width: 600px) { .dag-images img { max-height: 160px; } }

/* Smaller variant — same flexible wrapping row, just a shorter cap so more
   photos sit next to each other on a wide page (and reflow when narrower). */
.dag-images.is-small img { max-height: 190px; }
@media (max-width: 600px) { .dag-images.is-small img { max-height: 150px; } }

/* ═══════════════════════════════════════════════
   PORTUGAL GALLERY
   ═══════════════════════════════════════════════ */
.portugal-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 240px 240px;
  gap: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
}
.portugal-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.portugal-gallery img:hover { transform: scale(1.02); }
.portugal-gallery .gallery-main {
  grid-column: 1 / 3;
  grid-row: 1;
}

@media (max-width: 720px) {
  .dag-images { grid-template-columns: 1fr; }
  .portugal-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .portugal-gallery .gallery-main { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .portugal-gallery { grid-template-columns: 1fr; }
  .portugal-gallery .gallery-main { grid-column: 1; }

}

/* ═══════════════════════════════════════════════
   MOBILE REDESIGN — opleidingen pages
   ═══════════════════════════════════════════════ */

/* Prevent horizontal overflow site-wide */
body { overflow-x: hidden; }

/* ─── Layout classes (replace inline grids) ─── */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.investering-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.begeleiding-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

/* ─── Agenda card title overflow fix ─── */
.agenda-card-title { min-width: 0; overflow-wrap: break-word; }

/* ─── Mobile key-facts bar (opleiding / studiereis) ─── */
.mobile-key-facts {
  display: none;
}

/* ─── Sticky bottom CTA (mobile) ─── */
.mobile-sticky-cta {
  display: none;
}

/* ─── Studiereis tab bar ─── */
.mob-tab-bar {
  display: none;
}

/* ─── Mobile-only hero photo (between text and buttons) ─── */
.hero-photo-mobile {
  display: none;
}

/* ─── Mobile accordion sections: always open on desktop ─── */
@media (min-width: 681px) {
  .mob-accordion > summary.dag-summary { display: none; }
  .mob-accordion > .dag-content { display: block; }
}

/* ─── All mobile overrides ─── */
@media (max-width: 680px) {

  /* Hero: collapse to single column */
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .hero-image {
    display: none; /* photo shown inline via .hero-photo-mobile instead */
  }
  .hero-photo-mobile {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
    aspect-ratio: 4 / 3;
  }
  .hero-photo-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%; /* anchor to top — keep her face in frame, crop from the bottom */
    display: block;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }

  /* Mobile accordions: start closed */
  .mob-accordion[open] > summary.dag-summary .dag-chevron {
    transform: rotate(90deg);
  }

  /* Layout grids: all collapse to 1 column */
  .page-with-sidebar,
  .investering-grid,
  .begeleiding-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Sidebar: hide on mobile (key-facts bar takes over) */
  .page-with-sidebar .mobile-hide-sidebar {
    display: none;
  }

  /* Mobile key-facts bar */
  .mobile-key-facts {
    display: flex;
    background: var(--field);
    border-bottom: 1px solid var(--border);
  }
  .mobile-key-facts a.mobile-key-facts {
    display: flex;
  }
  .mfk-item {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--border);
    text-decoration: none;
  }
  .mfk-item:last-child { border-right: none; }
  .mfk-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-mute);
    margin-bottom: 0.2rem;
  }
  .mfk-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.3;
  }
  .mfk-item.mfk-cta .mfk-value {
    color: var(--orange);
  }


  /* Compact contributor cards: 2-col grid, uniform card heights */
  .contributor-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .contributor-card {
    min-width: 0 !important;       /* allow cell to shrink to column width */
    overflow: hidden !important;
    padding: 0.6rem 0.75rem !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
  .contributor-card > div:last-child {
    min-width: 0;
    overflow: hidden;
  }
  .contributor-name,
  .contributor-role {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .contributor-photo {
    width: 36px !important;
    height: 36px !important;
  }
  .contributor-name {
    font-size: 0.8rem !important;
    margin-bottom: 0.1rem !important;
  }
  .contributor-role {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
  }

  /* Studiereis tab bar */
  .mob-tab-bar {
    display: flex;
    position: sticky;
    top: 81px; /* height of the fixed nav on mobile */
    z-index: 500;
    background: var(--panel);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mob-tab-bar::-webkit-scrollbar { display: none; }

  .mob-tab-btn {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: color 0.15s, border-color 0.15s;
  }
  .mob-tab-btn.is-active {
    color: #fff;
    border-bottom-color: var(--orange);
  }

  /* Tab panels: hide all, show active */
  .mob-tab-panel {
    display: none;
  }
  .mob-tab-panel.is-active {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SURFACES — het kleursysteem in één plek.

   Een "surface" is een grond met bijbehorende inkt. Elke sectie kiest er
   één; die surface herdefinieert de rol-tokens (--fg / --fg-soft / --fg-mute
   / --accent / --link / --rule). Omdat alle componenten die rollen gebruiken,
   klopt de tekstkleur automatisch — licht op groen, donker op oatmeal.

   Kaarten en andere lichte "eilanden" zijn zelf een oatmeal-surface: hun
   inkt blijft donker, ook wanneer ze op een groen veld liggen. Nieuwe kaart?
   Zet 'm in de .surface-oat-lijst (of geef 'm de class surface-oat) en klaar.

   Goud (--orange) is merk-accent (knoppen/iconen/badges) en verandert NIET
   per surface.
   ═══════════════════════════════════════════════════════════════════ */

/* Groen veld — hero's, filosofie, groene content-secties, mobiele feiten-balk */
.surface-green,
.hero, .philosophy,
.page-hero, .event-hero, .over-hero, .over-hero-band,
.boeken-hero, .blog-post-hero, .column-hero,
.mobile-key-facts,
.content-section.surface-green {
  --fg:      var(--on-green);
  --fg-soft: var(--on-green-sub);
  --fg-mute: var(--on-green-mute);
  --accent:  var(--em);
  --link:    var(--em);
  --rule:    var(--on-green-rule);
  background-color: var(--field);
  color: var(--fg-soft);
}

/* Donker groen paneel — citaat / .bg-dark */
.surface-panel,
.credibility,
.content-section.bg-dark {
  --fg:      var(--on-green);
  --fg-soft: var(--on-green-sub);
  --fg-mute: rgba(246,239,216,0.55);
  --accent:  var(--em);
  --link:    var(--em);
  --rule:    rgba(246,239,216,0.15);
  background-color: var(--panel);
  color: var(--fg-soft);
}

/* Diepe voet — footer */
.surface-deep,
footer {
  --fg:      var(--on-green);
  --fg-soft: var(--on-green-sub);
  --fg-mute: rgba(246,239,216,0.50);
  --accent:  var(--em);
  --link:    var(--em);
  --rule:    rgba(246,239,216,0.10);
  background-color: var(--footer-bg);
}

/* Oatmeal-eilanden — kaarten/pillen/badges die op een groen veld kunnen liggen.
   Herstellen alleen de inkt-rollen naar donker; hun eigen achtergrond (oatmeal,
   sand of orange-light) zetten de componenten zelf. */
.surface-oat,
.card, .offer-item, .contributor-card, .testimonial-card, .info-card,
.price-tag, .epos-pill, .dag-accordion, .dag-item, .module-list, .module-item,
.module-date-block, .nieuws-card, .agenda-item, .media-item, .module-card,
.hero-quote-badge,
[style*="orange-light"], [style*="background:var(--sand)"] {  /* inline chips/boxen die zichzelf oatmeal maken */
  --fg:      var(--dark);
  --fg-soft: var(--mid);
  --fg-mute: var(--muted);
  --accent:  var(--label);
  --link:    var(--label);
  --rule:    var(--border);
}
.surface-oat { background-color: var(--cream); color: var(--fg-soft); }

/* Tweekleurige koppen: cursieve woorden krijgen het accent (geel op groen). */
.hero-title em,
.page-hero h1 em, .event-hero h1 em,
.over-hero h1 em, .boeken-hero h1 em { color: var(--accent); }