/* Voorleesverhaal: leesvriendelijke opmaak, los van de rest van de site */

.downloadknop {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--den); color: var(--wit); font-family: var(--kop); font-weight: 600;
  padding: 0.7rem 1.2rem; border-radius: 999px; text-decoration: none;
  box-shadow: var(--schaduw-min); border: var(--rand);
}
.downloadknop:hover { filter: brightness(1.05); }

.verhaal-held { position: relative; }
.verhaal-held .omslag { max-width: 900px; }
.verhaal-banier {
  display: block;
  width: 100%;
  height: auto;
}

.hoofdstukken-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 640px) { .hoofdstukken-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .hoofdstukken-grid { grid-template-columns: 1fr 1fr 1fr; } }

.hoofdstuk-kaart {
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hoofdstuk-kaart:hover { transform: translate(-2px, -3px); box-shadow: 7px 7px 0 var(--nacht); }
.hoofdstuk-kaart .rij-boven { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.hoofdstuk-kaart .embleem { font-size: 1.8rem; line-height: 1; }
.hoofdstuk-kaart .nr {
  font-family: var(--kop); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-zacht);
}
.hoofdstuk-kaart h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.hoofdstuk-kaart p { margin: 0; font-size: 0.92rem; color: var(--inkt-zacht); line-height: 1.5; }
.hoofdstuk-kaart .leestijd {
  margin-top: auto; font-size: 0.78rem; color: var(--inkt-zacht);
  display: flex; align-items: center; gap: 0.35rem;
}

/* --- Individuele hoofdstukpagina: leesmodus ---------------------------------- */

.lees-omslag { max-width: 700px; margin: 0 auto; padding: 0 1.2rem; }

.voortgang { display: flex; gap: 0.3rem; max-width: 700px; margin: 0 auto 1.6rem; padding: 0 1.2rem; }
.voortgang a { flex: 1; height: 7px; border-radius: 99px; background: var(--grond); display: block; }
.voortgang a.klaar { background: var(--den); }
.voortgang a.actief { background: var(--gelato); }

.verhaal-kop { text-align: center; padding: 1.6rem 0 0.4rem; }
.verhaal-kop .embleem { font-size: 2.6rem; display: block; margin-bottom: 0.5rem; }
.verhaal-kop .nr {
  font-family: var(--kop); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-zacht);
  display: block; margin-bottom: 0.3rem;
}
.verhaal-kop h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }

.proza-lees {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  line-height: 1.85;
  color: var(--inkt);
  margin-top: 1.8rem;
}
.proza-lees p { margin: 0 0 1.35em; }
.proza-lees p:first-of-type::first-letter {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 0.75;
  float: left;
  margin: 0.06em 0.09em 0 0;
  color: var(--accent, var(--den));
}

/* --- Luisterboek ------------------------------------------------------------- */

.luister-strook {
  max-width: 700px; margin: 1.6rem auto 0; padding: 0 1.2rem;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.luister-strook audio { flex: 1; min-width: 220px; height: 40px; }
.luister-strook .mp3-link {
  font-family: var(--kop); font-weight: 600; font-size: 0.82rem;
  color: var(--inkt); text-decoration: none;
  background: var(--grond); border-radius: 999px; padding: 0.5rem 0.9rem;
  white-space: nowrap;
}
.luister-strook .mp3-link:hover { background: var(--wit); }
.luister-label {
  max-width: 700px; margin: 0 auto; padding: 0 1.2rem;
  font-family: var(--kop); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--inkt-zacht);
  text-align: center; margin-top: 1.8rem;
}

.hoofdstuk-nav {
  max-width: 700px; margin: 2.6rem auto 1rem; padding: 0 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.hoofdstuk-nav a {
  font-family: var(--kop); font-weight: 600; font-size: 0.92rem;
  text-decoration: none; color: var(--inkt);
  background: var(--wit); border: var(--rand); border-radius: 999px;
  padding: 0.6rem 1.1rem; box-shadow: var(--schaduw-min);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.hoofdstuk-nav a:hover { filter: brightness(1.04); }
.hoofdstuk-nav a.terug-overzicht { background: var(--grond); box-shadow: none; border: none; }

.download-strook {
  max-width: 700px; margin: 0 auto 2.4rem; padding: 0 1.2rem;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .proza-lees p:first-of-type::first-letter { color: var(--accent, var(--zon)); }
}