/*
 * 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; }
}

/* Stappen met uitleg (brede rijen, afbeelding afwisselend links/rechts, of compact in 2 kolommen) */
.blk-lead--small { font-size: 20px; max-width: 46rem; margin-left: auto; margin-right: auto; }
.blk-rows { list-style: none; margin: 2.5rem auto 0; padding: 0; display: grid; gap: 2rem; max-width: 60rem; }
.blk-row { display: grid; gap: 1rem; align-items: center; }
.blk-row__title { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; }
.blk-row__nr { flex: 0 0 3rem; width: 3rem; height: 3rem; line-height: 3rem; border-radius: 9999px; background: #F2C74E; color: rgb(13 72 131); font-size: 22px; font-weight: 700; text-align: center; }
.blk-row__nr--dot { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; }
.blk-row__body { font-size: 19px; line-height: 1.5; margin: .5rem 0 0 4rem; }
.blk-rows--dots .blk-row__body { margin-left: 3.5rem; }
.blk-row__media { display: flex; align-items: center; justify-content: center; }
.blk-row__media img { width: 13rem; max-width: 100%; height: auto; }
/* Compact: 2 kolommen, icoon links naast de tekst */
.blk-rows--grid { max-width: 68rem; gap: 2rem 3rem; }
.blk-rows--grid .blk-row { grid-template-columns: 6.5rem 1fr; gap: 1.25rem; align-items: start; }
.blk-rows--grid .blk-row__media { order: -1; }
.blk-rows--grid .blk-row__media img { width: 6.5rem; }
.blk-rows--grid .blk-row__title { font-size: 21px; }
.blk-rows--grid .blk-row__body, .blk-rows--grid.blk-rows--dots .blk-row__body { font-size: 17px; margin-left: 0; }
@media (max-width: 767px) {
	.blk-row__title { font-size: 22px; }
	.blk-row__body, .blk-rows--dots .blk-row__body { font-size: 18px; margin-left: 0; }
	.blk-row__media { order: -1; }
	.blk-row__media img { width: 10rem; }
	.blk-rows--grid .blk-row { grid-template-columns: 5rem 1fr; }
	.blk-rows--grid .blk-row__media img { width: 5rem; }
}
@media (min-width: 768px) {
	.blk-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
	.blk-row--flip .blk-row__text { order: 2; }
	.blk-rows--grid { grid-template-columns: 1fr 1fr; }
	.blk-rows--grid .blk-row { grid-template-columns: 6.5rem 1fr; gap: 1.25rem; }
	.blk-rows--grid .blk-row--flip .blk-row__text { order: 0; }
}

/* Afwisselend: grijs vlak achter de tekst, tot half onder het icoon (zoals de foto-blokken) */
.blk-rows:not(.blk-rows--grid) .blk-row { position: relative; padding: 1.75rem 1.5rem; }
.blk-rows:not(.blk-rows--grid) .blk-row::before { content: ''; position: absolute; inset: 0; background: #f3f3f3; z-index: 0; }
.blk-rows:not(.blk-rows--grid) .blk-row > * { position: relative; z-index: 1; }
@media (min-width: 768px) {
	.blk-rows:not(.blk-rows--grid) .blk-row { padding: 2.5rem 0; grid-template-columns: 3fr 2fr; }
	.blk-rows:not(.blk-rows--grid) .blk-row--flip { grid-template-columns: 2fr 3fr; }
	.blk-rows:not(.blk-rows--grid) .blk-row::before { right: auto; width: 80%; }
	.blk-rows:not(.blk-rows--grid) .blk-row--flip::before { left: auto; right: 0; }
	.blk-rows:not(.blk-rows--grid) .blk-row .blk-row__text { padding-left: 2.5rem; }
	.blk-rows:not(.blk-rows--grid) .blk-row--flip .blk-row__text { padding-left: 0; padding-right: 2.5rem; }
	.blk-rows:not(.blk-rows--grid) .blk-row__media img { width: 11rem; }
}

/* Stappen: optionele knop (2.9) */
.blk-steps__cta { text-align: center; margin: 3rem 0 0; }