/* metgezel.css: dageraad-huisstijl voor metgezel-pagina's (zie metgezel.js).
   Veralgemeniseerd uit de eerste metgezel (Dit is ons land #2): kleuren uit
   het dageraad-palet in lib/pw.js, Georgia voor lopende tekst. Vijf sectie-
   typen: foto en foto-widget zijn echt fullbleed (randloos), foto-tekst,
   typo en widget houden de 680px-tekstkolom. */

:root {
  --papier: #efe8da;
  --papier-licht: #f4ecdd;
  --inkt: #42392f;
  --inkt-zacht: #5c5346;
  --duin: #a89a84;
  --zand: #d9c9a3;
  --zand-rand: #8a7c62;
  --land: #e6ddc8;
  --accent: #b56a5e;
  --groen-diep: #6f7f60;
}

* { box-sizing: border-box; }

/* Proximity-snap: handmatig scrollen komt vanzelf netjes op een sectie uit,
   maar vecht niet met het programmatische scrollen van de audio. */
html { scroll-behavior: auto; scroll-snap-type: y proximity; }

body {
  margin: 0;
  /* Geen horizontale body-padding: fullbleed-secties lopen tot de rand.
     Tekstkolommen regelen hun eigen padding via .kolom. */
  padding: 0 0 140px;
  background: var(--papier);
  color: var(--inkt);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
  /* Niets mag ooit horizontaal scrollen. */
  overflow-x: clip;
}

a { color: var(--inkt-zacht); text-decoration: underline; text-decoration-color: var(--duin); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* De tekstkolom: alles wat niet fullbleed is, leeft hierin. */
.kolom { max-width: 680px; margin-inline: auto; width: 100%; padding-inline: 20px; }

/* ---------- kop ---------- */
.kop { margin: 56px auto 40px; }
.kop-kicker {
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--duin);
}
.kop h1 { font-size: 54px; line-height: 1.05; margin: 10px 0 12px; font-weight: normal; letter-spacing: -.01em; }
.kop-sub { font-size: 19px; line-height: 1.55; color: var(--inkt-zacht); margin: 0 0 22px; }
.kop-noot {
  border: 1px solid var(--zand); border-radius: 14px; background: var(--papier-licht);
  padding: 14px 18px; font-size: 14.5px; color: var(--inkt-zacht);
}
.kop-noot p { margin: 6px 0; }

/* ---------- inhoudsopgave ---------- */
.toc { margin: 0 auto 56px; }
.toc-binnen { max-width: 680px; margin-inline: auto; padding-inline: 20px; }
.toc h2 {
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--duin); margin: 0 0 10px 2px; font-weight: 600;
}
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.toc li { break-inside: avoid; }
.toc button {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: Georgia, serif; font-size: 15px; color: var(--inkt); border-radius: 6px;
}
.toc button:hover { color: var(--accent); }
.toc button .t {
  font-family: system-ui, sans-serif; font-size: 11px; color: var(--duin);
  font-variant-numeric: tabular-nums; min-width: 38px;
}
.toc li.actief button { color: var(--accent); }
.toc-hint { font-family: system-ui, sans-serif; font-size: 12px; color: var(--duin); margin: 10px 2px 0; }

/* widget-stappen in de inhoudsopgave: visueel ondergeschikt aan de vertelling,
   ingesprongen, kleiner, met een stil bolletje als markering. */
.toc li.unit button { font-size: 13px; color: var(--inkt-zacht); padding-left: 16px; gap: 8px; }
.toc li.unit button::before { content: '·'; color: var(--duin); flex: 0 0 auto; }
.toc li.unit button .t { min-width: 34px; font-size: 10px; }
.toc li.unit.actief button { color: var(--accent); }

/* ---------- secties: één verhaalonderdeel per scherm ---------- */
.sectie {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 0;
  scroll-snap-align: start;
  transition: opacity .55s ease;
}
.sectie > .kolom { padding-top: 34px; padding-bottom: 130px; }

/* Tijdens het afspelen ligt de focus op de actieve sectie; de rest dimt.
   Hover haalt een sectie terug (lezen mag altijd), pauze ook. */
body.speelt .sectie:not(.actief) { opacity: .38; }
body.speelt .sectie:not(.actief):hover { opacity: 1; }

.sectie-kicker {
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--duin); font-variant-numeric: tabular-nums;
}
.sectie h2 { font-size: 29px; font-weight: normal; line-height: 1.2; margin: 6px 0 14px; }
.sectie p { font-size: 17px; margin: 0 0 14px; max-width: 620px; }
.sectie.actief .sectie-kicker { color: var(--accent); }

/* Fullbleed-beeld voor 'foto' en 'foto-widget': de sectie is het kader. */
.s-foto, .s-foto-widget { position: relative; overflow: hidden; }
.vollemaat {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---------- overlay op fullbleed beeld ('foto', en cinematisch ook
   'foto-tekst' en de kop): gradient-scrim onderaan voor leesbaarheid. ---- */
.foto-overlay {
  position: relative; z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: 120px 20px 150px;
  background: linear-gradient(to top, rgba(38, 30, 22, .62), rgba(38, 30, 22, 0));
  color: #f7f1e3;
  text-shadow: 0 1px 10px rgba(38, 30, 22, .45);
}
.foto-overlay > * { max-width: 680px; margin-inline: auto; }
.foto-overlay .sectie-kicker { color: rgba(247, 241, 227, .8); margin-bottom: 0; }
.sectie.actief .foto-overlay .sectie-kicker { color: #eab9ae; }
.foto-overlay h2 { margin: 8px auto 10px; font-size: 34px; }
/* margin-inline expliciet: de generieke .sectie p-marge wint anders op
   specificiteit van .foto-overlay > * en trekt de tekst uit het midden. */
.foto-overlay p { font-size: 19px; line-height: 1.5; margin: 0 auto; }
.foto-overlay p + p { margin-top: 10px; }

/* Tint 'donker': donkere tekst op licht beeld, met een lichte scrim. */
.sectie.tint-donker .foto-overlay {
  background: linear-gradient(to top, rgba(244, 236, 221, .85), rgba(244, 236, 221, 0));
  color: var(--inkt);
  text-shadow: 0 1px 8px rgba(244, 236, 221, .6);
}
.sectie.tint-donker .foto-overlay .sectie-kicker { color: var(--inkt-zacht); }
.sectie.tint-donker.actief .foto-overlay .sectie-kicker { color: var(--accent); }

/* ---------- type 'foto-tekst': foto in de vertelling ---------- */
.sectie-foto { margin: 22px 0 18px; }
.sectie-foto img.figuur {
  display: block; width: 100%; height: auto; max-height: 56svh;
  object-fit: cover; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(66, 57, 47, .16);
}

/* ---------- type 'typo': alleen een groot citaat ---------- */
.s-typo .typo-citaat {
  margin: 22px 0 14px; padding: 0;
  font-size: clamp(28px, 5.2vw, 44px); line-height: 1.28;
  font-style: italic; letter-spacing: -.005em;
}
.s-typo .typo-citaat::before { content: '‘'; color: var(--duin); }
.s-typo .typo-citaat::after { content: '’'; color: var(--duin); }
.s-typo .typo-bron {
  font-family: system-ui, sans-serif; font-size: 13px; color: var(--inkt-zacht);
}
.s-typo .typo-bron::before { content: '· '; color: var(--duin); }

/* ---------- type 'widget': schermvullende unit-sectie ---------- */
.sectie.unit h2 { font-size: 22px; margin: 6px 0 4px; }
.sectie.unit .unit-context { font-size: 15px; color: var(--inkt-zacht); margin: 0; max-width: 620px; }
.widget-host { margin: 18px auto 6px; width: 100%; }

/* ---------- type 'foto-widget': paneel op een gedimde fullbleed foto ----
   Dimmen en blurren zit op een sluier-laag óver de foto, niet als filter op
   de foto zelf: blur() op de img faalt in software-gerenderde omgevingen
   (headless/preview) en liet daar de hele foto wegvallen. De rgba-sluier
   dimt altijd; backdrop-filter blurt waar het kan (progressieve verrijking,
   valt stil terug op alleen dimmen). */
.s-foto-widget::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: rgba(38, 30, 22, .30);
  -webkit-backdrop-filter: blur(2.5px) saturate(.92);
  backdrop-filter: blur(2.5px) saturate(.92);
}
.s-foto-widget .paneel {
  position: relative; z-index: 1;
  width: min(720px, calc(100% - 32px));
  margin: 90px auto 150px;
  background: rgba(244, 236, 221, .94);
  border: 1px solid var(--zand);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(38, 30, 22, .35);
}
.s-foto-widget .paneel .widget-host { margin-bottom: 0; }

/* ---------- glaspaneel: één matglazen laag over het beeld ----------
   De widget bezit zijn eigen kop, dus geen tweede titel. Het binnenste
   paneel van de widget wordt neutraal gemaakt zodat er precies één
   glasoppervlak overblijft (cleaner en moderner). */
.s-foto-widget .paneel.glas {
  background: rgba(246, 239, 225, .44);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 12px 48px rgba(38, 30, 22, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  padding: 28px;
}
/* het eigen paneel van de widget verdwijnt in het glas */
.paneel.glas [class*="paneel"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.paneel.glas [class*="paneel"]::after { display: none !important; }
/* binnenkaarten iets transparanter zodat ze op glas rusten i.p.v. blokken */
.paneel.glas [class*="-kaart"] {
  background: rgba(244, 236, 221, .5) !important;
  border-color: rgba(138, 124, 98, .28) !important;
}
@media (max-width: 640px) {
  .s-foto-widget .paneel.glas { padding: 18px; }
}

/* ---------- kolofon ---------- */
.kolofon { margin: 40px auto 0; padding-top: 34px; border-top: 2px solid var(--zand-rand); }
.kolofon h2 { font-size: 22px; font-weight: normal; margin: 0 0 14px; }
.kolofon p { font-size: 14.5px; color: var(--inkt-zacht); margin: 0 0 12px; }

/* ---------- vaste speler onderin ---------- */
.speler {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 30;
  width: min(760px, calc(100vw - 28px));
  background: var(--papier-licht); border: 1px solid var(--zand); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(66, 57, 47, .28);
  padding: 10px 14px; display: flex; align-items: center; gap: 14px;
}
.speler audio { flex: 1; min-width: 0; height: 40px; }
.speler-info {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end;
  font-family: system-ui, sans-serif; max-width: 42%;
}
.speler-klok { font-size: 12px; color: var(--duin); font-variant-numeric: tabular-nums; }
.speler-titel {
  font-size: 12.5px; color: var(--inkt); text-align: right; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

@media (max-width: 640px) {
  .kop { margin-top: 36px; }
  .kop h1 { font-size: 40px; }
  .toc ol { columns: 1; }
  .s-foto h2 { font-size: 28px; }
  .s-foto .foto-overlay { padding-bottom: 180px; }
  .s-foto-widget .paneel { width: calc(100% - 20px); padding: 16px 14px 12px; margin-bottom: 180px; }
  .speler { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .speler audio { flex-basis: 100%; }
  .speler-info { flex-direction: row; gap: 10px; align-items: baseline; max-width: 100%; }
  body { padding-bottom: 170px; }
}

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

/* ======================================================================
   Stijl 'cinematisch': alles fullscreen, tekst als overlay op het beeld.
   De redactionele stijl hierboven blijft de default; alles hieronder is
   scoped op body.stijl-cinematisch.
   ====================================================================== */

/* ---------- kop: fullscreen, titel groot over de kop-foto ---------- */
.stijl-cinematisch .kop-cine {
  position: relative; overflow: hidden;
  min-height: 100svh;
  margin: 0; max-width: none;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.stijl-cinematisch .kop-cine .kop-overlay {
  position: relative; z-index: 1;
  margin-top: auto; width: 100%;
  padding: 140px 24px 64px;
  background: linear-gradient(to top, rgba(38, 30, 22, .72), rgba(38, 30, 22, 0));
  color: #f7f1e3;
  text-shadow: 0 1px 12px rgba(38, 30, 22, .5);
}
.stijl-cinematisch .kop-cine .kop-overlay > * { max-width: 880px; margin-inline: auto; }
.stijl-cinematisch .kop-cine .kop-kicker { color: rgba(247, 241, 227, .85); }
.stijl-cinematisch .kop-cine h1 {
  font-size: clamp(52px, 8.5vw, 108px);
  line-height: 1.02; margin: 12px auto 14px; color: #fdf8ec;
}
.stijl-cinematisch .kop-cine .kop-sub {
  color: rgba(247, 241, 227, .94);
  font-size: clamp(18px, 2.2vw, 22px); margin-bottom: 26px;
}
.stijl-cinematisch .kop-cine .kop-noot {
  background: rgba(38, 30, 22, .34);
  border-color: rgba(244, 236, 221, .3);
  color: rgba(247, 241, 227, .92);
  text-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- inhoudsopgave: lichte, half-transparante band ---------- */
.stijl-cinematisch .toc {
  max-width: none; margin: 0;
  padding: 48px 0 54px;
  background: rgba(244, 236, 221, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.stijl-cinematisch .toc-binnen { max-width: 880px; }

/* ---------- alle secties: volwaardig fullscreen, randloos ---------- */
.stijl-cinematisch .sectie { position: relative; overflow: hidden; }

/* foto en foto-tekst: beeldvullend beeld, grote overlay-typografie.
   De kolom wordt met padding gecentreerd (in plaats van per kind met
   margin auto), zodat kop en tekst dezelfde linkerkant delen. */
.stijl-cinematisch .foto-overlay {
  padding: 140px max(24px, calc((100% - 880px) / 2)) 160px;
}
.stijl-cinematisch .foto-overlay > * { max-width: none; margin-inline: 0; }
.stijl-cinematisch .foto-overlay h2 {
  font-size: clamp(38px, 5.6vw, 68px); line-height: 1.06; margin: 10px 0 16px;
}
.stijl-cinematisch .foto-overlay p {
  font-size: clamp(19px, 2.3vw, 25px); line-height: 1.5; max-width: 760px; margin-inline: 0;
}

/* typo: het citaat schermgroot gecentreerd, als filmische titelkaart */
.stijl-cinematisch .s-typo {
  justify-content: center; align-items: center; text-align: center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 252, 244, .55), rgba(255, 252, 244, 0) 60%),
    linear-gradient(180deg, var(--land), var(--papier));
}
.stijl-cinematisch .s-typo > .kolom { max-width: 1080px; }
.stijl-cinematisch .s-typo .typo-citaat {
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: 1.16; margin: 26px 0 20px;
}
.stijl-cinematisch .s-typo .typo-bron { font-size: 14px; }

/* widget zonder foto: het paneel zweeft op een verzadigd rustig vlak */
.stijl-cinematisch .s-widget {
  background: linear-gradient(180deg, #b7a68b, #a08f74);
}
.stijl-cinematisch .s-widget > .kolom {
  max-width: 720px;
  background: rgba(244, 236, 221, .95);
  border: 1px solid var(--zand);
  border-radius: 20px;
  padding: 26px 26px 22px;
  margin: 90px auto 150px;
  box-shadow: 0 18px 50px rgba(38, 30, 22, .35);
}

/* foto-widget: beeldvullend beeld met het zwevende paneel (basis-stijl
   hierboven); alleen wat meer lucht rond het paneel. */
.stijl-cinematisch .s-foto-widget .paneel { margin: 110px auto 160px; }

/* ---------- speler: half-transparant met blur, breekt het beeld niet -- */
.stijl-cinematisch .speler {
  background: rgba(244, 236, 221, .72);
  border-color: rgba(217, 201, 163, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(38, 30, 22, .22);
}

@media (max-width: 640px) {
  .stijl-cinematisch .kop-cine .kop-overlay { padding-bottom: 44px; }
  .stijl-cinematisch .foto-overlay { padding-bottom: 190px; }
  .stijl-cinematisch .s-widget > .kolom { max-width: none; margin: 70px 10px 180px; padding: 16px 14px 12px; }
}