/* ==========================================================================
   Section spacing & surfaces
   ========================================================================== */

:root {
	--section-gap: 40px;
	--section-gap-surface: 64px;
}

/* ---------- Reset ---------- */
.site-section,
.page-section,
.reviews-section,
.related-section,
.trust-section {
	margin: 0;
	padding: 0;
}

.content > .site-section {
	display: flow-root;
}

/* ---------- Achtergronden ---------- */
.site-section[data-surface="alt"],
.page-section--soft {
	background: var(--bg-soft);
}

.site-section[data-surface="dark"],
.reviews-section {
	background: var(--bg-dark);
}


/* Binnenruimte onder gekleurde secties */
.site-section[data-surface="alt"],
.site-section[data-surface="dark"] {
	padding-bottom: var(--section-gap-surface);
}

/* ---------- Zelfde surface ---------- */
.content > .site-section[data-surface="default"] + .site-section[data-surface="default"] {
	margin-top: var(--section-gap);
}

.content > .site-section[data-surface="alt"] + .site-section[data-surface="alt"],
.content > .site-section[data-surface="dark"] + .site-section[data-surface="dark"] {
	margin-top: 0;
	padding-top: var(--section-gap);
}

.content > .site-section[data-surface="alt"]:has(+ .site-section[data-surface="alt"]),
.content > .site-section[data-surface="dark"]:has(+ .site-section[data-surface="dark"]) {
	padding-bottom: 0;
}

/* ---------- Andere surface (overgang) ---------- */
/* Witte sectie vóór gekleurde sectie: padding-bottom voor witte ruimte */
.content > .site-section[data-surface="default"]:has(+ .site-section[data-surface="alt"]),
.content > .site-section[data-surface="default"]:has(+ .site-section[data-surface="dark"]) {
	padding-bottom: var(--section-gap-surface);
}

.content > .site-section[data-surface="default"] + .site-section[data-surface="alt"],
.content > .site-section[data-surface="default"] + .site-section[data-surface="dark"],
.home-hero + .content > .site-section:first-child[data-surface="alt"],
.home-hero + .content > .site-section:first-child[data-surface="dark"],
.page-hero + .content > .site-section:first-child[data-surface="alt"],
.page-hero + .content > .site-section:first-child[data-surface="dark"] {
	margin-top: 0;
	padding-top: var(--section-gap-surface);
}

.content > .site-section[data-surface="alt"] + .site-section[data-surface="default"],
.content > .site-section[data-surface="dark"] + .site-section[data-surface="default"] {
	margin-top: var(--section-gap-surface);
}

.content > .site-section[data-surface="alt"] + .site-section[data-surface="dark"],
.content > .site-section[data-surface="dark"] + .site-section[data-surface="alt"] {
	margin-top: 0;
	padding-top: var(--section-gap-surface);
}

.home-hero + .content > .site-section:first-child[data-surface="default"],
.page-hero + .content > .site-section:first-child[data-surface="default"] {
	margin-top: var(--section-gap-surface);
}

/* ---------- Afsluiting content ---------- */
.content > .site-section[data-surface="default"]:last-child {
	padding-bottom: var(--section-gap);
}

/* ---------- Hero → main (archief) ---------- */
.home-hero + main.page,
.page-hero + main.page {
	margin-top: var(--section-gap-surface);
}

main.page {
	padding-bottom: var(--section-gap);
}

main.page:has(> .detail-hero) {
	padding-top: 28px;
}

main.page:has(+ .content > .site-section) {
	padding-bottom: 0;
}

main.page + .content > .site-section:first-child[data-surface="default"] {
	margin-top: var(--section-gap-surface);
}

main.page + .content > .site-section:first-child[data-surface="alt"],
main.page + .content > .site-section:first-child[data-surface="dark"] {
	margin-top: 0;
	padding-top: var(--section-gap-surface);
}

/* ---------- Occasion detail (secties direct in main.page) ---------- */
main.page > .site-section[data-surface="alt"],
main.page > .site-section[data-surface="dark"] {
	padding-bottom: 0;
}

main.page > .trust-section {
	padding: 44px 0;
}

main.page > .page-section.site-section {
	padding: 56px 0;
}

main.page > .related-section {
	padding: 56px 0 20px;
}

.page-section ul{
	margin: 0 0 1em;
}
.page-section .text-block {
    margin: 0 auto;
}