/* ==========================================================================
   Section spacing & surfaces - Schildersbedrijf J. Bastiaansen
   ========================================================================== */

: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,
.section--soft {
	background: var(--bg-soft);
}

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

.site-section[data-surface="dark"] h2,
.site-section[data-surface="dark"] h3 {
	color: #ffffff;
}

.site-section[data-surface="dark"] p {
	color: rgba(255, 255, 255, 0.8);
}

/* 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) ---------- */
.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"],
.project-hero + .content > .site-section:first-child[data-surface="alt"],
.project-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"],
.project-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);
}

/* ---------- Detailpagina's (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;
}

/* ---------- CTA sections ---------- */
.cta-section {
	background: var(--bg-dark);
	color: #ffffff;
	padding: var(--section-gap-surface) 0;
	text-align: center;
}

.cta-section h2 {
	color: #ffffff;
	margin-bottom: 1rem;
}

.cta-section p {
	color: rgba(255, 255, 255, 0.8);
	max-width: 600px;
	margin: 0 auto 2rem;
}

.cta-section .btn-primary {
	background: var(--accent);
}

.cta-section .btn-primary:hover {
	background: var(--accent-dark);
}

/* ---------- Text content ---------- */
.page-section ul {
	margin: 0 0 1em;
}

.page-section .text-block {
	margin: 0 auto;
	max-width: 800px;
}