/* ══════════════════════════════════════════════════════════════════════════
   Huisbiografie — de cadeauroute (/cadeau, 30 september 2026)

   De landingspagina voor de Meta-cadeauadvertentie („Een fles wijn is zó op.
   Dit boek ligt er over tien jaar nog"). Hij draagt body.home en leent alle
   bouwstenen van de homepage (home.css): hero, strook, boekblok, voorbeeld,
   reviews, stappen, prijskaart, bestelformulier en vragen. Hier staat alleen
   wat de cadeaupagina anders doet: één cadeaubeeld in de hero in plaats van
   de bladzijdenwaaier, en de rij „Jij leest het eerst". Laadt ná home.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero: wat het is, in één regel die overal zichtbaar blijft ───────── */
/* Tom (30 sep 2026): wie hier voor het eerst komt, moet meteen lezen dat het
   om de geschiedenis van een huis gaat, als cadeau. De ondertitel van de
   homepage (.h-sub) verdwijnt op een telefoon; deze regel niet. */
.c-wat{margin:0;font-family:var(--h-sans);font-size:clamp(17px,1.4vw,20px);font-weight:600;
  line-height:1.4;color:var(--h-inkt);text-wrap:balance}
@media(max-width:640px){.c-wat{order:1;text-align:center;font-size:17px;padding:0 4px}}

/* ── hero: de echte foto van het uitgepakte boek ──────────────────────── */
/* Een foto, geen tekening (Tom, 30 sep 2026: de tekeningen oogden als AI).
   Staand, met de witte rand van de momentfoto op de homepage. */
.c-cadeaubeeld{margin:0;display:flex;align-items:center;justify-content:center}
.c-cadeaubeeld img{width:100%;max-width:500px;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:18px;border:10px solid var(--h-wit);box-shadow:0 26px 60px rgba(24,32,49,.16)}
@media(max-width:900px){.c-cadeaubeeld{width:min(460px,100%);margin:0 auto}}
/* Telefoon: kop, foto, zoekveld — dezelfde volgorde als op de homepage
   (Tom, 29 sep 2026: „eerst de afbeelding, daarna het invoerveld"). De foto
   schaalt mee met de hoogte van het scherm, zodat het zoekveld op het eerste
   scherm blijft. */
@media(max-width:640px){
  .c-cadeaubeeld{order:2;width:min(78%,max(200px,calc((100svh - 420px) * .75)))}
  .c-cadeaubeeld img{border-radius:14px;border-width:6px}
}

/* ── jij leest het eerst: tekst naast het overhandigde boek ───────────── */
.c-lezen{background:var(--h-perkament)}
.c-lezenrij{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.c-lezentekst{display:flex;flex-direction:column;gap:14px}
.c-lezentekst h2{margin-bottom:6px}
.c-lezentekst p{margin:0;font-size:19px;line-height:1.6;color:var(--h-mat);text-wrap:pretty}
.c-lezentekst .c-stil{font-family:var(--h-sans);font-size:15.5px;font-weight:600;color:var(--h-inkt)}
.c-lezentekst .h-verder{margin-top:8px}
.c-lintbeeld{width:100%;height:auto;max-height:600px;aspect-ratio:4/5;object-fit:cover;border-radius:18px;
  border:10px solid var(--h-wit);box-shadow:0 20px 40px rgba(24,32,49,.16)}
@media(max-width:820px){
  .c-lezenrij{grid-template-columns:1fr;gap:28px}
  .c-lezentekst p{font-size:17px}
  /* Onder elkaar: het beeld gecentreerd, niet links tegen de rand op een tablet. */
  .c-lintbeeld{display:block;margin:0 auto;max-height:520px}
}

/* ── het voorbeeld: de weg naar de andere vier ────────────────────────── */
.c-anders{margin:0;font-size:17px;line-height:1.55;color:var(--h-mat)}
.home .h-pagina .c-anders a{color:var(--h-inkt);text-underline-offset:4px;font-family:var(--h-sans);
  font-size:15.5px;font-weight:600}

/* ── zo leest het: vier zinnen uit vier boeken, en een rij hoofdstuktitels ── */
/* Tom (30 sep 2026): „meer beeld en geluid bij hoe het boek aanvoelt", en de
   zinnen mogen overtuigen. Geen uitleg over de schrijfstijl, maar de stijl
   zelf: echte zinnen, met de bron, één per huistype, twee naast elkaar. */
.c-stemmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.c-stem{margin:0;display:flex;flex-direction:column;gap:14px;padding:26px 28px;
  background:var(--h-wit);border:1px solid var(--h-lijn);border-radius:18px}
.c-stem p{margin:0;font-style:italic;font-size:21px;line-height:1.45;color:var(--h-inkt);text-wrap:pretty}
.c-stem .h-bron{margin-top:auto}
.c-titels{margin:26px 0 0;font-family:var(--h-serif);font-size:18px;line-height:1.7;color:var(--h-mat);text-wrap:pretty}
.c-titels .h-klein{display:block;margin-bottom:2px}
@media(max-width:900px){
  .c-stemmen{grid-template-columns:1fr;gap:12px}
  .c-stem{padding:22px}
  .c-stem p{font-size:19px}
  .c-titels{font-size:17px}
}

/* ── prijskaart zonder vergelijking: alleen het gedrukte boek ─────────── */
/* Tom (30 sep 2026): een leeskamer geef je niet cadeau, dus digitaal staat
   niet op deze pagina. Wat er voor € 99 in zit, als lijst op de nachtblauwe kaart. */
.c-inbegrepen{list-style:none;margin:6px 44px 0;padding:0;display:flex;flex-direction:column}
.c-inbegrepen li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.14);font-family:var(--h-sans);font-size:15.5px;line-height:1.4;color:#FBF8F1}
.c-inbegrepen li::before{content:"✓";flex:none;color:var(--h-goudl);font-weight:600}
@media(max-width:900px){.c-inbegrepen{margin:4px 26px 0}.c-inbegrepen li{font-size:14.5px;padding:9px 0}}

/* ── de plank: vier andere boeken onder het voorbeeld ─────────────────── */
/* Tom (30 sep 2026): laat zien dat er bij elk soort huis een ander boek
   hoort, zonder de tabbladen van de homepage. Vier kaften met één regel; de
   twee boeken die online te bladeren zijn, openen in een nieuw tabblad, zodat
   de gever op deze pagina blijft. */
.c-plank{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.c-plank li{display:flex;flex-direction:column;gap:4px;font-family:var(--h-sans);font-size:15px;line-height:1.35}
.c-plank li a{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.c-plank img{display:block;width:100%;height:auto;aspect-ratio:759/1075;object-fit:cover;margin-bottom:8px;
  border-radius:3px 6px 6px 3px;box-shadow:0 12px 26px rgba(24,32,49,.18)}
.c-plank b{font-weight:600;color:var(--h-inkt)}
.c-plank span{color:var(--h-mat);font-size:14px}
.c-plank a:hover img{box-shadow:0 16px 32px rgba(24,32,49,.26)}
.c-plank a:hover b{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.c-plank{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:24px}}