/*
 * Videoreihe im Hochformat (eb/videos).
 *
 * Zwei Layouts, eine Regelmenge: Ab 900 px stehen bis zu vier Karten
 * nebeneinander, darunter wird dieselbe Reihe seitlich verschiebbar. Auf dem
 * Handy untereinander wären es vier Bildschirmhöhen, durch die niemand
 * scrollt – deshalb die Reihe, mit der nächsten Karte halb im Bild als
 * Hinweis, dass es weitergeht.
 *
 * Das Stylesheet wird als eigener Handle „ebc-videos“ angemeldet (siehe
 * inc/videos.php) und nicht über `file:./style.css`, damit es sich auch von
 * anderer Stelle anfordern lässt.
 */

.eb-videos {
	/* Der Innenabstand der Seite. Die Reihe bricht auf schmalen Schirmen genau
	   um diesen Betrag aus dem Textmaß aus, damit die Karten bis an den
	   Bildschirmrand scrollen statt vorher abzuschneiden. */
	--eb-videos-rand: var(--wp--style--root--padding-right, 20px);
	--eb-videos-radius: 22px;
}

.eb-videos__reihe {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-videos__eintrag {
	margin: 0;
	/* Der Kern rückt jede Liste ein; hier trägt die Karte ihre eigene Fläche. */
	padding: 0;
}

@media (max-width: 899px) {
	.eb-videos__reihe {
		grid-auto-columns: min(62vw, 260px);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--eb-videos-rand);
		margin-inline: calc(-1 * var(--eb-videos-rand));
		padding-inline: var(--eb-videos-rand);
		/* Platz für die Bildlaufleiste, damit sie nicht auf dem Titel liegt. */
		padding-bottom: 12px;
		gap: 14px;
	}

	.eb-videos__eintrag {
		scroll-snap-align: start;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Die Karte
 * ---------------------------------------------------------------------------
 */

/*
 * Das Raster legt die Laufzeit auf das Standbild, obwohl sie im Markup ganz
 * am Ende steht. Das ist Absicht: Die Markupreihenfolge ist die Reihenfolge,
 * in der eine Vorlesesoftware die Karte ansagt, und dort gehört „1:14“ hinter
 * den Titel und nicht davor. Rasterzuweisungen ändern nur das Bild.
 *
 * `position: relative` hält den nur vorgelesenen Text im Kasten – er ist
 * absolut positioniert und legte sich sonst irgendwo auf die Seite.
 */
.eb-video {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	text-decoration: none;
	color: inherit;
}

.eb-video__buehne {
	position: relative;
	grid-area: 1 / 1;
	display: block;
	aspect-ratio: 9 / 16;
	margin-bottom: 8px;
	border-radius: var(--eb-videos-radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--peach, #ffe9e3);
	box-shadow: var(--wp--preset--shadow--card, 0 18px 45px rgba(54, 24, 47, 0.09));
	transition: transform 0.25s var(--eb-ease, ease), box-shadow 0.25s var(--eb-ease, ease);
}

/*
 * Die Standbilder bleiben unbehandelt.
 *
 * Probiert und wieder verworfen: die Sättigung herunterzunehmen und einen
 * Markenverlauf darüberzulegen, um die vier Studiohintergründe – rosa,
 * pfirsich, creme – zu einer Reihe zu binden. Ein Verlauf quer über das Bild
 * setzt aber eine ruhige Fläche dahinter voraus; hier legte er sich mitten
 * über Paulinas Gesicht, und entsättigte Hauttöne sehen krank aus. Die Marke
 * steht in der Kennzeichnung über dem Titel, das reicht.
 */
.eb-video__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eb-video__knopf {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast, #201923);
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px rgba(32, 25, 35, 0.22);
	transition: transform 0.25s var(--eb-ease, ease), background-color 0.25s var(--eb-ease, ease);
}

.eb-video__knopf svg {
	/* Das Dreieck sitzt optisch links von der Mitte, wenn man es geometrisch
	   zentriert – die Spitze wiegt schwerer als die Grundlinie. */
	margin-left: 3px;
}

.eb-video__dauer {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	margin: 0 10px 18px 0;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background-color: rgba(32, 25, 35, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.eb-video__thema {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #ff0066);
}

.eb-video__titel {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.34;
	text-wrap: balance;
}

@media (hover: hover) {
	.eb-video:hover .eb-video__buehne {
		transform: translateY(-4px);
		box-shadow: var(--wp--preset--shadow--lifted, 0 24px 60px rgba(54, 24, 47, 0.12));
	}

	.eb-video:hover .eb-video__knopf {
		transform: scale(1.08);
		background-color: #fff;
	}
}

.eb-video:focus-visible {
	outline: none;
}

.eb-video:focus-visible .eb-video__buehne {
	outline: 3px solid var(--wp--preset--color--primary, #ff0066);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.eb-video__buehne,
	.eb-video__knopf {
		transition: none;
	}

	.eb-video:hover .eb-video__buehne {
		transform: none;
	}

	.eb-video:hover .eb-video__knopf {
		transform: none;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Die Bühne
 * ---------------------------------------------------------------------------
 *
 * Ein echtes <dialog>: Es bringt Fokusfalle, Escape-Taste und das Aussperren
 * des Hintergrunds für Vorlesesoftware selbst mit. Nachgebaut wäre das ein
 * Vielfaches an JavaScript – und meistens schlechter.
 */

.eb-videos__buehne {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.eb-videos__buehne::backdrop {
	background-color: rgba(24, 14, 26, 0.86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.eb-videos__abspieler {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 16px;
}

.eb-videos__abspieler video {
	aspect-ratio: 9 / 16;
	width: auto;
	/*
	 * Erst an der Höhe messen, dann an der Breite deckeln: Im Hochformat ist
	 * die Höhe fast immer das knappere Maß. `dvh` statt `vh`, weil auf dem
	 * Handy die Adresszeile mitzählt.
	 *
	 * Die beiden `calc()` sind nicht schmückend: Ohne sie verwirft der Browser
	 * die ganze Zeile, und dann steht das Video in seiner Eigengröße von
	 * 720 × 1280 da – auf einem 900 Pixel hohen Fenster also unten abgeschnitten.
	 */
	height: min( calc( 100dvh - 32px ), calc( ( 100vw - 32px ) * 16 / 9 ) );
	max-width: calc( 100vw - 32px );
	max-height: calc( 100dvh - 32px );
	border-radius: 18px;
	background-color: #000;
}

.eb-videos__schliessen {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.16);
	cursor: pointer;
	transition: background-color 0.2s var(--eb-ease, ease);
}

.eb-videos__schliessen:hover,
.eb-videos__schliessen:focus-visible {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Solange die Bühne offen ist, soll der Hintergrund nicht mitscrollen. */
.eb-videos-offen,
.eb-videos-offen body {
	overflow: hidden;
}

/*
 * Nur für Vorlesesoftware. Eigene Klasse statt `.screen-reader-text`: Die
 * gehört dem Kern, und ob sein Stylesheet auf einer Seite liegt, hängt daran,
 * welche Blöcke sonst noch darauf stehen.
 */
.eb-nur-vorleser {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}