/* Weerwoord boekpagina - gedeelde stijl voor alle boekpagina's.
   Wordt NIET meer meegeplakt in de paginacontent (WordPress filtert <style> daar
   uit, ook voor een admin-account zonder unfiltered_html). In plaats daarvan
   plakt deze CSS één keer in een WPCode PHP-snippet, sitewide geladen via
   wp_head - zie wpcode-snippet.php. */

/* Enfold's eigen single-portfolio-template toont de uitgelichte afbeelding
   automatisch nog eens boven de content (herkenbaar aan wp-post-image, de
   standaard WP-klasse voor the_post_thumbnail()) - overbodig, de cover staat
   al in de echte inhoud via .ww-boek__cover. Verborgen, niet verwijderd: de
   uitgelichte afbeelding blijft nodig voor de kaart in de "Onze boeken"-
   gallerij. Bevestigd via outerHTML, niet gegokt (zie gotcha 7 in CLAUDE.md). */
.single-portfolio .wp-post-image {
  display: none;
}

.ww-boek {
  --ww-red: #B72D39;
  --ww-teal: #21434B;
  --ww-text: #222222;
  --ww-text-muted: #6b6b6b;
  --ww-bg-soft: #F4F1EC;
  --ww-border: #e2ddd3;

  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  font-family: "nunito-sans", Helvetica, Arial, sans-serif;
  color: var(--ww-text);
  box-sizing: border-box;
  position: relative;
}
.ww-boek *, .ww-boek *::before, .ww-boek *::after { box-sizing: inherit; }
/* Volle-paginabreedte achtergrond (#E8E8E8), onafhankelijk van hoe breed of
   welke kleur de omliggende Enfold-sectie toevallig heeft - dat bleek al 2x
   verkeerd te staan (rood i.p.v. grijs, en te smal: enkel achter dit vak i.p.v.
   de volle breedte). Klassieke "full-bleed binnen een constrained-width ouder"
   CSS-truc: dit pseudo-element breekt uit tot 100vw ongeacht de container. */
.ww-boek::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #E8E8E8;
  z-index: -1;
}
/* Defensief: de omliggende Enfold-pagina lekt eigenschappen door die niet
   vanzelf resetten (zagen we al met een sectie-achtergrondkleur die niet
   van deze CSS komt). text-indent/line-height erven standaard over - als
   een voorouder-element ergens een "verberg tekst"-truc (text-indent:
   -9999px) of een grote line-height voor knoppen zet, duikt die hier
   anders ongevraagd weer op. */
.ww-boek, .ww-boek * {
  text-indent: 0;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.ww-boek__media {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ww-boek__cover {
  width: 100%;
  max-width: 280px;
  height: auto;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}
.ww-boek__bestel {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  text-align: center;
  background: var(--ww-teal) !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.9rem;
  padding: 18px 20px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}
.ww-boek__bestel:hover,
.ww-boek__bestel:focus-visible {
  background: var(--ww-red) !important;
  color: #fff !important;
}

.ww-boek__content {
  flex: 1 1 420px;
  min-width: 280px;
}

/* Testimonials */
.ww-testimonials {
  background: var(--ww-bg-soft);
  border-radius: 4px;
  padding: 28px 32px;
  margin: 0 0 32px;
  position: relative;
}
/* Bewust geen horizontale slide-track meer (flex met alle quotes naast elkaar
   dwong de rij tot de hoogte van de langste quote, met lege ruimte bij kortere
   quotes tot gevolg). In plaats daarvan: enkel de actieve quote zit in de
   layout-flow (display:block), de rest is display:none - elke quote krijgt zo
   z'n eigen natuurlijke hoogte. JS zet dit via inline style (zie boek-script.js);
   de :first-child-regel hieronder is enkel een stille fallback zonder JS. */
.ww-testimonial {
  display: none;
  margin: 0;
  min-width: 0;
}
.ww-testimonial:first-child {
  display: block;
}
.ww-testimonial p {
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--ww-text);
}
.ww-testimonial p::before { content: "\201C"; }
.ww-testimonial p::after { content: "\201D"; }
.ww-testimonial cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ww-red);
}
.ww-testimonials__dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.ww-testimonials__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--ww-border);
  cursor: pointer;
}
.ww-testimonials__dots button[aria-current="true"] {
  background: var(--ww-red);
}

/* Title + flaptekst */
.ww-boek__title {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ww-teal) !important;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 20px;
  text-transform: none !important;
}
.ww-boek__flaptekst p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* Info fiche */
.ww-boek__info {
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--ww-border);
  border-bottom: 1px solid var(--ww-border);
}
.ww-boek__info h2,
.ww-boek__bio h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ww-teal) !important;
  font-size: 1.1rem;
  margin: 0 0 14px;
  text-transform: none !important;
}
.ww-boek__info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.ww-boek__info dt {
  color: var(--ww-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.ww-boek__info dd {
  margin: 0;
  font-size: 0.9rem;
}

/* Bio */
.ww-boek__bio-body {
  display: flex !important;
  gap: 20px;
  align-items: flex-start !important;
}
.ww-boek__auteursfoto-wrap {
  flex: 0 0 240px !important;
  width: 240px;
}
.ww-boek__auteursfoto {
  display: block !important;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  float: none !important;
}
.ww-boek__bio .ww-boek__auteursfoto-credit {
  color: var(--ww-text-muted);
  flex: none;
  font-size: 0.75rem;
  line-height: 1.3;
  margin: 6px 0 0;
  text-align: right;
}
.ww-boek__bio p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 720px) {
  .ww-boek { gap: 28px; }
  .ww-boek__media { flex-basis: 100%; }
  .ww-testimonials { padding: 22px 20px; }
  .ww-boek__bio-body { flex-direction: column; align-items: center; text-align: center; }
}

/* ==================== Mensen-pagina's (auteurs/vertalers) ==================== */
/* Zelfde opbouw/eigenaardigheden als .ww-boek hierboven (full-bleed achtergrond,
   text-indent/line-height-reset, !important op de bekende Enfold-botspunten) -
   zie de comments daar voor de reden, hier niet herhaald. */
.ww-persoon {
  --ww-red: #B72D39;
  --ww-teal: #21434B;
  --ww-text: #222222;
  --ww-text-muted: #6b6b6b;
  --ww-border: #e2ddd3;
  --ww-bg-soft: #F4F1EC;

  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0;
  font-family: "nunito-sans", Helvetica, Arial, sans-serif;
  color: var(--ww-text);
  box-sizing: border-box;
  position: relative;
}
.ww-persoon *, .ww-persoon *::before, .ww-persoon *::after { box-sizing: inherit; }
.ww-persoon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #E8E8E8;
  z-index: -1;
}
.ww-persoon, .ww-persoon * {
  text-indent: 0;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.ww-persoon__bio {
  display: flex !important;
  gap: 32px;
  align-items: flex-start !important;
}
.ww-persoon__foto-wrap {
  /* Groter dan .ww-boek__auteursfoto-wrap (240px) - daar is de foto een
     ondersteunend element in de bio-sectie van een boekpagina, hier is de
     persoon zelf het onderwerp van de hele pagina. */
  flex: 0 0 320px !important;
  width: 320px;
}
.ww-persoon__foto {
  display: block !important;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  float: none !important;
}
/* Alleen zichtbaar zolang er nog geen echte foto-URL is (template-preview) -
   het echte HTML-fragment krijgt altijd een echte <img>, geen div. */
.ww-persoon__foto--placeholder {
  aspect-ratio: 4 / 5;
  background: var(--ww-border);
}
.ww-persoon__foto-credit {
  font-size: 0.75rem;
  color: var(--ww-text-muted);
  margin: 6px 0 0;
  text-align: right;
}
.ww-persoon__bio-tekst {
  flex: 1 1 auto;
  min-width: 0;
}
.ww-persoon__naam {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ww-teal) !important;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 16px;
  text-transform: none !important;
}
.ww-persoon__bio-tekst p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
/* Eigen blok-wrapper om de knop: zonder wrapper hing de knop inline achter de
   laatste tekstregel van de bio (waargenomen bij Emilie Dewitte) - zelfde soort
   tegenmaatregel als .ww-boek__auteursfoto-wrap (gotcha 7 in CLAUDE.md). */
.ww-persoon__boeken-knop {
  margin-top: 28px;
}
/* Zelfde knopstijl als .ww-boek__bestel, maar niet full-width: dit staat onder
   de bio-tekst, niet onder een smalle mediakolom. */
.ww-persoon__boeken-link {
  display: inline-block;
  text-align: center;
  background: var(--ww-teal) !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.9rem;
  padding: 18px 28px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}
.ww-persoon__boeken-link:hover,
.ww-persoon__boeken-link:focus-visible {
  background: var(--ww-red) !important;
  color: #fff !important;
}

/* Herhaalbaar blok, 0/1/meerdere keer - zie het HTML-template. */
.ww-persoon__boeken {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ww-border);
}
.ww-persoon__boek {
  display: flex !important;
  gap: 24px;
  align-items: flex-start !important;
}
/* Cover + "Bestel hier" onder elkaar, zoals .ww-boek__media op een boekpagina.
   Kleiner (220px i.p.v. 280px): hier is het een secundair element binnen
   iemands personenpagina, maar het moet nog wel als volwaardige cover ogen,
   niet als een postzegel. */
.ww-persoon__boek-media {
  flex: 0 0 220px !important;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ww-persoon__boek-cover {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}
.ww-persoon__boek-bestel {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ww-teal) !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem;
  padding: 14px 16px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}
.ww-persoon__boek-bestel:hover,
.ww-persoon__boek-bestel:focus-visible {
  background: var(--ww-red) !important;
  color: #fff !important;
}
.ww-persoon__boek-tekst {
  flex: 1 1 auto;
  min-width: 0;
}
.ww-persoon__boek-tekst h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ww-teal) !important;
  font-size: 1.1rem;
  margin: 0 0 8px;
  text-transform: none !important;
}
.ww-persoon__boek-tekst p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
.ww-persoon__boek-tekst p:last-of-type {
  margin-bottom: 0;
}

/* Technische info per gekoppeld boek - zelfde "kadertje"-patroon als
   .ww-testimonials (zachte achtergrondkleur + afgeronde hoeken, geen randlijn),
   niet de losse boven-lijn van .ww-boek__info: hier zit het al in een kleinere
   boekkaart, een aparte achtergrond laat het duidelijker los van de flaptekst
   ogen dan een lijntje (Rik, 2026-09-21: "in een kadertje stoppen"). */
.ww-persoon__boek-info {
  background: var(--ww-bg-soft);
  border-radius: 4px;
  padding: 16px 20px;
  margin-top: 16px;
}
.ww-persoon__boek-info h3 {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--ww-teal) !important;
  font-size: 0.85rem;
  margin: 0 0 8px;
  text-transform: none !important;
}
.ww-persoon__boek-info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
}
.ww-persoon__boek-info dt {
  color: var(--ww-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.ww-persoon__boek-info dd {
  margin: 0;
  font-size: 0.85rem;
}

/* !important waar de basisregel het ook heeft (align-items, flex): anders wint
   die basisregel alsnog en blijft de mobiele bedoeling (gecentreerd, en de
   flex-basis niet als hoogte in een kolom) een dode regel. */
@media (max-width: 720px) {
  .ww-persoon__bio { flex-direction: column; align-items: center !important; text-align: center; }
  .ww-persoon__foto-wrap { flex: 0 0 auto !important; width: min(320px, 70vw); }
  .ww-persoon__boek { flex-direction: column; align-items: center !important; text-align: center; }
  .ww-persoon__boek-media { flex: 0 0 auto !important; }
  .ww-persoon__boek-info dl { grid-template-columns: max-content 1fr; justify-content: center; text-align: left; }
}