/* ==========================================================================
   Blok: Tekst + beeld — twee kolommen, beeld links of rechts
   ========================================================================== */

.text-image__inner {
	display: grid;
	gap: 40px;
	align-items: center;
}
@media (min-width: 900px) {
	.text-image__inner {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}
	/* Beeld rechts: in de bron staat de tekst eerst, dus enkel omkeren als het
	   beeld links moet staan. Zo blijft de leesvolgorde in de HTML logisch. */
	.text-image--image-left .text-image__media { order: -1; }
}

.text-image__media { position: relative; }
.text-image__media picture { display: block; }
.text-image__media img {
	width: 100%;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
@media (min-width: 700px) {
	.text-image__media img { aspect-ratio: 4 / 3; }
}

/* Video krijgt voorrang op de afbeelding */
.text-image__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--donker);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.text-image__video iframe,
.text-image__video video,
.text-image__video embed,
.text-image__video object {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.text-image__text h2 {
	font-size: clamp(2rem, 3.4vw, 2.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}
.text-image__text .content p { margin-bottom: 16px; }
.text-image__text .content p:last-of-type { margin-bottom: 0; }

.text-image__text .buttons { margin-top: 24px; }

/* Zonder beeld (of video) mag de tekst de volle breedte innemen */
.text-image--text-only .text-image__inner { grid-template-columns: 1fr; }
.text-image--text-only .text-image__text { max-width: 68ch; }