/* ============================================================
 * TEXT - IMAGE
 * Twee kolommen (tekst + beeld/video) op het section-grid.
 * De tekstbreedte komt uit de instelling; het beeld vult de rest.
 * ============================================================ */

.text-image > .section-wrapper{
	align-items: center;
}

.text-image--sticky > .section-wrapper{
	align-items: start;
}

.text-image__text .buttons{
	margin-top: var(--padding);
}

/* STICKY
   Beide kolommen zijn sticky. De langste kolom is even hoog als de rij en
   kan dus niet plakken: die scrolt gewoon mee. De kortste blijft staan tot
   de rij voorbij is. Zo hoef je vooraf niet te weten welke kolom wint. */
.text-image--sticky .text-image__text,
.text-image--sticky .text-image__image{
	position: sticky;
	top: var(--padding);
	align-self: start;
}

/* Het beeld schaalt licht op bij hover, net als in de loop-kaarten. Het
   bijsnijden gebeurt op de picture: die krijgt de ronding en houdt het
   opgeschaalde beeld binnen de kaders. */
.text-image__image picture{
	overflow: hidden;
	border-radius: var(--border-radius-medium);
}

.text-image__image img{
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--border-radius-medium);
	transition: transform var(--reveal-duration) var(--ease);
}

.text-image__image figure:hover img{
	transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce){
	.text-image__image img{ transition: none; }
	.text-image__image figure:hover img{ transform: none; }
}


/* TEKSTPADDING — extra lucht boven en onder de tekstkolom */
.text-image--text-padding .text-image__text{
	padding-block: calc(2 * var(--padding));
}


/* BEELD EVEN HOOG ALS DE TEKST
   De figure gaat uit de flow (absolute), zodat de rijhoogte enkel door de
   tekstkolom bepaald wordt. Het beeld vult die hoogte bijgesneden; het
   bijschrift blijft eronder staan. */
.text-image--match-height > .section-wrapper{
	align-items: stretch;
}
.text-image--match-height .text-image__image{
	position: relative;
	min-height: 0;
}
.text-image--match-height .text-image__image figure{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}
.text-image--match-height .text-image__image picture{
	flex: 1;
	min-height: 0;
}
.text-image--match-height .text-image__image img{
	height: 100%;
}


/* VIDEO (heeft voorrang op de afbeelding) */
.text-image__video{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--wash);
	border-radius: var(--border-radius-medium);
	overflow: hidden;
}
.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;
}


/* RESPONSIVE — kolommen stapelen via w* in structural.css */
@media screen and (max-width: 1200px){
	.text-image--sticky .text-image__text,
	.text-image--sticky .text-image__image{ position: static; }

	/* Gestapeld is er geen tekstkolom meer om de hoogte van over te nemen. */
	.text-image--match-height .text-image__image,
	.text-image--match-height .text-image__image figure{
		position: static;
	}
	.text-image--match-height .text-image__image img{ height: auto; }
	.text-image--text-padding .text-image__text{ padding-block: 0; }
}