/**
 * Sektion: Bild + Text
 *
 * Varianten (ohne Klassen für die Redaktion):
 *   Bildposition links/rechts → .media-text--reverse (Feld)
 *   Hochformat-Bild           → .media-text--portrait (automatisch)
 */
.media-text {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 5vw, 4.25rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-text__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.media-text__media img {
	aspect-ratio: 1 / 1.02;
	inline-size: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

@media (hover: hover) {
	.media-text__media:hover img {
		transform: scale(1.02);
	}
}

.media-text--reverse .media-text__media {
	order: 2;
}

.media-text__copy {
	min-inline-size: 0;
}

.media-text__title {
	margin-block-end: var(--stack-md);
}

.media-text .btn-group {
	margin-block-start: var(--stack-lg);
}

/*
 * Hochformat (Porträt-Freisteller): automatisch über das Seitenverhältnis.
 * Schmale Bildspalte, kein Zuschnitt; das Bild bleibt neben langem Text
 * im Blick (sticky unter dem Header).
 */
.media-text--portrait {
	align-items: start;
	grid-template-columns: minmax(0, var(--size-portrait)) minmax(0, var(--size-measure));
	justify-content: space-between; /* Bild an der Außenkante, Text in Lesebreite */
}

.media-text--portrait.media-text--reverse {
	grid-template-columns: minmax(0, var(--size-measure)) minmax(0, var(--size-portrait));
}

.media-text--portrait .media-text__media {
	inset-block-start: calc(var(--header-offset, 5rem) + var(--space-8));
	position: sticky;
}

.media-text--portrait .media-text__media img {
	aspect-ratio: var(--media-ratio, auto); /* aus den Bild-Metadaten */
	object-fit: contain;
}

/*
 * Produzentinnen: Format ist egal. Breite höchstens die Porträt-Spalte,
 * Höhe gedeckelt – sehr hohe Bilder werden schmaler statt riesig. Die
 * Bildbox schrumpft mit, damit die abgerundeten Ecken am Bild bleiben.
 */
.media-text--portrait .media-text__media {
	inline-size: fit-content;
	max-inline-size: 100%;
}

.media-text--portrait.media-text--reverse .media-text__media {
	justify-self: end;
}

.media-text--portrait .media-text__media img {
	block-size: auto;
	inline-size: auto;
	max-block-size: min(75vh, 36rem);
	max-inline-size: 100%;
}

@media (max-width: 48.75em) {
	.media-text,
	.media-text--portrait.media-text--reverse {
		gap: var(--space-8);
		grid-template-columns: 1fr;
	}

	.media-text--reverse .media-text__media {
		order: 0;
	}

	.media-text--portrait .media-text__media {
		max-inline-size: var(--size-portrait);
		position: static;
	}
}