/* ===========================================================================
   hsb-boek.css — de boekpagina

   Hoort bij boeken-profiel.php, de pagina achter
   /boeken/<spreker>/<boek>.

   Komt in de plaats van het <style>-blok dat in de <head> van die pagina
   stond. Dat blok was nog het oude ontwerp: Inter van Google Fonts, blauw
   #0071e3, knoppen met een hoek van 980px en vlakken van #f5f5f7. Hier
   staat de huisstijl:

     hoeken   48px 2px 48px 2px  (de blauwe kop)
              40px 2px 40px 2px  (grote vlakken)
              24px 2px 24px 2px  (kaarten en de cover)
              12px               (knoppen)
     kleuren  #103856 blauw, #eef4f9 licht, #5b6b7c grijs, #c24d16 oranje

   Geen eigen lettertype: de koppen pakken de letter van de site op, net als
   op de andere pagina's.
   =========================================================================== */

.hsb-boek {
  --bk-blauw: #103856;
  --bk-blauw-diep: #0b2940;
  --bk-oranje: #c24d16;
  --bk-oranje-diep: #a63f0f;
  --bk-lijn: #e3e8ee;
  --bk-vlak: #f6f8fa;
  --bk-licht: #eef4f9;
  --bk-tekst: #1d2733;
  --bk-grijs: #5b6b7c;
  --bk-knop: 12px;
  --bk-kaart: 24px 2px 24px 2px;
  --bk-groot: 40px 2px 40px 2px;

  color: var(--bk-tekst);
}


/* ===========================================================================
   DE BLAUWE KOP MET DE COVER
   =========================================================================== */

.hsb-boek__kop { padding: 24px 0 0; }

.hsb-boek__kopvlak {
  border-radius: 48px 2px 48px 2px;
  background: var(--bk-blauw);
  color: #fff;
  padding: 44px 48px 48px;
}

/* Het kruimelpad. Lichter dan de tekst eromheen, maar de links houden
   genoeg contrast op het blauw. */
.hsb-boek__kruimel {
  margin-bottom: 20px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}
.hsb-boek__kruimel a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.hsb-boek__kruimel a:hover { color: #fff; text-decoration: underline; }
.hsb-boek__kruimel-pijl { margin: 0 8px; color: rgba(255, 255, 255, .45); }

/* De cover is hoger dan de tekst ernaast zodra er geen korte omschrijving in
   het CMS staat. Met align-items: flex-start bleef er dan een leeg blauw gat
   onder de knoppen. Nu staan de twee kolommen gecentreerd tegenover elkaar,
   zodat de kop even hoog is als de cover en er niets leegs overblijft. */
.hsb-boek__kopin {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: center;
}

.hsb-boek__cover {
  flex: 0 0 auto;
  width: 210px;
}
.hsb-boek__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px 2px 24px 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
/* Geen cover in het CMS: een rustig vlak van hetzelfde formaat, zodat de
   pagina niet verspringt. */
.hsb-boek__cover--leeg {
  aspect-ratio: 2 / 3;
  border-radius: 24px 2px 24px 2px;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}

.hsb-boek__koptekst { flex: 1 1 420px; min-width: 0; }

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

.hsb-boek__titel {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
}
.hsb-boek__subtitel {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255, 255, 255, .85);
}
.hsb-boek__kort {
  margin: 0 0 24px;
  max-width: 38em;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

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


/* ===========================================================================
   KNOPPEN
   =========================================================================== */

.hsb-boek__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--bk-knop);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}
.hsb-boek__knop:active { transform: translateY(1px); }

.hsb-boek__knop--oranje {
  background: var(--bk-oranje);
  border: 1px solid var(--bk-oranje);
  color: #fff;
}
.hsb-boek__knop--oranje:hover {
  background: var(--bk-oranje-diep);
  border-color: var(--bk-oranje-diep);
  color: #fff;
}

/* Op het blauw: een lijntje in plaats van een vlak. */
.hsb-boek__knop--lijn-wit {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-size: 15.5px;
  padding: 0 22px;
}
.hsb-boek__knop--lijn-wit:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .65);
  color: #fff;
}

/* Op wit: de blauwe lijnknop. */
.hsb-boek__knop--lijn {
  background: #fff;
  border: 1px solid var(--bk-blauw);
  color: var(--bk-blauw);
  font-size: 15.5px;
  min-height: 50px;
  padding: 0 24px;
}
.hsb-boek__knop--lijn:hover { background: var(--bk-licht); color: var(--bk-blauw); }

.hsb-boek__knop .hsb-boek__pijl {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.hsb-boek__knop:hover .hsb-boek__pijl { transform: translateX(4px); }


/* ===========================================================================
   DE GEGEVENS VAN HET BOEK

   Vier naast elkaar. Alleen wat in het CMS is ingevuld krijgt een vakje;
   lege vakjes en "0000-00-00" waren er al uit.
   =========================================================================== */

.hsb-boek__specs { padding: 32px 0 0; }

.hsb-boek__specsraster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hsb-boek__spec {
  padding: 18px 22px;
  border: 1px solid var(--bk-lijn);
  border-radius: var(--bk-kaart);
  background: #fff;
}
.hsb-boek__spec dt {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bk-grijs);
}
.hsb-boek__spec dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bk-blauw);
}
.hsb-boek__spec dd a { color: var(--bk-blauw); }


/* ===========================================================================
   OVER DIT BOEK
   =========================================================================== */

.hsb-boek__tekst { padding: 48px 0 0; }

.hsb-boek__smal { max-width: 820px; }

.hsb-boek__h2 {
  margin: 0 0 16px;
  font-size: 27px;
  line-height: 1.2;
  color: var(--bk-blauw);
}

.hsb-boek__lopend {
  font-size: 17px;
  line-height: 1.75;
  color: var(--bk-tekst);
}
.hsb-boek__lopend p { margin: 0 0 18px; }
.hsb-boek__lopend p:last-child { margin-bottom: 0; }

/* "Waarom dit boek relevant is" en "Voor wie": twee losse kaders onder de
   lopende tekst. */
.hsb-boek__kader {
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid var(--bk-lijn);
  border-radius: var(--bk-kaart);
  background: var(--bk-vlak);
}
.hsb-boek__kaderkop {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bk-grijs);
}
.hsb-boek__kader p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
.hsb-boek__kader p + p { margin-top: 14px; }


/* ===========================================================================
   OVER DE AUTEUR
   =========================================================================== */

.hsb-boek__auteur { padding: 56px 0 0; }

.hsb-boek__auteurkaart {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  padding: 26px 30px;
  border: 1px solid var(--bk-lijn);
  border-radius: var(--bk-groot);
  background: var(--bk-vlak);
}

.hsb-boek__auteurfoto {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 24px 2px 24px 2px;
  object-fit: cover;
  display: block;
}

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

.hsb-boek__bovenkop {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bk-grijs);
}
.hsb-boek__auteurnaam {
  display: block;
  margin: 0 0 6px;
  font-size: 23px;
  line-height: 1.2;
  color: var(--bk-blauw);
}
.hsb-boek__auteurintro {
  margin: 0;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bk-grijs);
}


/* ===========================================================================
   MEER VAN DEZE AUTEUR
   =========================================================================== */

.hsb-boek__meer { padding: 64px 0 0; }

.hsb-boek__meerlead {
  margin: 0 0 28px;
  font-size: 16px;
  color: var(--bk-grijs);
}
.hsb-boek__h2 + .hsb-boek__meerlead { margin-top: -8px; }

.hsb-boek__meerraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hsb-boek__meerkaart {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--bk-lijn);
  border-radius: var(--bk-kaart);
  background: #fff;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s, border-color .25s;
}
.hsb-boek__meerkaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16, 56, 86, .10);
  border-color: #cfd6de;
}
.hsb-boek__meerkaart:hover .hsb-boek__pijl { transform: translateX(4px); }

.hsb-boek__meercover {
  flex: 0 0 auto;
  width: 74px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px 2px 12px 2px;
  display: block;
}
.hsb-boek__meercover--leeg {
  background: #dbe4ec;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #5b6b7c;
  text-align: center;
  padding: 6px;
}

.hsb-boek__meertekst { min-width: 0; }
.hsb-boek__meertitel {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--bk-blauw);
}
.hsb-boek__meerregel {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--bk-grijs);
}
.hsb-boek__meerlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bk-oranje);
}
.hsb-boek__meerlink .hsb-boek__pijl {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}


/* ===========================================================================
   DE AFSLUITENDE BAND
   =========================================================================== */

.hsb-boek__slot { padding: 72px 0 80px; }

.hsb-boek__slotvlak {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  padding: 44px 48px;
  border-radius: var(--bk-groot);
  background: var(--bk-blauw);
  color: #fff;
}
.hsb-boek__slottekst { flex: 1 1 520px; min-width: 0; }
.hsb-boek__slottekst h2 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.2;
  color: #fff;
}
.hsb-boek__slottekst p {
  margin: 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}
.hsb-boek__slotknoppen {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hsb-boek__slotknoppen .hsb-boek__knop { min-height: 54px; }


/* ===========================================================================
   SMALLERE SCHERMEN
   =========================================================================== */

@media (max-width: 1199px) {
  .hsb-boek__specsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hsb-boek__meerraster  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsb-boek__titel { font-size: 32px; }
}

@media (max-width: 991px) {
  .hsb-boek__kopvlak { padding: 32px 28px 36px; border-radius: 36px 2px 36px 2px; }
  .hsb-boek__kopin { gap: 28px; }
  .hsb-boek__cover { width: 160px; }
  .hsb-boek__specsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsb-boek__tekst  { padding-top: 36px; }
  .hsb-boek__auteur { padding-top: 40px; }
  .hsb-boek__meer   { padding-top: 48px; }
  .hsb-boek__slot   { padding: 48px 0 56px; }
  .hsb-boek__slotvlak { padding: 32px 26px; }
}

@media (max-width: 575px) {
  .hsb-boek__kop { padding-top: 12px; }
  .hsb-boek__kopvlak { padding: 26px 20px 30px; border-radius: 28px 2px 28px 2px; }
  .hsb-boek__cover { width: 132px; }
  .hsb-boek__titel { font-size: 26px; }
  .hsb-boek__subtitel { font-size: 17px; }
  .hsb-boek__kort { font-size: 15.5px; }
  .hsb-boek__h2 { font-size: 23px; }
  .hsb-boek__specsraster { grid-template-columns: minmax(0, 1fr); }
  .hsb-boek__meerraster  { grid-template-columns: minmax(0, 1fr); }
  .hsb-boek__auteurkaart { padding: 22px 20px; border-radius: 28px 2px 28px 2px; }
  .hsb-boek__slotvlak { border-radius: 28px 2px 28px 2px; padding: 26px 20px; }
  /* Knoppen onder elkaar over de volle breedte: makkelijker te raken. */
  .hsb-boek__knop { width: 100%; }
}