/* ==========================================================================
   Blok: USP-kaarten (troeven) — rij kaartjes met icoonchip, kop en regel tekst
   ========================================================================== */

.usp-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 720px) {
	.usp-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* Bij een ander aantal dan drie het rooster laten meebewegen */
.usp-cards[data-count="1"] { grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.usp-cards[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
	.usp-cards[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.usp-cards[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}

.usp-card {
	background: var(--paper);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-m);
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.usp-card__chip {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-s);
	background: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.usp-card__chip svg {
	width: 22px;
	height: 22px;
	color: var(--ink);
}

.usp-card h3 {
	font-size: 1.02rem;
	color: var(--ink);
	margin-bottom: 4px;
}
.usp-card p {
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(var(--ink-rgb), 0.65);
	margin: 0;
}

/* Op donkere secties blijft de kaart zelf wit, dus de tekst ook donker */
.bg-blauw .usp-card h3,
.bg-donker .usp-card h3 { color: var(--ink); }
.bg-blauw .usp-card p,
.bg-donker .usp-card p { color: rgba(var(--ink-rgb), 0.65); }