/* ===========================================================================
   hsb-lezingdetail.css — de lezingpagina /lezingen/<slug>

   Hoort bij lezingen-detail.php. Hier stond een <style>-blok onderaan dat
   bestand; dat staat nu hier, zodat de browser het kan bewaren en je het op
   een plek aanpast in plaats van in PHP.

   De maten en kleuren komen van het bord "Lezing — detail" op het canvas.
   Dezelfde vormtaal als de themapagina en de landingspagina's:

     hoeken   48px 2px 48px 2px  de blauwe kop
              40px 2px 40px 2px  grote vlakken
              24px 2px 24px 2px  kaarten
              12px               knoppen
     vlakken  wit, met #f6f8fa als rustige band
   =========================================================================== */

.hsb-ld {
  --ld-blauw: #103856;
  --ld-blauw-diep: #0b2940;
  --ld-oranje: #c24d16;
  --ld-grijs: #5b6b7c;
  --ld-tekst: #1d2733;
  --ld-lijn: #e3e8ee;
  --ld-vlak: #f6f8fa;
  --ld-kaart: 24px 2px 24px 2px;
  --ld-groot: 40px 2px 40px 2px;
}

body { background: #fff; }

.hsb-ld { padding: 56px 0 0; }
.hsb-ld__kop { padding-top: 24px; }


/* --- De blauwe kop ---------------------------------------------------------- */
.hsb-ld__paneel {
  border-radius: 48px 2px 48px 2px;
  background: var(--ld-blauw);
  color: #fff;
  padding: 44px 48px 48px;
  overflow: hidden;
}

.hsb-ld__kruimels { margin-bottom: 20px; font-size: 13.5px; }
.hsb-ld__kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.hsb-ld__kruimels li { color: rgb(255 255 255 / .6); }
.hsb-ld__kruimels li + li::before { content: "›"; margin: 0 8px; color: rgb(255 255 255 / .4); }
.hsb-ld__kruimels a { color: rgb(255 255 255 / .8); text-decoration: none; }
.hsb-ld__kruimels a:hover { color: #fff; text-decoration: underline; }

.hsb-ld__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.hsb-ld__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgb(255 255 255 / .14);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.hsb-ld__titel {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 700;
  color: #fff;
  max-width: 17em;
}

.hsb-ld__lead {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgb(255 255 255 / .78);
  max-width: 40em;
}

.hsb-ld__door {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgb(255 255 255 / .72);
}


/* --- De tekst en het aanvraagblok -------------------------------------------- */
.hsb-ld__inhoud { background: #fff; }
.hsb-ld__andere { background: #fff; }

.hsb-ld__tweeluik {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

/* min-width: 0 op allebei de kolommen. Zonder dat laat een raster een kolom
   niet kleiner worden dan zijn langste woord, en loopt een lange titel of een
   URL in de tekst de pagina uit. */
.hsb-ld__verhaal { min-width: 0; }
.hsb-ld__zijkant { min-width: 0; }

.hsb-ld__kopje {
  margin: 0 0 18px;
  font-size: 27px;
  line-height: 1.2;
  color: var(--ld-blauw);
}

.hsb-ld__onderkop { margin: 0; font-size: 16px; color: var(--ld-grijs); }

.hsb-ld__tekst {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ld-tekst);
}
.hsb-ld__tekst p { margin: 0 0 18px; }
.hsb-ld__tekst p:last-child { margin-bottom: 0; }
.hsb-ld__tekst a { color: var(--ld-blauw); text-underline-offset: 3px; }

/* Het blok loopt mee bij het scrollen, zodat de knop altijd in beeld is.
   top: 100px houdt hem onder de vaste menubalk. */
.hsb-ld__aanvraag {
  position: sticky;
  top: 100px;
  border: 1px solid var(--ld-lijn);
  border-radius: var(--ld-groot);
  background: var(--ld-vlak);
  padding: 28px 28px 26px;
}

.hsb-ld__aanvraagkop {
  display: block;
  font-size: 19px;
  color: var(--ld-blauw);
  margin-bottom: 10px;
}
.hsb-ld__aanvraag p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ld-grijs);
}

.hsb-ld__gegevens { margin: 22px 0 0; font-size: 14.5px; }
.hsb-ld__gegevens > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-top: 1px solid var(--ld-lijn);
}
.hsb-ld__gegevens dt { color: var(--ld-grijs); font-weight: 400; }
.hsb-ld__gegevens dd { margin: 0; font-weight: 600; color: var(--ld-tekst); text-align: right; }


/* --- Knoppen ------------------------------------------------------------------ */
.hsb-ld__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .1s;
}
.hsb-ld__knop:active { transform: translateY(1px); }
.hsb-ld__knop svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-ld__knop:hover svg { transform: translateX(4px); }

.hsb-ld__aanvraag .hsb-ld__knop { width: 100%; }
.hsb-ld__aanvraag .hsb-ld__knop + .hsb-ld__knop { margin-top: 10px; }

.hsb-ld__knop--vol { background: var(--ld-oranje); color: #fff; border: 1px solid var(--ld-oranje); }
.hsb-ld__knop--vol:hover { background: #a63f0f; border-color: #a63f0f; color: #fff; }

.hsb-ld__knop--lijn { background: #fff; color: var(--ld-blauw); border: 1px solid var(--ld-lijn); }
.hsb-ld__knop--lijn:hover { background: #eef2f6; color: var(--ld-blauw); border-color: #c6d0da; }

.hsb-ld__knop--blauwlijn { border-color: var(--ld-blauw); }
.hsb-ld__knop--blauwlijn:hover { background: var(--ld-blauw); color: #fff; }

.hsb-ld__knop--oranje {
  height: 54px; padding: 0 28px; font-size: 16.5px;
  background: var(--ld-oranje); color: #fff; border: 1px solid var(--ld-oranje);
}
.hsb-ld__knop--oranje:hover { background: #a63f0f; border-color: #a63f0f; color: #fff; }

.hsb-ld__knop--wit {
  height: 54px; padding: 0 24px; font-size: 16px;
  background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .35);
}
.hsb-ld__knop--wit:hover { background: #fff; color: var(--ld-blauw); border-color: #fff; }


/* --- De spreker ---------------------------------------------------------------- */
.hsb-ld__sprekerblok {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--ld-lijn);
  border-radius: var(--ld-groot);
  background: var(--ld-vlak);
  padding: 26px 30px;
}

.hsb-ld__sprekerfoto {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: var(--ld-kaart);
  overflow: hidden;
  background: #dbe4ec;
}
.hsb-ld__sprekerfoto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

.hsb-ld__sprekertekst { flex: 1 1 340px; min-width: 0; }

.hsb-ld__labeltje {
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ld-grijs);
  margin-bottom: 6px;
}
.hsb-ld__sprekernaam { display: block; font-size: 23px; color: var(--ld-blauw); margin-bottom: 6px; }
.hsb-ld__sprekertekst p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ld-grijs); max-width: 44em; }


/* --- Andere lezingen ------------------------------------------------------------ */
.hsb-ld__kopregel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.hsb-ld__kopregel .hsb-ld__kopje { margin-bottom: 8px; }

.hsb-ld__pijlen { display: flex; gap: 10px; }
.hsb-ld__pijl {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ld-lijn);
  border-radius: 999px;
  background: #fff;
  color: var(--ld-blauw);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.hsb-ld__pijl:hover { background: var(--ld-vlak); border-color: #c6d0da; }
.hsb-ld__pijl.swiper-button-disabled { opacity: .4; cursor: default; }

.hsb-ld__kaart {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ld-lijn);
  border-radius: var(--ld-kaart);
  padding: 22px 24px;
  background: #fff;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, border-color .25s;
}
.hsb-ld__kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgb(16 56 86 / .10);
  border-color: #cfd6de;
}

.hsb-ld__kaartchip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: #fdeee4;
  color: #a0450f;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.hsb-ld__kaartkop { display: block; font-size: 18px; line-height: 1.3; color: var(--ld-blauw); margin-bottom: 9px; }
.hsb-ld__kaarttekst { display: block; font-size: 14.5px; line-height: 1.6; color: var(--ld-grijs); margin-bottom: 16px; }
.hsb-ld__kaartlink {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto;
  font-size: 14px; font-weight: 700; color: var(--ld-oranje);
}
.hsb-ld__kaartlink svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-ld__kaart:hover .hsb-ld__kaartlink svg { transform: translateX(4px); }

/* Swiper knipt standaard af op de rand van de container; de kaarten mogen bij
   het zweven een paar pixels omhoog zonder dat de schaduw wordt afgesneden. */
.lezingSwiper { overflow: hidden; padding: 6px 0 14px; margin: -6px 0 -14px; }
.lezingSwiper .swiper-slide { height: auto; }


/* --- De afsluiter ---------------------------------------------------------------- */
.hsb-ld__afsluiter { padding-bottom: 80px; }

.hsb-ld__band {
  border-radius: var(--ld-groot);
  background: var(--ld-blauw);
  color: #fff;
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.hsb-ld__band > div:first-child { flex: 1 1 520px; min-width: 0; }
.hsb-ld__band h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.2; color: #fff; }
.hsb-ld__band p { margin: 0; font-size: 16px; line-height: 1.7; color: rgb(255 255 255 / .75); max-width: 40em; }
/* flex: 0 0 auto hier liet de knoppen hun eigen breedte houden. Zodra ze op
   een smal scherm allebei de volle breedte pakken, telt die breedte op en
   loopt de band buiten het scherm -- je kon de pagina dan zijwaarts
   schuiven. Met 1 1 auto en min-width: 0 krimpt de groep mee. */
.hsb-ld__bandknoppen { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; }


/* --- Smallere schermen -------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hsb-ld__tweeluik { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}

@media (max-width: 991.98px) {
  .hsb-ld { padding-top: 44px; }
  .hsb-ld__paneel { border-radius: 32px 2px 32px 2px; padding: 32px 28px 36px; }
  .hsb-ld__titel { font-size: 30px; }
  .hsb-ld__lead { font-size: 16.5px; }
  .hsb-ld__tweeluik { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hsb-ld__aanvraag { position: static; }
  .hsb-ld__band { padding: 32px 28px; }
  .hsb-ld__band h2 { font-size: 23px; }
}

@media (max-width: 575.98px) {
  .hsb-ld { padding-top: 32px; }
  .hsb-ld__paneel { border-radius: 24px 2px 24px 2px; padding: 26px 20px 30px; }
  .hsb-ld__titel { font-size: 25px; }
  .hsb-ld__kopje { font-size: 22px; }
  .hsb-ld__sprekerblok { padding: 22px 20px; gap: 18px; }
  .hsb-ld__knop, .hsb-ld__knop--oranje, .hsb-ld__knop--wit { width: 100%; }
  .hsb-ld__bandknoppen { width: 100%; }
  .hsb-ld__afsluiter { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsb-ld__kaart, .hsb-ld__knop svg, .hsb-ld__kaartlink svg { transition: none; }
}