/* ═══════════════════════════════════════════════════════════════════
   LANDINGSPAGINA CHEF AAN HUIS
   Volgorde (Simon, 15 september 2026): hero met film · waarom + altijd inbegrepen ·
   boeken (stap 1 = menukeuze) · zo werkt het · vragen · galerij helemaal onderaan. Twee grondtonen:
   crème, en donker alleen voor de hero en de impressie.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero met film ────────────────────────────────────────────── */

.hero--landing { min-height: min(92svh, 860px); }
.hero--landing .hero__title { max-width: 13ch; }
.hero--landing .hero__title em { color: var(--c-brass-bright); }

.hero__tekstlink {
  font-size: var(--t-sm);
  color: rgba(247, 243, 234, 0.82);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(247, 243, 234, 0.4);
  transition: color var(--dur-fast) var(--ease);
}
.hero__tekstlink:hover { color: var(--c-text-inv); }

/* Pauzeknop: bewegend beeld langer dan vijf seconden moet stil te zetten zijn */
.hero__videoknop {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(247, 243, 234, 0.35);
  border-radius: var(--r-sm);
  background: rgba(14, 13, 11, 0.35);
  color: var(--c-text-inv);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.hero__videoknop:hover { background: rgba(14, 13, 11, 0.6); }
@media (max-width: 760px) {
  .hero__videoknop { top: 96px; bottom: auto; }
}

/* ── 2. Waarom chef aan huis + altijd inbegrepen ───────────────── */
/* Kort overzicht vlak voor de boekingsmodule: een persoonlijk verhaal links, rechts wat
   altijd inbegrepen is (het bestaande .included-blok uit concept.css). */

.waarom__raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .waarom__raster { grid-template-columns: 1.25fr 1fr; } }

.waarom__redenen { display: grid; gap: var(--s-3); justify-items: start; }
/* Een kort, persoonlijk verhaal (geen opsomming). De eerste zin als opening. */
.waarom__verhaal { display: grid; gap: var(--s-4); max-width: 62ch; margin-top: var(--s-4); }
.waarom__verhaal p { line-height: 1.75; color: var(--c-text-soft); }
.waarom__verhaal p:first-child {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.4;
  color: var(--c-text);
  text-wrap: pretty;
}
.waarom__ondertekening {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-brass-ink) !important;
}
@media (min-width: 900px) { .waarom__inbegrepen { margin-top: var(--s-2); } }

/* ── 3. Impressie ────────────────────────────────────────────────── */

.impressie {
  background: var(--c-ink);
  color: var(--c-text-inv);
  padding-top: clamp(48px, 6vw, 88px);
}
.impressie__kop {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.impressie__kop .overline { color: var(--c-brass-bright); }
.impressie__kop .section-head__title { color: var(--c-text-inv); }

/* Mozaïek. Telefoon: 2 kolommen. Breed: 6 kolommen, twee rijen —
   groot beeld 2×2, brede beelden 2×1, de rest 1×1. Sluit zonder gaten. */
.impressie__raster {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(140px, 42vw, 260px);
}
.impressie__beeld { position: relative; margin: 0; overflow: hidden; }
.impressie__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.impressie__beeld--groot,
.impressie__beeld--breed { grid-column: span 2; }
.impressie__beeld--groot { grid-row: span 2; }
@media (min-width: 900px) {
  .impressie__raster {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(200px, 19vw, 300px);
  }
}
@media (hover: hover) {
  .impressie__beeld:hover img { transform: scale(1.04); }
}

/* ── 4. Zo werkt het ─────────────────────────────────────────────── */

#zo-werkt-het { scroll-margin-top: 72px; }

.werkt { display: grid; gap: var(--s-5); }

.werkt-stappen { counter-reset: stap; }
.werkt-stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-cream-line);
}
.werkt-stappen li:last-child { border-bottom: 1px solid var(--c-cream-line); }
.werkt-stappen li::before {
  content: counter(stap, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  color: var(--c-brass-ink);
  font-variant-numeric: lining-nums;
}
.werkt-stappen__titel { font-size: var(--t-lg); }
.werkt-stappen p { font-size: var(--t-sm); line-height: 1.6; color: var(--c-text-soft); }
.werkt__nodig { font-size: var(--t-sm); line-height: 1.6; color: var(--c-text-mute); max-width: 70ch; }
/* Breed: de vier stappen naast elkaar (inbegrepen staat nu boven de module) */
@media (min-width: 900px) {
  .werkt-stappen { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--s-6); }
  .werkt-stappen li { grid-template-columns: 1fr; align-content: start; border-bottom: 1px solid var(--c-cream-line); }
  .werkt-stappen li::before { grid-row: auto; }
}

/* Twee crème blokken na elkaar: een haarlijn scheidt ze */
.landing-lijn { border-top: 1px solid var(--c-cream-line); }

/* ── 5. Vragen (de proeverij staat alleen op de homepage) ──────────────────────────────────────── */

.landing-faq { display: grid; gap: var(--s-5); max-width: 820px; }

/* ── Algemeen ────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .impressie__beeld img { transition: none; }
}