/* Aanpassingen op de overgenomen vormgeving — Cristian, 31-10-2026.
   1. De mockup schaalt tot de volle hoogte van het tekstblok ernaast, zonder bijsnijden:
      de afbeelding bepaalt zelf haar breedte, de kolom volgt.
   2. Meeschalen van telefoon tot ultrawide. */

/* ---- 1. beeldpaneel ---- */
/* Alleen vanaf tablet: onder 660px stapelt de originele CSS de kaart, en die regel
   mag deze override niet omverduwen (mijn stylesheet laadt erna). */
@media (min-width: 661px){
  .book{ grid-template-columns: auto 1fr; }
  /* Vangnet als het script niet draait; het script zet de exacte breedte inline. */
  .cover-wrap{ width: clamp(190px, 30vw, 340px); }
}
.cover-wrap{
  align-items: stretch;
  padding: 0;
}
.cover-wrap .cover{
  height: 100%;
  width: 100%;
  object-fit: contain;                    /* heel laten, niet bijsnijden */
  display: block;
}
.case-number{
  top: 16px; bottom: 16px; left: 14px;
  display: flex; align-items: flex-start;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}

/* ---- 2. meeschalen ---- */

/* telefoon: gestapeld, beeld op natuurlijke hoogte */
@media (max-width: 660px){
  .cover-wrap{ max-width: none; padding: 26px 26px 26px 44px; align-items: center; }
  .cover-wrap .cover{ height: auto; width: min(66%, 280px); max-height: none; margin: 0 auto; }
  .case-number{ bottom: auto; }
}

/* tablet staand: smallere beeldkolom zodat de tekst ademt */
@media (min-width: 661px) and (max-width: 900px){
  .cover-wrap{ max-width: clamp(170px, 26vw, 240px); }
}

/* ruime monitor: het raster mag meegroeien */
@media (min-width: 1400px){
  .shelf{ max-width: 1240px; }
}

/* ultrawide: niet verder uitrekken, wel ruimer ademen */
@media (min-width: 1900px){
  .shelf{ max-width: 1360px; gap: 36px; }
  /* beeldkolom niet verder verbreden: anders wordt de mockup hoger dan het tekstblok
     en rekt de kaart mee (gemeten op 2560px: beeld 524 tegen tekst 479) */
}

/* ---- voet: links naar de zakelijke pagina's ---- */
.voetlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:26px 0 0}
.voetlinks a{color:#9aa3a2;font-size:13px;border-bottom:1px solid transparent;padding-bottom:2px}
.voetlinks a:hover{color:var(--paper);border-bottom-color:var(--red)}
.voet-kvk{color:#5f6766 !important;font-size:11px !important;margin-top:10px !important;
  letter-spacing:.04em}

/* ---- tekstpagina's (over, contact, privacy, voorwaarden) ---- */
.terug{color:#c7ccca;border:1px solid #3a4445;border-radius:999px;padding:7px 15px;font-size:13px}
.terug:hover{color:var(--paper);border-color:#5a6667}
.tekstpagina{max-width:720px;margin:0 auto 90px;padding:0 clamp(20px,4vw,48px);
  font-size:16px;line-height:1.72;color:#c3c9c7}
.tekstpagina .lead{font-family:var(--font-serif),Georgia,serif;font-size:clamp(19px,2.3vw,23px);
  line-height:1.5;color:var(--paper);margin:0 0 36px}
.tekstpagina h2{font-family:var(--font-serif),Georgia,serif;font-weight:600;color:var(--paper);
  font-size:clamp(21px,2.6vw,26px);letter-spacing:-.015em;line-height:1.2;
  margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.tekstpagina h2:first-child{border-top:0;padding-top:0;margin-top:0}
.tekstpagina p{margin:0 0 18px}
.tekstpagina a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--red)}
.tekstpagina .klein{font-size:13px;color:#747c7b;margin-top:34px}
.tekstpagina .gegevens{margin:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tekstpagina .gegevens>div{display:grid;grid-template-columns:200px 1fr;gap:0;
  background:#0d1314;padding:14px 18px}
.tekstpagina .gegevens dt{color:#8e9695;font-size:13px;letter-spacing:.04em}
.tekstpagina .gegevens dd{margin:0;color:var(--paper);font-size:15px}
@media (max-width:620px){
  .tekstpagina .gegevens>div{grid-template-columns:1fr;gap:4px}
}

/* ---- aangekondigde delen ---- */
.cover-volgt{
  flex:1 0 100%;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:350px;
  background:
    repeating-linear-gradient(135deg, #0e1415 0 14px, #0b1011 14px 28px);
  border-right:1px solid var(--line);
}
.cover-volgt span{
  color:#5d6665; font:700 11px var(--font-sans); letter-spacing:.22em;
  text-align:center; line-height:1.8;
}
.status-regel{
  color:#8d9594 !important; font-family:var(--font-sans), Arial, sans-serif !important;
  font-size:14px !important; line-height:1.6 !important; max-width:460px;
  border-left:2px solid var(--line); padding-left:14px; margin:0 !important;
}

/* Bij een platte omslag (geen foto-mockup) zou het dossiernummer over de titel vallen.
   Die omslagen krijgen daarom een eigen strook links; het script telt die breedte mee. */
@media (min-width: 661px){
  .cover-wrap:has(> .cover:not(.mockup)),
  .cover-wrap:has(> .cover-volgt){ padding-left: 34px; }
}

/* ---- taalschakelaar: de knoppen zijn echte links geworden ---- */
.languages a:not(.terug){
  color:#8f9695; border:0; border-radius:999px; min-width:42px; padding:9px 10px;
  font-size:13px; font-weight:700; text-align:center; display:inline-block; background:none;
}
.languages a:not(.terug):hover{ color:var(--paper); }
.languages a.active{
  color:var(--paper); background:#273031; box-shadow:inset 0 0 0 1px #3a4445;
}

/* ---- externe-link-pijl ----
   Het teken ↗ (U+2197) rendert op iOS als kleuremoji: een grijsblauw blokje.
   Daarom een inline SVG, die de kleur en de dikte van de tekst overneemt. */
.pijl{
  width:.6em; height:.6em; margin-left:.45em; flex:none;
  display:inline-block; vertical-align:baseline;
  opacity:.75;
}
a:hover > .pijl{ opacity:1; }
.primary .pijl{ opacity:.9; margin-left:.55em; }

/* ---- recensieverzoek ---- */
.recensie{
  max-width:1040px; margin:0 auto 90px; padding:0 clamp(20px,4vw,48px);
}
.recensie h2{
  font-family:var(--font-serif),Georgia,serif; letter-spacing:-.025em;
  margin:18px 0 16px; font-size:clamp(28px,4vw,42px); font-weight:600; line-height:1.08;
  max-width:700px;
}
.recensie > p{
  color:#bcc1bf; max-width:620px; margin:0 0 26px;
  font-family:var(--font-serif),Georgia,serif; font-size:clamp(17px,2vw,20px); line-height:1.5;
}
.recensie .recensie-label{
  color:#8e9695; font-family:var(--font-sans),Arial,sans-serif; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin:0 0 14px;
}
.recensie-links{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.recensie-links a{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  color:#d4d9d7; font-size:14px; background:#0e1415;
}
.recensie-links a:hover{ color:var(--paper); border-color:#5a6667; background:#131b1c; }

/* ---- boekpagina ---- */
.boekkop{
  max-width:1040px; margin:0 auto; padding:clamp(34px,6vw,70px) clamp(20px,4vw,48px) 44px;
  display:grid; grid-template-columns:minmax(200px,320px) 1fr; gap:clamp(28px,5vw,56px);
  align-items:start;
}
.boekkop-beeld img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.boekkop h1{
  font-family:var(--font-serif),Georgia,serif; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(36px,5.5vw,60px); font-weight:600; margin:16px 0 8px;
}
.boekkop .ondertitel{ color:#9aa3a2; margin:0 0 18px; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; }
.boekkop .pitch{
  color:#c3c9c7; font-family:var(--font-serif),Georgia,serif; margin:0 0 30px;
  font-size:clamp(18px,2.2vw,22px); line-height:1.45; max-width:560px;
}
.boekkop .kopje{
  color:#8e9695; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; margin:0 0 12px; font-family:var(--font-sans),Arial,sans-serif;
}
.koopblok{ display:flex; flex-wrap:wrap; gap:10px; }
.koopblok .koop{
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px;
  padding:10px 18px; color:#d4d9d7; font-size:14px; background:#0e1415;
}
.koopblok .koop:hover{ color:var(--paper); border-color:#5a6667; background:#131b1c; }
.koopblok .hoofd{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.koopblok .hoofd:hover{ background:#c0322c; border-color:#c0322c; color:#fff; }
.koopblok .prijs{ opacity:.75; margin-left:8px; }
.boekflap p:first-child{
  font-family:var(--font-serif),Georgia,serif; font-size:clamp(19px,2.3vw,23px);
  line-height:1.5; color:var(--paper);
}
.fragment{
  max-width:720px; margin:0 auto 90px; padding:0 clamp(20px,4vw,48px);
  border-top:1px solid var(--line); padding-top:clamp(34px,5vw,56px);
}
.fragment h2{
  font-family:var(--font-serif),Georgia,serif; font-weight:600; color:var(--paper);
  font-size:clamp(26px,3.4vw,36px); letter-spacing:-.02em; margin:0 0 10px;
}
.fragment .fragmentnoot{ color:#8e9695; font-size:14px; margin:0 0 34px; max-width:540px; }
.fragment h3{
  color:#9aa3a2; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; margin:44px 0 18px; font-family:var(--font-sans),Arial,sans-serif;
}
.fragment h3:first-child{ margin-top:0; }
.fragmenttekst p{
  font-family:var(--font-serif),Georgia,serif; font-size:18px; line-height:1.68;
  color:#c7ccca; margin:0 0 16px; hyphens:auto;
}
@media (max-width:760px){
  .boekkop{ grid-template-columns:1fr; gap:24px; }
  .boekkop-beeld{ max-width:260px; }
}
/* link vanaf de boekkaart naar de boekpagina */
.meer{
  display:inline-flex; align-items:center; margin-top:4px;
  color:#d4d9d7; font-size:14px; font-weight:700;
  border-bottom:1px solid var(--red); padding-bottom:2px;
}
.meer:hover{ color:var(--paper); }

/* logregels en transcripties binnen een leesfragment */
.fragmenttekst .log{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; line-height:1.62; color:#9aa3a2;
  background:#0d1314; border:1px solid var(--line); border-left:2px solid var(--red);
  padding:16px 18px; margin:0 0 20px; white-space:pre-wrap; word-break:break-word;
  overflow-x:auto;
}