/*
 * Generieke pagina-styling (context 'page'): gedeelde pagina-hero + basis
 * voor de contentzone. Pagina-specifieke secties staan in page-<slug>.css
 * (conditioneel geladen, gescoped op body.page-<slug> of eigen blokclasses).
 */

/* ---------- Pagina-hero (Figma: foto 1920×678, titel 80px op y≈304) ---------- */
.spk-page-hero {
	position: relative;
	min-height: 678px;
	display: flex;
}
.spk-page-hero--plain {
	min-height: 360px;
	background: var(--spk-bg-dark);
}
.spk-page-hero__media,
.spk-page-hero__media img,
.spk-page-hero__scrim,
.spk-page-hero__fade {
	position: absolute;
	inset: 0;
}
.spk-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.spk-page-hero__scrim { background: rgba(0, 0, 0, 0.2); }
.spk-page-hero__fade { background: linear-gradient(to bottom, rgba(33, 33, 33, 0), #212121); }
.spk-page-hero__inner {
	position: relative;
	width: 100%;
	max-width: calc(var(--spk-content) + 48px);
	margin-inline: auto;
	padding: 304px 24px 0;
}
.spk-page-hero--plain .spk-page-hero__inner { padding-top: 200px; }
.spk-page-hero__title {
	font-size: 80px;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	min-height: 1.2em; /* ruimte reserveren voor het typ-effect */
}
.spk-page-hero__intro {
	max-width: 730px;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 26px;
}

/* ---------- Fallback-contentzone (pagina's zonder eigen template) ---------- */
.spk-page-content {
	max-width: calc(var(--spk-content) + 48px);
	margin-inline: auto;
	padding: 56px 24px 96px;
}
.spk-page-content > * { max-width: 860px; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
	.spk-page-hero { min-height: 560px; }
	.spk-page-hero__inner { padding-top: 240px; }
	.spk-page-hero__title { font-size: 64px; }
}
@media (max-width: 1100px) {
	.spk-page-hero { min-height: 440px; }
	/* padding-bottom = ondergrens lucht onder de herotekst: pagina's met een
	   lange intro (vloertegels/wandtegels) lieten de laatste tekstregel exact
	   op de onderrand van de hero eindigen, waardoor er maar ~40px tot de kop
	   van de volgende sectie overbleef. De padding groeit de hero alléén als
	   de tekst voorbij de min-height komt; pagina's met ruimte over (projecten,
	   showroom, contact, bedankt) veranderen er niet van. Pagina-CSS overschrijft
	   alleen padding-top, dus deze ondergrens blijft overal staan. */
	.spk-page-hero__inner { padding-top: 190px; padding-bottom: 40px; }
	.spk-page-hero__title { font-size: 48px; }
}
@media (max-width: 640px) {
	.spk-page-hero { min-height: 360px; }
	.spk-page-hero__inner { padding-top: 150px; }
	.spk-page-hero__title { font-size: 34px; min-height: 0; }
	.spk-page-hero--plain { min-height: 240px; }
	.spk-page-hero--plain .spk-page-hero__inner { padding-top: 130px; }
}