/**
 * PingPong Filmstreifen – Frontend-Styles
 *
 * Eine Quelle der Wahrheit für das Layout: --pp-fs-visible (Kacheln nebeneinander)
 * und --pp-fs-ratio (Seitenverhältnis). Das JS liest beide per getComputedStyle,
 * damit CSS und Skript nach einem Breakpoint-Wechsel nicht auseinanderlaufen.
 */

.pp-fs {
	--pp-fs-visible: 3;
	--pp-fs-ratio: 16 / 9;
	--pp-fs-gap: 10px;
	--pp-fs-accent: #e9495c;
	--pp-fs-frame-bg: #1a1628;
	--pp-fs-hole-color: #fff;
	--pp-fs-pad-top: 34px;
	--pp-fs-pad-bottom: 28px;

	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

.pp-fs *,
.pp-fs *::before,
.pp-fs *::after {
	box-sizing: border-box;
}

/* Kacheln nebeneinander als Klasse, nicht als Inline-Style: ein Inline-Style
   würde die Breakpoints weiter unten überstimmen, und der Streifen bliebe auf
   dem Handy dreispaltig. */
.pp-fs--v2 { --pp-fs-visible: 2; }
.pp-fs--v3 { --pp-fs-visible: 3; }
.pp-fs--v4 { --pp-fs-visible: 4; }

/* ---- Streifen mit Perforation ---- */

.pp-fs-strip {
	position: relative;
	padding: var(--pp-fs-pad-top) 0 var(--pp-fs-pad-bottom);
	overflow: hidden;
	background-color: var(--pp-fs-accent);
}

.pp-fs-strip::before,
.pp-fs-strip::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 13px;
	z-index: 3;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		var(--pp-fs-hole-color) 0px, var(--pp-fs-hole-color) 14px,
		transparent 14px, transparent 28px
	);
	background-size: 28px 13px;
}

.pp-fs-strip::before { top: 9px; }
.pp-fs-strip::after  { bottom: 7px; }

.pp-fs--no-sprocket .pp-fs-strip::before,
.pp-fs--no-sprocket .pp-fs-strip::after {
	display: none;
}

.pp-fs--no-sprocket .pp-fs-strip {
	--pp-fs-pad-top: 10px;
	--pp-fs-pad-bottom: 10px;
}

/* ---- Viewport + Track ---- */

.pp-fs-viewport {
	position: relative;
	overflow: hidden;
}

.pp-fs-track {
	display: flex;
	gap: var(--pp-fs-gap);
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.pp-fs-track { transition: none; }
}

/* ---- Kachel: Höhe folgt der Breite, nicht umgekehrt ---- */

.pp-fs-frame {
	flex: 0 0 calc((100% - (var(--pp-fs-visible) - 1) * var(--pp-fs-gap)) / var(--pp-fs-visible));
	aspect-ratio: var(--pp-fs-ratio);
	height: auto;
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--pp-fs-frame-bg);
	overflow: hidden;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: filter 0.2s ease;
}

.pp-fs-frame:hover { filter: brightness(1.1); }

.pp-fs-frame:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

@media (max-width: 900px) {
	.pp-fs, .pp-fs--v2, .pp-fs--v3, .pp-fs--v4 { --pp-fs-visible: 2; }
}

@media (max-width: 480px) {
	.pp-fs, .pp-fs--v2, .pp-fs--v3, .pp-fs--v4 { --pp-fs-visible: 1; }
}

/* ---- Thumbnail ---- */

.pp-fs-thumb {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--pp-fs-frame-bg);
}

/* Platzhalter, solange kein Poster da ist (oder die API nicht antwortet) */
.pp-fs-thumb:not([style*="background-image"]) {
	background-image: linear-gradient(135deg, #2e2848 0%, #0e0c1a 100%);
}

/* ---- Overlay + Play ---- */

.pp-fs-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: background 0.2s ease;
}

.pp-fs-frame:hover .pp-fs-overlay,
.pp-fs-frame:focus-visible .pp-fs-overlay {
	background: rgba(20, 16, 40, 0.28);
}

.pp-fs-play {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, background 0.2s ease;
	flex-shrink: 0;
}

.pp-fs-frame:hover .pp-fs-play,
.pp-fs-frame:focus-visible .pp-fs-play {
	transform: scale(1.12);
	background: #fff;
}

.pp-fs-play::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 16px;
	border-color: transparent transparent transparent var(--pp-fs-accent);
	margin-left: 4px;
}

@media (max-width: 480px) {
	.pp-fs-play { width: 46px; height: 46px; }
}

/* Titel steht im Markup (SEO/Screenreader), sichtbar ist er in der Lightbox */
.pp-fs-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Pfeile ---- */

.pp-fs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	transition: background 0.2s, transform 0.2s;
	font-size: 0;
	padding: 0;
}

.pp-fs-nav:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.pp-fs-nav--prev { left: 10px; }
.pp-fs-nav--next { right: 10px; }

.pp-fs-nav::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2.5px solid #333;
	border-right: 2.5px solid #333;
	border-radius: 1px;
	flex-shrink: 0;
}

.pp-fs-nav--prev::before { transform: rotate(-135deg) translate(-2px, 2px); }
.pp-fs-nav--next::before { transform: rotate(45deg) translate(-2px, 2px); }

/* Zu wenige Filme für ein Karussell: Pfeile weg, Streifen steht still.
   Die Klone müssen dann mit weg – sonst füllen sie die freien Kacheln und
   der erste Film erscheint doppelt. */
.pp-fs--static .pp-fs-nav { display: none; }
.pp-fs--static .pp-fs-frame[data-clone] { display: none; }

@media (max-width: 480px) {
	.pp-fs-nav { width: 36px; height: 36px; }
	.pp-fs-nav--prev { left: 6px; }
	.pp-fs-nav--next { right: 6px; }
}

/* ---- Lightbox (hängt am <body>, deshalb ohne .pp-fs-Präfixkontext) ---- */

.pp-fs-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(10, 8, 20, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.pp-fs-lb.is-open { display: flex; }
.pp-fs-lb *, .pp-fs-lb *::before, .pp-fs-lb *::after { box-sizing: border-box; }

.pp-fs-lb-inner {
	position: relative;
	width: 100%;
	max-width: min(1300px, calc(100vw - 40px));
	background: #14102a;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.pp-fs-lb-iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 90px);
	border: none;
	display: block;
	background: #000;
}

.pp-fs-lb-footer {
	padding: 10px 46px 10px 16px;
	background: #14102a;
}

.pp-fs-lb-title {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.pp-fs-lb-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: rgba(20, 16, 40, 0.75);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s;
}

.pp-fs-lb-close:hover { background: rgba(233, 73, 92, 0.9); }
.pp-fs-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }