/* Blok: USP-grid — items met vinkje/icoon + titel + tekst.
   Varianten (class in usps.php): --plain (kaarten, geen intro), --cards (labels-
   only icoon-kaarten), --with-intro (intro links + labels rechts), --intro-cards
   (gecentreerde intro + kaarten-grid). */
.block-usps { background: var(--amazing-bg); padding-block: 72px; }
.block-usps__title { font-size: clamp(28px, 2.2vw, 40px); margin-bottom: 40px; }
.block-usps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 48px; }
.block-usps__item { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; align-items: start; }
.block-usps__check { grid-row: span 2; line-height: 0; margin-top: 2px; }
/* Icoon-variant (uit ontwerp): recolorbaar CSS-mask in accentgoud. */
.block-usps__check--img {
	width: 58px; height: 58px; margin-top: 0;
	background-color: var(--amazing-accent);
	-webkit-mask: var(--usp-icon) center / contain no-repeat;
	        mask: var(--usp-icon) center / contain no-repeat;
}
.block-usps__item-title { font-family: var(--amazing-font-body); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 6px; }
.block-usps__item-text { font-size: 16px; line-height: 1.31; opacity: .88; margin: 0; }

/* ===== --plain: kaarten zonder intro. Standaard 2×2 (icoon links), band #161616. ===== */
.block-usps--plain { background: var(--amazing-footer); }
.block-usps--plain .block-usps__grid { gap: 22px; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); }
.block-usps--plain .block-usps__item {
	background: var(--amazing-bg); padding: 28px 34px; /* vierkante hoeken */
	align-items: center; gap: 7px 24px;
}
.block-usps--plain .block-usps__item-title { margin-bottom: 0; } /* gap titel->tekst uit rij-gap (Figma 7px) */

/* --plain met precies 3 items = MVO-pijlers: 3 op één rij, icoon bovenaan.
   Band lichter (#242424), kaarten donker (#161616) — conform ontwerp. */
.block-usps--plain:has(.block-usps__item:nth-child(3):last-child) { background: var(--amazing-bg); }
.block-usps--plain .block-usps__grid:has(.block-usps__item:nth-child(3):last-child) {
	grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 22px;
}
.block-usps--plain .block-usps__grid:has(.block-usps__item:nth-child(3):last-child) .block-usps__item {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	background: var(--amazing-footer); padding: 32px 34px;
}

/* ===== --with-intro: intro-paragraaf links, USP-labels rechts (sectorpagina's). ===== */
.block-usps--with-intro { background: var(--amazing-footer); } /* band #161616 (Figma), consistent op alle sectorpagina's */
.block-usps__intro { font-size: 16px; line-height: 1.6; margin-bottom: 30px; }
.block-usps__intro p { margin: 0 0 1em; }
.block-usps__intro p:last-child { margin-bottom: 0; }
.block-usps--with-intro .block-usps__inner { display: grid; grid-template-columns: 1.8fr 1fr; gap: 40px 90px; align-items: start; }
.block-usps--with-intro .block-usps__title { grid-column: 1 / -1; }
.block-usps--with-intro .block-usps__intro { margin-bottom: 0; line-height: 1.31; } /* 16px/21px (Figma) */
.block-usps--with-intro .block-usps__grid { grid-template-columns: 1fr; align-content: start; gap: 22px; }
.block-usps--with-intro .block-usps__item { grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
.block-usps--with-intro .block-usps__check { grid-row: auto; margin: 0; }
.block-usps--with-intro .block-usps__check--img { width: 40px; height: 40px; }
.block-usps--with-intro .block-usps__item-title { margin: 0; }

/* ===== --intro-cards: gecentreerde kop+intro + 2-koloms kaarten-grid (certificeringen). ===== */
.block-usps--intro-cards .block-usps__title { text-align: center; margin-bottom: 18px; }
.block-usps--intro-cards .block-usps__intro { text-align: center; max-width: 1322px; margin: 0 auto 40px; }
.block-usps--intro-cards .block-usps__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.block-usps--intro-cards .block-usps__item {
	background: var(--amazing-footer); padding: 30px 38px; /* vierkante hoeken, icoon links */
	column-gap: 24px; align-items: start;
}
.block-usps--intro-cards .block-usps__check--img { width: 52px; height: 52px; }

/* ===== --cards: gecentreerde icoon-kaartenrij (over ons "Waar wij voor staan").
   Bredere band zodat de 5 kaarten op één rij passen (conform ontwerp). ===== */
.block-usps--cards .block-usps__inner { text-align: center; max-width: calc(1486px + 2 * 40px); }
.block-usps--cards .block-usps__title { margin-bottom: 40px; }
.block-usps--cards .block-usps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.block-usps--cards .block-usps__item {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	background: var(--amazing-footer); /* vierkante hoeken */
	padding: 34px 24px;
}
.block-usps--cards .block-usps__check { grid-row: auto; margin: 0; }
.block-usps--cards .block-usps__check--img { width: 64px; height: 64px; }
.block-usps--cards .block-usps__check svg { width: 40px; height: 40px; }
.block-usps--cards .block-usps__item-title { margin: 0; font-size: 17px; }

@media (max-width: 900px) { .block-usps--with-intro .block-usps__inner { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 720px) {
	.block-usps__grid { grid-template-columns: 1fr; }
	.block-usps--plain .block-usps__grid { grid-auto-flow: row; grid-template-rows: none; }
	.block-usps--plain .block-usps__grid:has(.block-usps__item:nth-child(3):last-child) { grid-template-columns: 1fr; }
	.block-usps--intro-cards .block-usps__grid { grid-template-columns: 1fr; }
	.block-usps--cards .block-usps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
	.block-usps--cards .block-usps__grid { grid-template-columns: repeat(3, 1fr); }
}