/* ==========================================================================
   Decopro — mobiele laag voor de klassieke pagina's
   Wordt enkel geladen onder 760px.

   Kern: op desktop wisselen beeld en tekst van kant om een zigzag te maken.
   Die wisseling zit in de DOM-volgorde, dus op mobiel — waar alles onder
   elkaar valt — staat het beeld nu eens boven en dan weer onder de titel.
   Hier leggen we één vaste opbouw vast: beeld, dan nummer, titel, tekst,
   knop. Elk blok leest daardoor als één kaart.
   ========================================================================== */

/* ------------------------------------------------- dienst- en inhoudsblok */
.split {
  display: flex; flex-direction: column; gap: 0;
  background: var(--white);
  border: 1px solid rgba(41,27,26,.1);
  border-radius: var(--radius);
  overflow: hidden;
}
/* het beeld staat altijd bovenaan, ongeacht de volgorde in de opmaak */
.split > figure { order: -1; margin: 0; border-radius: 0; }
.split > figure img { width: 100%; height: auto; object-fit: contain; }
.split > figure:hover img { transform: none; }

/* de tekstkolom wordt de kaartinhoud */
.split > div { order: 1; padding: 1.6rem 1.4rem 1.8rem; }
.split > div .eyebrow { margin-bottom: .5rem; }
.split > div h2 { font-size: clamp(1.5rem, 6.6vw, 2rem); }
.split > div .lead { margin-top: .8rem !important; font-size: 1rem; }
.split > div p { max-width: none; }
.split > div .checklist { margin-top: 1.1rem; }
.split > div .hero-actions { margin-top: 1.4rem !important; }
/* alle kaarten krijgen dezelfde knop: één herkenbaar raakvlak per item */
.split > div .hero-actions .btn {
  width: 100%; text-align: center; justify-content: center;
  background: var(--espresso); color: var(--bone); border-color: var(--espresso);
}
.section-dark .split > div .hero-actions .btn {
  background: var(--bone); color: var(--espresso); border-color: var(--bone);
}

/* op donkere secties krijgt de kaart de donkere basis */
.section-dark .split { background: rgba(255,255,255,.04); border-color: rgba(246,243,237,.16); }

/* secties dichter op elkaar zodat de kaarten als reeks lezen */
main > section:not(.hero) { padding: 2.6rem 0 !important; min-height: 0 !important; }
main > section.sectie-galerij { padding-bottom: 6px !important; }
/* ingebedde scrollvideo op klassieke pagina's */
main > section.xp { padding: 0 !important; min-height: 0 !important; }
.geen-hero main > section:first-child { padding-top: 7.5rem !important; }
.xp-embed .xp-track { height: 170svh; }
main > section.hero { padding: 0 !important; }
.section-head { margin-bottom: 1.6rem; }

/* ------------------------------------------------------------- toepassing */
/* rijen op de FORCRETE-pagina volgen dezelfde regel: beeld eerst */
.app-row { display: flex; flex-direction: column; gap: 0; padding: 0 0 2rem; }
.app-row > figure { order: -1; border-radius: var(--radius) var(--radius) 0 0; }
.app-row > div { order: 1; padding: 1.4rem 1.4rem 0; }
.app-row:nth-child(even) figure { order: -1; }

/* --------------------------------------------------------------- werkwijze */
.steps { grid-template-columns: 1fr; gap: 1.8rem; }

/* ------------------------------------------------------------------- hero */
.hero.hero-short { min-height: 52svh; }
.hero-min .hero-inner { padding-bottom: clamp(1.6rem, 6vh, 3rem); }
.hero-min h1 {
  font-size: clamp(1.8rem, 8.6vw, 2.6rem);
  letter-spacing: .12em;                 /* minder tracking: lange woorden als 'Totaalcoordinatie' moeten passen */
  hyphens: manual;                       /* respecteert ­ in lange titels */
}

/* -------------------------------------------------------------------- faq */
.faq summary { gap: 1rem; padding: 1.15rem 0; font-size: 1rem; }
.faq details p { padding-bottom: 1.2rem; }

/* --------------------------------------------------------------- galerijen */
.gallery { column-count: 1; }