/* ═══════════════════════════════════════════════════════════════════
   SECTIES — terugkerende opbouwblokken
   ═══════════════════════════════════════════════════════════════════ */

/* ── Split: beeld naast tekst ────────────────────────────────────── */

.split {
  display: grid;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  /* Beeld naar rechts zonder de HTML-volgorde te wijzigen */
}

.split__body { max-width: 560px; }
.split__body > * + * { margin-top: var(--s-5); }
.split__body .overline + .split__title { margin-top: var(--s-4); }
.split__title { font-size: var(--t-3xl); }

/* Twee gestapelde beelden met verspringing — geeft diepte */
.split__media--duo {
  position: relative;
  padding-bottom: 14%;
  padding-right: 12%;
}
.split__media--duo .media:first-child { aspect-ratio: 4 / 5; }
.split__media--duo .media:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--c-cream);
}
.on-dark .split__media--duo .media:last-child { border-color: var(--c-ink); }

/* ── Inbegrepen-lijst ────────────────────────────────────────────── */

.checklist {
  display: grid;
  gap: 0 clamp(24px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .checklist { grid-template-columns: repeat(2, 1fr); } }

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-cream-line);
  font-size: var(--t-base);
  line-height: 1.6;
}
.on-dark .checklist li { border-bottom-color: var(--c-ink-line); }

.checklist svg {
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--c-brass-ink);
}
.on-dark .checklist svg { color: var(--c-brass-bright); }

.checklist strong { font-weight: 400; }
.checklist span {
  display: block;
  font-size: var(--t-sm);
  color: var(--c-text-mute);
  margin-top: 2px;
}
.on-dark .checklist span { color: var(--c-text-inv-mute); }

/* ── Recensies ───────────────────────────────────────────────────── */

/* Score boven de recensies */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--c-cream-line);
}
.reviews-head__stars {
  color: var(--c-brass-ink);
  letter-spacing: 0.2em;
  font-size: var(--t-sm);
}
.reviews-head__score {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.reviews-head__count { font-size: var(--t-sm); color: var(--c-text-mute); }

.review-grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

.review {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-cream);
  border: 1px solid var(--c-cream-line);
}
.on-soft .review { background: var(--c-cream); }
.review__stars {
  color: var(--c-brass-ink);
  letter-spacing: 0.18em;
  font-size: var(--t-xs);
  margin-bottom: var(--s-4);
}
.review__text {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.5;
  letter-spacing: -0.01em;
  flex: 1;
}
.review__author {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-cream-line);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* ── Afsluitende oproep ──────────────────────────────────────────── */

.cta-band {
  position: relative;
  isolation: isolate;
  text-align: center;
  color: var(--c-text-inv);
  background: var(--c-ink);
  overflow: hidden;
}
.cta-band img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 13, 11, 0.78);
}
.cta-band__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cta-band__title {
  font-size: var(--t-3xl);
  color: var(--c-text-inv);
  margin-top: var(--s-4);
}
.cta-band__text {
  margin-top: var(--s-5);
  font-size: var(--t-lg);
  color: rgba(247, 243, 234, 0.8);
  font-weight: 300;
}
.cta-band__actions {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}
/* Beoordeling vlak onder de knop — daar weegt een vertrouwenssignaal
   het zwaarst, en het is de laatste twijfel die je wegneemt. */
.cta-band__proof {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
}

.cta-band__note {
  display: block;
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: rgba(247, 243, 234, 0.5);
}

/* ── Aandachtsblok (bijv. gratis proeverij) ──────────────────────── */

.callout {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(32px, 4vw, 64px);
  background: var(--c-green);
  color: var(--c-text-inv);
}
@media (min-width: 880px) {
  .callout { grid-template-columns: 1.1fr 1fr; }
}
/* Het blok is diepgroen, dus alles erin heeft de lichte tinten nodig.
   Zonder deze regel valt het donkere messing van .overline weg (2,7:1). */
.callout .overline { color: var(--c-brass-bright); }
.callout__title { font-size: var(--t-2xl); color: var(--c-text-inv); margin-top: var(--s-4); }
.callout__text {
  margin-top: var(--s-4);
  color: rgba(247, 243, 234, 0.8);
  line-height: 1.7;
}
.callout__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); }
.callout .media { aspect-ratio: 4 / 3; }