/* USP Block - frontend styling
 * Scoped under .wb-usp so nothing leaks into the rest of the site.
 * Self-contained: no framework or icon font required.
 */

.wb-usp {
	--wb-usp-blue: var(--color-primary-600, #2f86eb);
	--wb-usp-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
	--wb-usp-navy: var(--color-primary-950, #0f2a4a);
	--wb-usp-ink: #46586f;
	--wb-usp-border: rgba(15, 42, 74, 0.08);
	padding: clamp(2rem, 5vw, 5rem) 0;
}

/* Breedte, centrering en kantlijn komen van de template's eigen .grid-
 * container-class op hetzelfde element (zie view.php: class="wb-usp-inner
 * grid-container") - dat garandeert exacte uitlijning met de rest van de
 * pagina op elk breakpoint, ook als de template die waarden ooit aanpast. */

/* ---- Section heading --------------------------------------------------- */
.wb-usp-head {
	max-width: 46rem;
	margin: 0 0 clamp(1.6rem, 4vw, 3rem);
	/* Links uitgelijnd (geen auto-marge) - dezelfde 35px "ademruimte" die
	 * .section-content elders op de site ook geeft aan een sectiekop, zodat
	 * deze titel exact even ver inspringt als andere linksuitgelijnde
	 * secties op dezelfde pagina. */
	padding-left: 35px;
}
@media (max-width: 1023px) {
	.wb-usp-head {
		padding-left: 15px;
	}
}

.wb-usp-intro {
	color: var(--wb-usp-blue);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

/* Geen eigen titelopmaak meer (v1.0.8). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .wb-usp-title/-line1/-line2 gaven dit blok een eigen
 * lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
 * meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */

.wb-usp-lead {
	color: var(--wb-usp-ink);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.7;
	max-width: 34em;
}

.wb-usp-lead p { margin: 0 0 0.6em; }
.wb-usp-lead p:last-child { margin-bottom: 0; }

/* ---- Card grid --------------------------------------------------------- */
.wb-usp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 1.75rem);
}

.wb-usp--cols-2 .wb-usp-grid { grid-template-columns: repeat(2, 1fr); }
.wb-usp--cols-3 .wb-usp-grid { grid-template-columns: repeat(3, 1fr); }
.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: repeat(4, 1fr); }

/* ---- Cards ------------------------------------------------------------- */
.wb-usp-card {
	background: #fff;
	border: 1px solid var(--wb-usp-border);
	border-radius: 18px;
	padding: clamp(1.4rem, 2.4vw, 1.75rem);
	box-shadow: 0 10px 30px rgba(15, 42, 74, 0.06);
	/* reveal-on-scroll start state */
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
}

/* Stagger the cards slightly as the block reveals */
.wb-usp-card:nth-child(2) { transition-delay: 80ms; }
.wb-usp-card:nth-child(3) { transition-delay: 160ms; }
.wb-usp-card:nth-child(4) { transition-delay: 240ms; }
.wb-usp-card:nth-child(5) { transition-delay: 320ms; }
.wb-usp-card:nth-child(6) { transition-delay: 400ms; }

.wb-usp.is-visible .wb-usp-card {
	opacity: 1;
	transform: translateY(0);
}

.wb-usp-card-icon {
	margin-bottom: 1.1rem;
}

.wb-usp-card-icon img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.wb-usp-card-title {
	color: var(--wb-usp-navy);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.wb-usp-card-text {
	color: var(--wb-usp-ink);
	font-size: 0.98rem;
	line-height: 1.65;
}

.wb-usp-card-text p { margin: 0 0 0.5em; }
.wb-usp-card-text p:last-child { margin-bottom: 0; }

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
	.wb-usp-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.wb-usp--cols-3 .wb-usp-grid,
	.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.wb-usp-grid,
	.wb-usp--cols-2 .wb-usp-grid,
	.wb-usp--cols-3 .wb-usp-grid,
	.wb-usp--cols-4 .wb-usp-grid { grid-template-columns: 1fr; }
}

/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
 * container-class op hetzelfde element (view.php: class="wb-usp-inner
 * grid-container") - zie de toelichting bovenaan dit bestand. Wordt dit blok
 * ooit buiten dit template gebruikt, dan ontbreekt .grid-container's CSS en
 * valt de breedte terug op 100%; voeg dan zelf een .grid-container-regel toe
 * in de omgeving waar dit blok draait, in plaats van hier weer een eigen
 * kopie bij te houden. */