/* Oude inhoud (legacy: true) in het donkere ontwerp (herontwerp 2026-09-27). Alleen geladen op gemigreerde
   pagina's. De structuur komt uit migrate-pages.mjs; hier alleen vorm. Emoji in oude inhoud blijven tot plan 3/4
   de pagina herschrijft. */

/* Secties over de volle breedte, afwisselend zwart en vlak; --centreer houdt de inhoud in de kolom */
main > :is(section, article, .container, .hero) { padding-inline: var(--centreer); padding-block: var(--sectie-ruimte); margin: 0; }
main > :is(section, article, .container):nth-child(even) { background: var(--vlak); }
main > .hero { padding-block: var(--ruimte-16) var(--ruimte-12); border-bottom: 1px solid var(--lijn); }
main > .hero h1 { max-width: 20ch; }
main :is(h1, h2, h3) em { font-style: normal; color: var(--goud); }
main img { border-radius: var(--radius); }
main iframe { border: 0; display: block; }
main hr { border: 0; border-top: 1px solid var(--lijn); margin-block: var(--ruimte-8); }

.hero-badge, .section-eyebrow {
  display: inline-block; margin-bottom: var(--ruimte-3);
  font-family: var(--font-kop); font-weight: 700; font-size: var(--maat-label);
  letter-spacing: var(--spatiering-label); text-transform: uppercase; color: var(--tekst-zacht);
}
.section-eyebrow { color: var(--goud); }
.subtitle, .lead { color: var(--tekst-zacht); font-size: 1.125rem; max-width: 60ch; }
.hero-cta-group, .final-cta-buttons, .trip-cta-row, .segment-actions, .dienst-cta { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-block: var(--ruimte-6); }
.trust-strip, .usp-strip, .stats-strip { display: flex; flex-wrap: wrap; row-gap: var(--ruimte-2); margin-block: var(--ruimte-4); font-size: var(--maat-klein); color: var(--tekst-zacht); }
.trust-strip > *, .trust-item { display: inline-flex; align-items: center; }
.trust-strip > * + *::before { content: "·"; margin-inline: var(--ruimte-3); }

/* Richtprijslijsten: haarlijnen, bedrag in Manrope 800 en goud */
.pricelist { margin-block: var(--ruimte-4); border-top: 1px solid var(--lijn); }
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-4);
  padding: var(--ruimte-3) var(--ruimte-2); border-bottom: 1px solid var(--lijn);
  color: var(--tekst); text-decoration: none; transition: background-color 0.15s;
}
.price-row:hover { background: var(--vlak-hoog); color: var(--tekst); }
.price-route { display: flex; flex-direction: column; min-width: 0; }
.price-time, .pricelist-note, .price-note, .upd { font-size: var(--maat-klein); color: var(--tekst-zacht); }
.price-amount, .amount { font-family: var(--font-kop); font-weight: 800; font-size: 1.375rem; color: var(--goud); white-space: nowrap; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.currency { font-size: 0.7em; margin-right: 0.08em; }
.price-onaanvraag { font-family: var(--font-tekst); font-size: var(--maat-klein); font-weight: 600; color: var(--tekst-zacht); white-space: normal; }

/* Oude rasters: altijd volle rijen (spec §2.2). De kolomtelling volgt het aantal kaarten; een aantal dat niet
   deelt, blijft één kolom. */
main :is([class$="-grid"], [class*="-grid "]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); margin-block: var(--ruimte-6); }
@media (min-width: 640px) { main :is([class$="-grid"], [class*="-grid "]):has(> :last-child:nth-child(2n)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { main :is([class$="-grid"], [class*="-grid "]):has(> :last-child:nth-child(3n)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main :is([class$="-grid"], [class*="-grid "]):has(> :last-child:nth-child(4n)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.benefit { min-width: 0; padding-top: var(--ruimte-4); border-top: 1px solid var(--lijn); }
.benefit h3 { margin-top: var(--ruimte-3); }
.benefit-icon, .service-icon, .dienst-icon, .usecase-icon, .audience-icon {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--lijn); border-radius: var(--radius-klein); color: var(--goud);
}
main :is([class$="-card"], [class*="-card "]):not(.calc-cta-card) { min-width: 0; padding: var(--ruimte-6); background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-groot); }
main > :nth-child(even) :is([class$="-card"], [class*="-card "]) { background: var(--vlak-hoog); }

/* Veelgestelde vragen: legacy.js zet .open op .faq-item */
.faq-item { border-bottom: 1px solid var(--lijn); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-4);
  width: 100%; min-height: 44px; padding: var(--ruimte-4) 0; margin: 0; background: none; border: 0; text-align: left;
  font-family: var(--font-kop); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--tekst);
}
.faq-question::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--veldrand); border-radius: 50%; color: var(--goud); font-weight: 800; }
.faq-item.open .faq-question::after { content: "−"; }
.faq-question:hover { color: var(--goud); }
.faq-answer { display: none; padding-bottom: var(--ruimte-4); color: var(--tekst-zacht); }
.faq-item.open .faq-answer { display: block; }
.legacy-cta { text-align: center; margin: var(--ruimte-8) auto; max-width: none; }

main details:not(.calc-uitleg) { border-block: 1px solid var(--lijn); padding-block: var(--ruimte-3); margin-block: var(--ruimte-4); }
main summary { cursor: pointer; font-weight: 600; color: var(--accent-tekst); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--ruimte-4); }
.form-group { margin-bottom: var(--ruimte-4); min-width: 0; }
.form-group label { display: block; margin-bottom: var(--ruimte-1); font-size: var(--maat-klein); font-weight: 600; }

@media (max-width: 480px) {
  .hero-cta-group .btn, .final-cta-buttons .btn { flex: 1 1 100%; width: 100%; }
  .price-row { padding-inline: 0; }
  .price-amount { font-size: 1.1875rem; }
}