/*
 * KW Biohof – Video-Widget. Selbst gehostetes Video (natives <video controls>)
 * mit Vorschaubild, optionalen Untertiteln und aufklappbarem Transkript
 * (natives <details>, sanftes CSS-Aufklappen wie im FAQ-Widget).
 *
 * Komplett ohne JS. Alle Farben aus Tokens; lokale --biohof-video-* mit
 * Marken-Fallback, vom Stil-Tab überschreibbar. Kein !important. Format und
 * Einpassung steuert der Stil-Tab über --biohof-video-aspect / --biohof-video-fit.
 */

.biohof-video {
	--biohof-video-max: 720px;
	--biohof-video-info-width: 20rem;
	--biohof-video-aspect: 16 / 9;
	--biohof-video-fit: cover;
	--biohof-video-radius: var(--biohof-radius-md);
	--biohof-video-text-color: var(--biohof-color-text);
	--biohof-video-caption-color: var(--biohof-color-text-strong);
	--biohof-video-accent-color: var(--biohof-color-primary);
	--biohof-video-surface: var(--biohof-color-surface-soft);
	--biohof-video-border-color: var(--biohof-color-border);

	color: var(--biohof-video-text-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* ── Ausrichtbare Hülle (DIV, nicht figure!) ──────────────────────────────────────
   Die Breitenbegrenzung + Ausrichtung sitzt bewusst auf einem schlichten <div>:
   Elementor erzwingt `figure { margin: 0 }` mit hoher Spezifität (0,4,1) und würde
   jede Zentrierung auf der <figure> schlagen. Ein Block-<div> trifft diese Regel
   nicht – klassische Block-Zentrierung (max-inline-size + margin-inline:auto) greift
   verlässlich und richtet den GANZEN Videoblock aus (Überschrift bleibt unberührt). */
.biohof-video__inner {
	margin: 0;
	/* Reagiert auf die eigene Breite – die Container Query schaltet „neben/unter". */
	container-type: inline-size;
	container-name: biohof-video;
	max-inline-size: var(--biohof-video-max);
}

/* Info neben dem Video: die Hülle nimmt Player + Info-Spalte auf. */
.biohof-video--info-beside.biohof-video--has-info .biohof-video__inner {
	max-inline-size: calc(var(--biohof-video-max) + var(--biohof-video-info-width) + var(--biohof-space-xl));
}

/* Abstand zur optionalen Sektionsüberschrift darüber. */
.biohof-video__inner:not(:first-child) {
	margin-block-start: var(--biohof-space-lg);
}

.biohof-video--align-left .biohof-video__inner {
	margin-inline: 0 auto;
}

.biohof-video--align-center .biohof-video__inner {
	margin-inline: auto;
}

.biohof-video--align-right .biohof-video__inner {
	margin-inline: auto 0;
}

/* ── Layout: Player + Info (stapelt schmal, steht breit nebeneinander) ──────────── */
.biohof-video__layout {
	display: grid;
	gap: var(--biohof-space-lg);
}

/* Die Figur füllt ihre Spalte (Elementors figure-margin:0 ist hier folgenlos). */
.biohof-video__player {
	margin: 0;
	min-inline-size: 0;
}

@container biohof-video (min-width: 44rem) {
	.biohof-video--info-beside.biohof-video--has-info .biohof-video__layout {
		grid-template-columns: minmax(0, var(--biohof-video-max)) minmax(14rem, var(--biohof-video-info-width));
		align-items: start;
		column-gap: var(--biohof-space-xl);
	}
}

/* ── Rahmen + Player ──────────────────────────────────────────────────────────── */
.biohof-video__frame {
	overflow: clip;
	border-radius: var(--biohof-video-radius);
	background: #000;
	box-shadow: var(--biohof-shadow-md);
}

.biohof-video__media {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* „auto" (Original) → intrinsische Maße; sonst festes Format aus dem Stil-Tab. */
	aspect-ratio: var(--biohof-video-aspect, 16 / 9);
	object-fit: var(--biohof-video-fit, cover);
	background: #000;
}

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

/* Fallback-Hinweis (nur, wenn der Browser kein <video> kann). */
.biohof-video__fallback {
	margin: 0;
	padding: var(--biohof-space-md);
	color: #fff;
	background: color-mix(in srgb, #000 80%, transparent);
}

/* ── Info-Bereich (Titel, Metadaten, Beschreibung) ──────────────────────────────
   Steht je nach „Lage" neben oder unter dem Video. Immer linksbündig gesetzt
   (gut lesbar); die Ausrichtung verschiebt den ganzen Videoblock über die Hülle. */
.biohof-video__info {
	min-inline-size: 0;
	color: var(--biohof-video-text-color);
	text-align: start;
}

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

/* Metadaten (Laufzeit/Datum/Sprache) als kompakte, umbrechende Liste. */
.biohof-video__meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--biohof-space-2xs) var(--biohof-space-md);
	margin: var(--biohof-space-sm) 0 0;
	padding: 0;
	font-size: var(--biohof-fs-300);
}

.biohof-video__meta-item {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
}

.biohof-video__meta-label {
	margin: 0;
	font-weight: var(--biohof-weight-semibold);
	color: var(--biohof-video-caption-color);
}

.biohof-video__meta-value {
	margin: 0;
	color: var(--biohof-video-text-color);
	font-variant-numeric: tabular-nums;
}

/* Info-Titel – ein kurzer Marken-„Kicker" verankert ihn am Video. */
.biohof-video__caption {
	margin: 0;
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-500);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-video-caption-color);
	text-wrap: balance;
}

/* Optionale Akzentlinie über dem Titel (Schalter „Akzentlinie über dem Titel"). */
.biohof-video--title-accent .biohof-video__caption::before {
	content: "";
	display: block;
	inline-size: 1.75rem;
	block-size: 3px;
	margin-block-end: var(--biohof-space-xs);
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-video-accent-color);
}

/* Einladender Vorspann. */
.biohof-video__short {
	margin: var(--biohof-space-sm) 0 0;
	max-inline-size: 60ch;
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
	color: var(--biohof-video-text-color);
	text-wrap: pretty;
}

/* Ausführlicher Text – klar abgesetzt, lesbare Spaltenbreite. */
.biohof-video__long {
	margin-block-start: var(--biohof-space-md);
	max-inline-size: 66ch;
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
	color: color-mix(in srgb, var(--biohof-video-text-color) 88%, transparent);
	text-wrap: pretty;
}

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

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

/* Der Info-Bereich bleibt bewusst linksbündig (Lesbarkeit). Die Ausrichtung
   links/zentriert/rechts verschiebt den ganzen Videoblock über die Hülle. */

/* ── Transkript: natives <details>, sanftes CSS-Aufklappen (Muster wie FAQ) ────── */
.biohof-video__transcript {
	margin-block-start: var(--biohof-space-md);
	border: 1px solid var(--biohof-video-border-color);
	border-radius: var(--biohof-radius-md);
	overflow: clip;
	background: var(--biohof-video-surface);
}

.biohof-video__transcript-summary {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-sm);
	padding: var(--biohof-space-sm) var(--biohof-space-md);
	min-block-size: 44px;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-video__transcript-summary::-webkit-details-marker {
	display: none;
}

.biohof-video__transcript-summary::marker {
	content: "";
}

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

.biohof-video__transcript-label {
	flex: 1 1 auto;
	font-weight: var(--biohof-weight-medium);
	color: var(--biohof-video-caption-color);
}

/* Aufklapp-Indikator (kleiner Pfeil), dreht beim Öffnen. */
.biohof-video__transcript-indicator {
	position: relative;
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--biohof-video-accent-color);
}

.biohof-video__transcript-indicator::before {
	content: "";
	position: absolute;
	inset-block-start: 45%;
	inset-inline-start: 50%;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-inline-end: 2.5px solid currentColor;
	border-block-end: 2.5px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-video__transcript[open] .biohof-video__transcript-indicator::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}

@media (hover: hover) {
	.biohof-video__transcript:not([open]) .biohof-video__transcript-summary:hover {
		background-color: color-mix(in srgb, var(--biohof-video-accent-color) 10%, transparent);
	}
	.biohof-video__transcript:not([open]) .biohof-video__transcript-summary:hover .biohof-video__transcript-label {
		color: var(--biohof-video-accent-color);
	}
}

.biohof-video__transcript-body {
	padding: var(--biohof-space-2xs) var(--biohof-space-md) var(--biohof-space-md);
	color: var(--biohof-video-text-color);
	text-wrap: pretty;
}

.biohof-video__transcript-body > * {
	max-inline-size: 66ch;
}

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

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

/* ── Links in Meta/Transkript: Pink-Reset (Elementor-V4-Defense setzt
   color: inherit). Die a-Doppelung propagiert die Pseudo-Spezifität. ──────────── */
.biohof-video .biohof-video__long a,
.biohof-video .biohof-video__transcript-body a,
.biohof-video .biohof-video__fallback a {
	color: var(--biohof-video-accent-color);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--biohof-video-accent-color) 45%, transparent);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
}

.biohof-video.biohof-video .biohof-video__long a:is(:hover, :focus, :focus-visible, :active),
.biohof-video.biohof-video .biohof-video__transcript-body a:is(:hover, :focus, :focus-visible, :active),
.biohof-video.biohof-video .biohof-video__fallback a:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-primary-hover);
	text-decoration-color: var(--biohof-color-primary-hover);
}

.biohof-video.biohof-video .biohof-video__long a:focus-visible,
.biohof-video.biohof-video .biohof-video__transcript-body a:focus-visible,
.biohof-video.biohof-video .biohof-video__fallback a:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
}

/* ── Editor-Hinweise ──────────────────────────────────────────────────────────── */
.biohof-video__editor-hint {
	margin: var(--biohof-space-xs) 0 0;
	padding: var(--biohof-space-xs) var(--biohof-space-sm);
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-sm);
	background: var(--biohof-color-surface-soft);
}

.biohof-video--empty {
	padding: var(--biohof-space-md);
	color: var(--biohof-color-text);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
}

/* ── Sanftes Aufklappen des Transkripts (::details-content + Sofort-Fallback) ──── */
@supports (interpolate-size: allow-keywords) {
	.biohof-video__transcript {
		interpolate-size: allow-keywords;
	}

	.biohof-video__transcript::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size var(--biohof-duration) var(--biohof-ease),
			opacity var(--biohof-duration) var(--biohof-ease),
			content-visibility var(--biohof-duration) allow-discrete;
	}

	.biohof-video__transcript[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ── Bewegung reduzieren (BFSG) ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-video__transcript-summary,
	.biohof-video__transcript-indicator::before {
		transition: none;
	}
	@supports (interpolate-size: allow-keywords) {
		.biohof-video__transcript::details-content {
			transition: none;
		}
	}
}

/* ── Hoher Kontrast (Windows-Kontrastmodus) ──────────────────────────────────── */
@media (forced-colors: active) {
	.biohof-video__frame {
		border: 1px solid CanvasText;
		box-shadow: none;
	}
	.biohof-video__media:focus-visible {
		outline: 3px solid Highlight;
	}
	.biohof-video__transcript {
		border-color: CanvasText;
	}
}