/* ==========================================================================
   SUBPAGINA-SJABLOON — de vaste opbouw van elke dienst- en schadepagina.

   Gereconstrueerd uit de live site (binnen-schilderen, waterschade,
   stormschade — identieke opbouw). Zeven secties, altijd in deze volgorde:
     1 opening   2 uitleg   3 werkwijze   4 projecten   5 FAQ   6 CTA

   Alle kleuren/maten via tokens. Werkt samen met sections.css (eyebrow,
   dienst-, project-, stap-componenten) en components.css (FAQ, knoppen).
   ========================================================================== */

.wvs-subpagina > section {
	padding-block: var(--wvs-sectie);
}

/* Om-en-om een licht vlak, net als de live site */
.wvs-subpagina > section:nth-of-type(even) {
	background: var(--wvs-bg-zacht);
}

/* --- 1. Opening: tekst links, offerte-actie rechts ---------------------- */

.wvs-sub-opening__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-6);
	align-items: center;
}

@media (min-width: 992px) {
	.wvs-sub-opening__raster { grid-template-columns: 1.3fr 1fr; }
}

/* --- 2. Uitleg: tekst + beeld ------------------------------------------- */

.wvs-sub-uitleg__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-6);
	align-items: center;
}

@media (min-width: 992px) {
	.wvs-sub-uitleg__raster { grid-template-columns: 1fr 1fr; }
	.wvs-sub-uitleg__raster--beeld-links > figure { order: -1; }
}

.wvs-sub-uitleg__raster figure { margin: 0; }
.wvs-sub-uitleg__raster img {
	width: 100%;
	border-radius: var(--wvs-radius-vlak);
	box-shadow: var(--wvs-schaduw);
}

/* --- 3. Werkwijze: vier genummerde stappen ------------------------------ */
/* gebruikt .wvs-stap uit sections.css */

.wvs-sub-werkwijze__stappen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-6);
	margin-top: var(--wvs-ruimte-6);
}

@media (min-width: 600px) { .wvs-sub-werkwijze__stappen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .wvs-sub-werkwijze__stappen { grid-template-columns: repeat(4, 1fr); } }

/* --- 4. Projecten: automatisch overzicht -------------------------------- */
/* gebruikt .wvs-project uit sections.css; het vullen gebeurt in de Core
   plugin (query op projecten-CPT, gefilterd op categorie). */

.wvs-sub-projecten__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wvs-ruimte-5);
	margin-top: var(--wvs-ruimte-6);
}

@media (min-width: 600px) { .wvs-sub-projecten__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .wvs-sub-projecten__raster { grid-template-columns: repeat(3, 1fr); } }

/* --- 5. FAQ ------------------------------------------------------------- */
/* gebruikt .wvs-faq uit components.css. Op maximaal leesbare breedte. */

.wvs-sub-faq .wvs-faq { max-width: var(--wvs-container-smal); }

/* --- 6. CTA ------------------------------------------------------------- */
/* gebruikt .wvs-cta uit components.css. De totaalpartner-alinea over
   Woningafbouw staat er als losse regel onder. */

.wvs-sub-cta__partner {
	max-width: var(--wvs-container-smal);
	margin: var(--wvs-ruimte-5) auto 0;
	text-align: center;
	font-size: var(--wvs-fs-klein);
}

.wvs-sub-cta__partner a {
	color: #ffffff;
	text-decoration: underline;
	font-weight: var(--wvs-gewicht-kop);
}