/*
 * KW Biohof – Bild-+-Text-Widget. Mehrere Bild-Text-Blöcke, die nebeneinander
 * automatisch abwechselnd links/rechts stehen (Container Query) und auf schmaler
 * Breite untereinander rutschen. Komplett ohne JS – Wechsel, Einblenden und
 * Hover sind reines CSS. Alle Farben aus Tokens; lokale --biohof-mt-* mit
 * Marken-Fallback, vom Stil-Tab überschreibbar. Kein !important.
 */

.biohof-mt {
	--biohof-mt-media: 45%;
	--biohof-mt-align: center;
	--biohof-mt-aspect: 4 / 3;
	--biohof-mt-radius: var(--biohof-radius-lg);
	--biohof-mt-row-gap: var(--biohof-space-2xl);
	--biohof-mt-gap: var(--biohof-space-xl);
	--biohof-mt-text-color: var(--biohof-color-text);
	--biohof-mt-title-color: var(--biohof-color-text-strong);
	--biohof-mt-accent-color: var(--biohof-color-primary);
	--biohof-mt-cta-color: var(--biohof-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
	color: var(--biohof-mt-text-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* Innerer Query-Container (nicht der Widget-Root – Elementor-Konflikt). */
.biohof-mt__blocks {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--biohof-mt-row-gap);
}

/* Mobile First: Bild über Text. Abstand bewusst enger als zwischen den Blöcken. */
.biohof-mt__block {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-md);
}

/* Ab genug Breite: nebeneinander, im Wechsel. Alle Richtungsregeln leben hier,
   damit der mobile column-Default nicht von :nth-child überstimmt wird. */
@container (min-width: 40rem) {
	.biohof-mt__block {
		flex-direction: row;
		align-items: var(--biohof-mt-align);
		gap: var(--biohof-mt-gap);
	}

	.biohof-mt__block:nth-child(even) {
		flex-direction: row-reverse;
	}

	/* „Mit Bild rechts beginnen": Muster gespiegelt. */
	.biohof-mt--reverse-first .biohof-mt__block:nth-child(odd) {
		flex-direction: row-reverse;
	}
	.biohof-mt--reverse-first .biohof-mt__block:nth-child(even) {
		flex-direction: row;
	}

	.biohof-mt__media {
		inline-size: var(--biohof-mt-media);
		flex: none;
	}

	.biohof-mt__body {
		flex: 1 1 0;
	}
}

/* ── Bild ─────────────────────────────────────────────────────────────────────
   Die Figur clippt (overflow) und trägt Rundung + weichen Schatten für Tiefe;
   beim Überfahren des Blocks zoomt das Bild sanft im Rahmen und der Schatten
   vertieft sich – Leben wie in der Galerie, aber zurückhaltend. */
.biohof-mt__media {
	margin: 0;
	min-inline-size: 0;
	overflow: hidden;
	border-radius: var(--biohof-mt-radius);
	box-shadow: var(--biohof-shadow-sm);
	transition: box-shadow var(--biohof-duration) var(--biohof-ease);
}

.biohof-mt__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--biohof-mt-aspect);
	object-fit: cover;
	/* Ruhige Fläche, solange das Bild noch lädt. */
	background-color: var(--biohof-color-surface-soft);
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

@media (hover: hover) {
	.biohof-mt__block:hover .biohof-mt__media {
		box-shadow: var(--biohof-shadow-md);
	}
	.biohof-mt__block:hover .biohof-mt__img {
		transform: scale(1.04);
	}
}

/* ── Optionale Lightbox: Bild als Vergrößern-Link mit dezenter Lupe ────────────── */
.biohof-mt__zoom {
	display: block;
	position: relative;
	cursor: zoom-in;
	text-decoration: none;
	color: inherit;
}

.biohof-mt__zoom:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

/* Lupe oben rechts – konsistent mit Galerie/Katalog (Marken-Pille, Token-Farben).
   Klicks fallen durch auf den umschließenden Link. */
.biohof-mt__zoom-icon {
	position: absolute;
	inset-block-start: var(--biohof-space-xs);
	inset-inline-end: var(--biohof-space-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	color: var(--biohof-color-on-primary);
	background: color-mix(in srgb, var(--biohof-color-primary) 88%, transparent);
	border-radius: var(--biohof-radius-pill);
	opacity: 0;
	transform: translateY(-0.3rem);
	pointer-events: none;
	transition: opacity var(--biohof-duration) var(--biohof-ease),
		transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-mt__zoom-icon svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.biohof-mt__zoom:focus-visible .biohof-mt__zoom-icon {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: hover) {
	.biohof-mt__zoom:hover .biohof-mt__zoom-icon {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Textspalte ───────────────────────────────────────────────────────────── */
.biohof-mt__body {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-sm);
	min-inline-size: 0;
}

.biohof-mt__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-xs);
	margin: 0;
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--biohof-mt-accent-color);
}

/* Warme, kleine Akzentlinie vor der Einleitung. */
.biohof-mt__eyebrow::before {
	content: "";
	flex: none;
	inline-size: 1.6rem;
	block-size: 2px;
	border-radius: var(--biohof-radius-pill);
	background: currentColor;
}

.biohof-mt__title {
	margin: 0;
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-600);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-mt-title-color);
	text-wrap: balance;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Fließtext (kommt aus dem WYSIWYG-Editor, über wp_kses_post abgesichert). */
.biohof-mt__text {
	color: var(--biohof-mt-text-color);
	text-wrap: pretty;
}

.biohof-mt__text > :first-child {
	margin-block-start: 0;
}

.biohof-mt__text > :last-child {
	margin-block-end: 0;
}

.biohof-mt__text :where(p, ul, ol) {
	margin-block: 0 var(--biohof-space-sm);
}

.biohof-mt__text :where(ul, ol) {
	padding-inline-start: 1.25em;
}

.biohof-mt__text :where(li) {
	margin-block: 0.25em;
}

.biohof-mt__text :where(strong, b) {
	font-weight: var(--biohof-weight-bold);
}

/* Links im Fließtext: (0,2,1) im Ruhezustand schlägt Elementors Kit-Regel (0,1,1);
   für Hover Dreifach-Klasse + :is() gegen die V4-Link-Defense (0,3,1) – :is()
   propagiert die Pseudo-Spezifität (anders als :where()). Wie im Fließtext-Widget. */
.biohof-mt .biohof-mt__text a {
	color: var(--biohof-color-primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--biohof-color-primary) 45%, transparent);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
	transition:
		color var(--biohof-duration) var(--biohof-ease),
		text-decoration-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-mt.biohof-mt .biohof-mt__text a:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-primary-hover);
	text-decoration-color: var(--biohof-color-primary-hover);
}

/* ── Knopf (CTA) – freistehend ────────────────────────────────────────────────
   Plastik (Glanz/Relief/Hover-Fläche/Defense) aus assets/css/core/card-cta.css.
   Hier nur die Aufstellung (linksbündig, abgerundet, eigenes Padding) + die
   Knopffarbe aus dem Bild+Text-Token; der Hover-Lift bleibt widget-eigen. */
.biohof-mt__cta {
	--biohof-card-cta-color: var(--biohof-mt-cta-color);
	align-self: flex-start;
	margin-block-start: var(--biohof-space-2xs);
	padding: 0.7rem 1.4rem;
	border-radius: var(--biohof-radius-md);
}

.biohof-mt__cta-icon {
	display: inline-flex;
}

.biohof-mt__cta-icon svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

/* Freistehend: dezenter Hover-Lift (Fläche kommt geteilt). a-Doppelung (0,3,1)
   schlägt den geteilten Hover, damit der Schwebe-Schatten (shadow-md) dazukommt. */
@media (hover: hover) {
	.biohof a.biohof-mt__cta:hover {
		transform: translateY(-1px);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
			inset 0 -2px 0 color-mix(in srgb, var(--biohof-card-cta-color) 50%, black),
			var(--biohof-shadow-md);
	}

	.biohof-mt__cta:hover .biohof-mt__cta-icon {
		transform: translate(1px, -1px);
	}
}

/* ── Editor-Hinweis (leer) ─────────────────────────────────────────────────── */
.biohof-mt--empty {
	color: var(--biohof-color-text);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Jeder Block eigene Timeline
   → natürlicher Stagger ohne nth-child-Verzögerungen. ──────────────────────── */
@supports (animation-timeline: view()) {
	.biohof-mt--reveal .biohof-mt__block {
		animation: biohof-mt-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 40%;
	}
}

@keyframes biohof-mt-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-mt--reveal .biohof-mt__block {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.biohof-mt__cta,
	.biohof-mt__cta-icon,
	.biohof-mt__media,
	.biohof-mt__img,
	.biohof-mt__zoom-icon {
		transition: none;
	}
	.biohof-mt__block:hover .biohof-mt__img {
		transform: none;
	}
}