/*
 * Opmaak voor de ACF-blokken "Punten met bolletjes", "Stappen",
 * "Redenen met icoon" en "Case met quote" (sinds thema 2.7).
 * Wordt via de EnqueueStyle-header van die blokken geladen,
 * zowel op de site als in de editor-preview.
 */
.blk-section, .blk-case { font-family: Poppins, sans-serif; }
.blk-section { max-width: 48rem; margin: 6rem auto 0; padding: 0 1.5rem; color: rgb(13 72 131); }
.blk-section--wide { max-width: 76rem; }
.blk-section--narrow { max-width: 42rem; }
.blk-title { font-size: 48px; line-height: 50px; font-weight: 600; text-align: center; margin: 0 0 1rem; color: rgb(13 72 131); }
.blk-lead { font-size: 25px; line-height: 1.6; text-align: center; margin: 0 0 2rem; }
.blk-lead--end { margin: 2rem 0 0; }
.blk-sub { font-size: 16px; text-align: center; margin: 0 0 1.5rem; }

/* Punten met bolletjes */
.blk-box { background: #f3f3f3; padding: 2rem 1.5rem; }
.blk-dots { list-style: none; margin: 0; padding: 0; }
.blk-dots > li { position: relative; min-height: 2.5rem; padding: .375rem 0 0 4rem; margin: 0 0 1.5rem; font-size: 18px; line-height: 1.4; }
.blk-dots > li:last-child { margin-bottom: 0; }
.blk-dots > li::before { content: ''; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #F2C74E; }
.blk-dots strong { display: block; font-size: 20px; padding-bottom: .375rem; }

/* Stappen */
.blk-steps { display: grid; gap: 3rem; margin: 3.5rem 0 0; padding: 0 1rem; list-style: none; }
.blk-step { position: relative; background: #f3f3f3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 320px; padding: 2rem; }
.blk-step__nr { position: absolute; left: -1rem; top: -1rem; width: 3.5rem; height: 3.5rem; line-height: 3.5rem; border-radius: 9999px; background: #F2C74E; color: rgb(13 72 131); font-weight: 700; font-size: 25px; text-align: center; }
.blk-step img { width: 8rem; height: 8rem; object-fit: contain; margin: 0 0 1.5rem; }
.blk-step p { font-size: 20px; line-height: 24px; margin: 0; }

/* Redenen met icoon */
.blk-reasons { margin: 2rem 0 0; padding: 0; list-style: none; }
.blk-reason { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0; }
.blk-reason img { flex: 0 0 6rem; width: 6rem; height: 6rem; object-fit: contain; }
.blk-reason__title { font-size: 25px; line-height: 32px; font-weight: 700; margin: 0; }
.blk-reason__text { font-size: 20px; line-height: 24px; margin: .5rem 0 0; }

/* Case met quote */
.blk-case { max-width: 64rem; margin: 6rem auto 0; background: #f3f3f3; padding: 3rem 1.5rem; color: rgb(13 72 131); }
.blk-case__grid { display: grid; gap: 2.5rem; }
.blk-case__title { font-size: 36px; line-height: 42px; font-weight: 600; margin: 0 0 .5rem; }
.blk-case__text { font-size: 20px; line-height: 1.625; margin: 0 0 2rem; }
.blk-case__stats { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 3rem; row-gap: 1.5rem; margin: 0 0 2rem; }
.blk-case__num { font-size: 50px; line-height: 50px; font-weight: 700; margin: 0 0 .25rem; }
.blk-case__label { font-size: 20px; line-height: 24px; margin: 0; }
.blk-case__quote { display: flex; flex-direction: column; justify-content: center; border-top: 2px solid #F2C74E; padding-top: 2.5rem; }
.blk-case__quote blockquote { margin: 0; font-weight: 700; font-size: 25px; line-height: 1.625; }
.blk-case__person { display: flex; align-items: center; gap: 1.5rem; margin: 1.5rem 0 0; }
.blk-case__person img { flex: 0 0 6rem; width: 6rem; height: 6rem; border-radius: 9999px; object-fit: cover; }
.blk-case__person p { font-size: 20px; line-height: 1.4; margin: 0; }

@media (max-width: 767px) {
	.blk-title { font-size: 34px; line-height: 40px; }
	.blk-lead { font-size: 20px; }
	.blk-case__title { font-size: 30px; line-height: 36px; }
}
@media (min-width: 768px) {
	.blk-box { padding: 2rem 3rem; }
	.blk-steps { grid-template-columns: repeat(var(--cols-md, 2), 1fr); }
	.blk-case { padding: 3rem; }
	.blk-case__grid { grid-template-columns: 1fr 1fr; gap: 0; }
	.blk-case__main { padding-right: 3rem; }
	.blk-case__quote { border-top: 0; padding-top: 0; border-left: 2px solid #F2C74E; padding-left: 3rem; }
}
@media (min-width: 1100px) {
	.blk-steps { grid-template-columns: repeat(var(--cols-lg, 4), 1fr); gap: 2.5rem; }
}