/* ==========================================================================
   Pagina: Zomerkompas — losse productlandingspagina, 1:1 overgezet vanuit de
   live/staging-tekst. Het echte kopen/afrekenen loopt via de bestaande
   webshop (WooCommerce) — deze site heeft geen backend, dus de CTA-knoppen
   linken door naar het bestaande productpagina op de webshop.
   Klassen met prefix "zk-".
   ========================================================================== */

/* ---------- Hero ---------- */
.zk-hero { padding: clamp(6.5rem, 13vw, 9.5rem) 0 clamp(4rem, 8vw, 6rem); }
.zk-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.zk-hero .kicker { margin-bottom: 1.4rem; }
.zk-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1.2rem; }
.zk-hero-sub { font-size: 1.05rem; color: var(--tekst-zacht); margin-bottom: 1.8rem; }
.zk-hero-prijs { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--accent); margin: 0 0 1.2rem; }
.zk-hero-beeld { max-width: 340px; margin: 0 auto; }
@media (max-width: 780px) {
  .zk-hero-grid { grid-template-columns: 1fr; }
  .zk-hero-beeld { order: -1; }
}

/* ---------- Herkenning — korte regels, veel witruimte ---------- */
.zk-herkenning { padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.zk-herkenning .wrap { max-width: 620px; }
.zk-herkenning .kicker { margin-bottom: 1.6rem; }
.zk-herkenning p { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.7; color: var(--tekst); margin: 0 0 0.3em; }
.zk-herkenning p.zk-nadruk { font-style: italic; color: var(--accent); margin-top: 1.4rem; }

/* ---------- Wat ontvang je ---------- */
.zk-ontvangt { padding: clamp(4.5rem, 9vw, 6.5rem) 0; }
.zk-ontvangt .wrap { max-width: 640px; }
.zk-ontvangt .kicker { margin-bottom: 1.4rem; }
.zk-ontvangt ul { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--lijn); }
.zk-ontvangt li { padding: 0.85rem 0; border-bottom: 1px solid var(--lijn); font-size: 1.02rem; color: var(--tekst); }
.zk-ontvangt p { color: var(--tekst-zacht); }
.zk-ontvangt-prijs { text-align: center; margin-top: 2.2rem; }
.zk-ontvangt-prijs .zk-prijsbedrag { display: block; font-family: var(--font-serif); font-style: italic; font-size: 2rem; color: var(--accent); margin-bottom: 1.2rem; }

/* ---------- Voor wie dit is — fragmenten, gecentreerd ---------- */
.zk-voorwie { padding: clamp(4.5rem, 9vw, 6.5rem) 0; text-align: center; }
.zk-voorwie .wrap { max-width: 560px; }
.zk-voorwie .kicker { margin-bottom: 1.8rem; }
.zk-voorwie p { font-family: var(--font-serif); font-size: 1.1rem; color: var(--tekst-zacht); margin: 0 0 1.1rem; line-height: 1.6; }

/* ---------- Kruislink naar Jouw Nieuwe Verhaal ---------- */
.zk-kruislink { padding: clamp(4.5rem, 9vw, 6.5rem) 0; text-align: center; }
.zk-kruislink .wrap { max-width: 620px; }
.zk-kruislink .kicker { margin-bottom: 1.2rem; }
.zk-kruislink p { color: var(--tekst-zacht); }