/* ---------------------------------------------------------------------------
 * Blok: Tekst met icoon-kaarten.
 * Links een donkerblauwe afgeronde kaart met kop, tekst, attributie en een
 * brede knop; rechts vier witte kaarten met icoon, titel en korte tekst.
 * Maten komen rechtstreeks uit het Figma-ontwerp (desktop 1920, mobiel 390).
 * ------------------------------------------------------------------------- */

.blok-tekst-kaarten {
	padding-block: 60px;
}

.blok-tekst-kaarten__kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* --------------------------------------------------------------------------
 * Donkere tegel links
 * ------------------------------------------------------------------------ */

.blok-tekst-kaarten__tegel {
	display: flex;
	flex-direction: column;
	background: var(--c-donkerblauw);
	color: var(--c-wit);
	border-radius: var(--radius-sectie);
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%);
	padding: 47px 50px 37px;
}

.blok-tekst-kaarten__tegel-inhoud {
	padding-inline: 11px; /* tekst staat in het ontwerp 11px verder naar binnen dan de knop */
	margin-bottom: 69px;  /* ruimte tussen attributie en knop */
}

.blok-tekst-kaarten__titel {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.2; /* 48px bij 40px */
	color: var(--c-wit);
}

.blok-tekst-kaarten__tekst {
	margin-top: 31px;
	font-size: 20px;
	line-height: 32px;
}

.blok-tekst-kaarten__tekst p {
	margin: 0 0 32px;
}

.blok-tekst-kaarten__tekst p:last-child {
	margin-bottom: 0;
}

/* Attributie: streepje plus naam, zoals een citaat-ondertekening. */
.blok-tekst-kaarten__attributie {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 50px 0 0 -3px; /* streepje begint in het ontwerp net links van de tekstlijn */
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
}

.blok-tekst-kaarten__attributie::before {
	content: "";
	flex: none;
	width: 22px;
	height: 2px;
	background: var(--c-wit);
}

.blok-tekst-kaarten__knop {
	margin-top: auto; /* knop altijd onderaan de tegel */
}

.blok-tekst-kaarten__knop .knop {
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Witte icoon-kaarten rechts
 * ------------------------------------------------------------------------ */

.blok-tekst-kaarten__kaarten {
	display: grid;
	grid-auto-rows: minmax(168px, 1fr);
	gap: 15px;
}

.blok-tekst-kaarten__kaart {
	display: flex;
	align-items: center;
	gap: 37px;
	background: var(--c-wit);
	border-radius: var(--radius-sectie);
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%);
	padding: 20px 43px 20px 36px;
}

.blok-tekst-kaarten__kaart-icoon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 71px;
	height: 71px;
	border-radius: var(--radius);
	background: var(--c-blauw);
}

.blok-tekst-kaarten__kaart-icoon .icoon {
	display: flex;
}

.blok-tekst-kaarten__kaart-icoon svg {
	width: 45px;
	height: 45px;
}

.blok-tekst-kaarten__kaart-tekst {
	position: relative;
	top: 6px; /* tekstblok staat in het ontwerp net onder het optische midden */
}

.blok-tekst-kaarten__kaart-titel {
	margin: 0 0 9px;
	font-size: 18px;
	line-height: normal;
	font-weight: 700;
	text-transform: uppercase;
}

.blok-tekst-kaarten__kaart-omschrijving {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
}

/* --------------------------------------------------------------------------
 * Tablet: kolommen onder elkaar, kaarten houden hun desktopopmaak.
 * ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.blok-tekst-kaarten__kolommen {
		grid-template-columns: 1fr;
	}

	.blok-tekst-kaarten__kaarten {
		grid-auto-rows: auto;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel (ontwerp 390)
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-tekst-kaarten {
		padding-block: 40px;
	}

	.blok-tekst-kaarten__kolommen {
		gap: 18px;
	}

	.blok-tekst-kaarten__tegel {
		padding: 34px 30px 31px;
		border-radius: 20px; /* mobiele tegelradius uit het ontwerp */
	}

	.blok-tekst-kaarten__tegel-inhoud {
		padding-inline: 0;
		margin-bottom: 28px;
	}

	.blok-tekst-kaarten__titel {
		font-size: 22px;
		line-height: 28px;
	}

	.blok-tekst-kaarten__tekst {
		margin-top: 13px;
		font-size: var(--fs-body);
		line-height: 26px;
	}

	.blok-tekst-kaarten__tekst p {
		margin-bottom: 26px;
	}

	.blok-tekst-kaarten__attributie {
		gap: 7px;
		margin: 25px 0 0;
		font-size: 16px;
		line-height: normal;
	}

	.blok-tekst-kaarten__attributie::before {
		width: 13px;
	}

	.blok-tekst-kaarten__kaarten {
		gap: 13px;
	}

	.blok-tekst-kaarten__kaart {
		align-items: flex-start;
		gap: 20px;
		padding: 24px 20px;
		border-radius: 15px; /* mobiele kaartradius uit het ontwerp */
	}

	.blok-tekst-kaarten__kaart-icoon {
		width: 47px;
		height: 47px;
		border-radius: 7px;
	}

	.blok-tekst-kaarten__kaart-icoon svg {
		width: 30px;
		height: 30px;
	}

	.blok-tekst-kaarten__kaart-tekst {
		top: 0;
	}

	.blok-tekst-kaarten__kaart-titel {
		margin-bottom: 5px;
		font-size: 16px;
		text-transform: none;
	}

	.blok-tekst-kaarten__kaart-omschrijving {
		font-size: var(--fs-s);
		line-height: 24px;
	}
}