/* ===========================================================================
   hsb-themapagina.css — de themapagina /sprekers/thema/<slug>

   Hoort bij themas-profiel.php. Hier stonden twee <style>-blokken in dat
   bestand: een bovenin en nog een halverwege, midden in de vragen-sectie.
   Die staan nu hier, zodat de browser ze kan bewaren en je ze op een plek
   aanpast in plaats van in PHP.

   De maten en kleuren komen uit het ontwerp op het canvas, bord
   "Themapagina AI & Data". Dezelfde vormtaal als de landingspagina's:

     hoeken   40px 2px 40px 2px  grote vlakken
              24px 2px 24px 2px  kaarten en beelden
              999px              knoppen en chips
     vlakken  wit, met #f6f8fa als rustige band ertussen

   De blauwe kop staat in hsb-paginahero.css en de sprekerskaart in
   hsb-sprekerkaart.css. Die kaart is gedeeld met /sprekers en de
   landingspagina's en wordt hier dus met rust gelaten: anders zou deze
   pagina juist uit de pas gaan lopen.
   =========================================================================== */

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

/* De pagina zelf is wit; de rust komt van de banden, niet van een grijze
   ondergrond. Stond op #fbfbfd met een eigen font-family erbij, waardoor
   deze pagina een andere letter had dan de rest van de site. */
body { background-color: #fff; }


/* --- Koppen ---------------------------------------------------------------- */
.hsb-tp { padding: 64px 0 0; }

.hsb-tp__kop {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
  color: var(--tp-blauw);
}

.hsb-tp__onderkop {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tp-grijs);
}

.hsb-tp__kopregel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
}

.hsb-tp__aantal { font-size: 14.5px; color: var(--tp-grijs); }


/* --- De sprekers ------------------------------------------------------------
   Het raster en de kaart zelf komen uit de gedeelde sprekerskaart; hier
   staat alleen de band eromheen en de knop eronder. */
.hsb-tp__sprekers { background: #fff; padding-top: 56px; }

.speaker-wrap { transition: opacity .35s ease, transform .35s ease; }
.speaker-hidden { display: none; }
.is-showing { opacity: 0; transform: translateY(12px); }
.is-visible { opacity: 1; transform: translateY(0); }

.hsb-tp__meerrij { display: flex; justify-content: center; margin-top: 12px; }

.hsb-tp__meer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--tp-blauw);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, transform .1s;
}
.hsb-tp__meer:hover { background: var(--tp-blauw-diep); color: #fff; }
.hsb-tp__meer:active { transform: translateY(1px); }
.hsb-tp__meer .icoon { transition: transform .25s ease; }
.hsb-tp__meer .icoon--om { transform: rotate(180deg); }


/* --- Trefwoorden ------------------------------------------------------------ */
.hsb-tp__trefwoorden { margin-top: 44px; }

.hsb-tp__labeltje {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tp-grijs);
}

.hsb-tp__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.hsb-tp__chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--tp-lijn);
  border-radius: 999px;
  background: #fff;
  color: var(--tp-tekst);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.hsb-tp__chip:hover { background: #eef2f6; border-color: #c6d0da; color: var(--tp-blauw); }


/* --- Expertise & Trends ------------------------------------------------------
   De carrousel blijft Swiper; alleen de kaart en de pijlen zijn anders. */
.hsb-tp__artikelen { background: var(--tp-vlak); padding: 64px 0 72px; margin-top: 56px; }
.hsb-tp__kopregel--artikelen { align-items: flex-end; margin-bottom: 28px; }

.hsb-tp__pijlen { display: flex; gap: 10px; }

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

.hsb-tp__artikel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--tp-lijn);
  border-radius: var(--tp-kaart);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, border-color .25s;
}
.hsb-tp__artikel:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16,56,86,.10);
  border-color: #cfd6de;
}

.hsb-tp__artikelbeeld { display: block; }
.hsb-tp__artikelbeeld img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hsb-tp__artikeltekst {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.hsb-tp__datum { font-size: 12.5px; color: var(--tp-grijs); margin-bottom: 8px; }

.hsb-tp__artikelkop { margin: 0 0 9px; font-size: 17px; line-height: 1.3; }
.hsb-tp__artikelkop a { color: var(--tp-blauw); text-decoration: none; }

.hsb-tp__artikelintro {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tp-grijs);
}

.hsb-tp__lees {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tp-blauw);
  text-decoration: none;
}
.hsb-tp__lees .icoon { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-tp__artikel:hover .hsb-tp__lees .icoon { transform: translateX(4px); }


/* --- De lange tekst met beeld ------------------------------------------------ */
.hsb-tp__uitleg { background: #fff; padding-top: 72px; }

.hsb-tp__tweeluik {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  align-items: flex-start;
}

.hsb-tp__verhaal { flex: 1 1 600px; min-width: 0; }
.hsb-tp__verhaal h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.18; color: var(--tp-blauw); }
.hsb-tp__verhaal h3 { margin: 26px 0 14px; font-size: 22px; line-height: 1.25; color: var(--tp-blauw); }
.hsb-tp__verhaal h4 { margin: 22px 0 12px; font-size: 18px; color: var(--tp-blauw); }
.hsb-tp__verhaal p  { margin: 0 0 18px; font-size: 16.5px; line-height: 1.78; color: var(--tp-tekst); }
.hsb-tp__verhaal p:last-child { margin-bottom: 0; }
.hsb-tp__verhaal ul,
.hsb-tp__verhaal ol { margin: 0 0 18px; padding-left: 1.2em; font-size: 16.5px; line-height: 1.78; color: var(--tp-tekst); }
.hsb-tp__verhaal li { margin-bottom: 6px; }
.hsb-tp__verhaal a { color: var(--tp-blauw); text-underline-offset: 3px; }

.hsb-tp__uitlegbeeld { flex: 0 0 420px; max-width: 100%; }
.hsb-tp__uitlegbeeld img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--tp-kaart);
}


/* --- De perfecte match -------------------------------------------------------
   Een vlak in plaats van een witte kaart met slagschaduw: dezelfde vorm als
   het afsluitblok op de landingspagina's. */
.hsb-tp__advies { background: #fff; padding-top: 72px; }

.hsb-tp__adviesblok {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--tp-groot);
  background: var(--tp-vlak);
  overflow: hidden;
}

.hsb-tp__adviesbeeld { flex: 1 1 420px; min-width: 0; min-height: 340px; background: #e7edf3; }
.hsb-tp__adviesbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hsb-tp__adviestekst { flex: 1 1 520px; min-width: 0; padding: 48px 48px 50px; }
.hsb-tp__adviesregel {
  margin: 16px 0 28px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tp-grijs);
}

.hsb-tp__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

.hsb-tp__knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .1s;
}
.hsb-tp__knop:active { transform: translateY(1px); }

.hsb-tp__knop--vol { background: var(--tp-blauw); color: #fff; border: 1px solid var(--tp-blauw); }
.hsb-tp__knop--vol:hover { background: var(--tp-blauw-diep); border-color: var(--tp-blauw-diep); color: #fff; }

.hsb-tp__knop--lijn { background: #fff; color: var(--tp-blauw); border: 1px solid var(--tp-blauw); }
.hsb-tp__knop--lijn:hover { background: var(--tp-blauw); color: #fff; }


/* --- De vragen ---------------------------------------------------------------
   Kop links, lijst rechts. Bootstrap zet zelf een pijltje achter de knop;
   dat gebruiken we niet, want het icoon staat al in de knop. */
.hsb-tp__vragen { background: #fff; padding: 72px 0 80px; }

.hsb-tp__vraagluik {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  align-items: flex-start;
}

.hsb-tp__vraagkop { flex: 0 0 330px; max-width: 100%; }
.hsb-tp__lijst { flex: 1 1 560px; min-width: 0; border-top: 1px solid var(--tp-lijn); }

.hsb-tp__lijst .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--tp-lijn);
  background: transparent;
}

.hsb-tp__lijst .accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  color: var(--tp-blauw);
  font-size: 17px;
  font-weight: 600;
}
.hsb-tp__lijst .accordion-button:not(.collapsed) { background: transparent; color: var(--tp-blauw); }
.hsb-tp__lijst .accordion-button::after { display: none; }
.hsb-tp__lijst .accordion-title-text { flex: 1; text-align: left; }

.hsb-tp__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--tp-vlak);
  color: var(--tp-blauw);
}
.hsb-tp__lijst .acc-icon { transition: transform .3s ease; }
.hsb-tp__lijst .accordion-button:not(.collapsed) .acc-icon { transform: rotate(180deg); }

.hsb-tp__lijst .accordion-body {
  padding: 0 16px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tp-grijs);
}


/* --- Klassen die elders nog gebruikt worden ----------------------------------
   Deze stonden in het <style>-blok van deze pagina. De gedeelde
   sprekerskaart en teksten uit het CMS kunnen ze gebruiken, dus ze blijven
   staan. */
.text-blue { color: #103856; }
.line-height-lg { line-height: 1.8; }
.speaker-card { transition: transform .35s ease, box-shadow .35s ease; }
.speaker-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
.wishlist-btn-round {
  width: 36px; height: 36px; border-radius: 50% !important; border: none !important;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: 0.2s; cursor: pointer;
}


/* --- Smaller scherm ----------------------------------------------------------- */
@media (max-width: 991px) {
  .hsb-tp { padding: 48px 0 0; }
  .hsb-tp__artikelen { padding: 48px 0 52px; margin-top: 44px; }
  .hsb-tp__uitleg, .hsb-tp__advies, .hsb-tp__vragen { padding-top: 52px; }
  .hsb-tp__vragen { padding-bottom: 56px; }
  .hsb-tp__kop { font-size: 26px; }
  .hsb-tp__tweeluik, .hsb-tp__vraagluik { gap: 32px; }
  .hsb-tp__uitlegbeeld { flex: 1 1 100%; }
  .hsb-tp__uitlegbeeld img { aspect-ratio: 16 / 10; }
  .hsb-tp__adviestekst { padding: 36px 28px 40px; }
  .hsb-tp__adviesbeeld { flex: 1 1 100%; min-height: 240px; }
  .hsb-tp__vraagkop { flex: 1 1 100%; }
}

@media (max-width: 575px) {
  .hsb-tp { padding: 36px 0 0; }
  .hsb-tp__artikelen { padding: 36px 0 40px; margin-top: 32px; }
  .hsb-tp__uitleg, .hsb-tp__advies, .hsb-tp__vragen { padding-top: 40px; }
  .hsb-tp__vragen { padding-bottom: 48px; }
  .hsb-tp__kop { font-size: 23px; }
  .hsb-tp__verhaal h2 { font-size: 24px; }
  .hsb-tp__verhaal h3 { font-size: 19px; }
  .hsb-tp__verhaal p, .hsb-tp__verhaal ul, .hsb-tp__verhaal ol { font-size: 16px; }
  .hsb-tp__adviesblok { border-radius: 28px 2px 28px 2px; }
  .hsb-tp__adviestekst { padding: 28px 20px 32px; }
  .hsb-tp__knop, .hsb-tp__meer { width: 100%; justify-content: center; }
  .hsb-tp__lijst .accordion-button { padding: 17px 0; font-size: 16px; }
  .hsb-tp__lijst .accordion-body { padding: 0 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .speaker-wrap, .speaker-card, .hsb-tp__artikel, .hsb-tp__lees .icoon { transition: none; }
}