/*
 * Pult „Heute auf dem Pult“ (nur Startseite): Tagesplan als Kanalzüge.
 * Regler oben = läuft, Mitte = kommt noch, unten = vorbei. Rot nur bei Live (LED, „↓ jetzt!“ wenn live gesendet wird).
 */

/* Die Startseiten-Spalte ist „constrained, linksbündig“ (max. 840 px, links); das Pult nimmt die breite Spalte */
.is-layout-constrained > .studio-pult {
	width: 100%;
	max-width: 1200px;
	margin: var(--wp--preset--spacing--70, 3rem) auto var(--wp--preset--spacing--60, 2rem) !important;
}

.studio-pult[hidden] { display: none; }

.studio-pult {
	--studio-fader-h: 150px;
	--studio-knob-h: 20px;
}

.studio-pult__desk {
	position: relative;
	padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--40, 1rem);
	background: linear-gradient(var(--studio-surface-2), oklch(18% 0.02 245));
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	color: var(--studio-text);
}

.studio-pult__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin-bottom: var(--wp--preset--spacing--30, 0.75rem);
}

.studio-pult__title {
	margin: 0;
	font: 800 var(--studio-step-2) / 1.1 var(--studio-font-text);
	color: var(--studio-text);
}

/* Kanalzüge */
.studio-pult__channels {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(104px, 1fr);
	gap: 2px;
	overflow-x: auto;
	padding: 2.75rem 2px var(--wp--preset--spacing--30, 0.75rem);
	scroll-snap-type: x proximity;
}

.studio-channel {
	position: relative;
	display: grid;
	grid-template-rows: auto auto var(--studio-fader-h) auto;
	justify-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--20, 0.5rem);
	border: 0;
	border-radius: var(--studio-radius-s);
	background: var(--studio-surface-3);
	color: var(--studio-text);
	font: inherit;
	cursor: pointer;
	scroll-snap-align: start;
	transition: background-color 150ms, opacity 300ms;
}

.studio-channel:hover { background: oklch(31% 0.024 245); }
.studio-channel[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--studio-brand); }
.studio-channel:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }
.studio-channel.is-past { opacity: 0.55; }
.studio-channel.is-past:hover,
.studio-channel.is-past[aria-pressed="true"] { opacity: 0.85; }

.studio-channel__tape {
	--studio-tilt: 0.6deg;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 2.6em;
	font-size: 0.8rem;
	text-align: center;
	overflow-wrap: anywhere;
}

.studio-channel:nth-child(2n) .studio-channel__tape { --studio-tilt: -0.8deg; }

.studio-channel__time {
	font-weight: 700;
	font-feature-settings: "tnum";
	color: var(--studio-text-2);
}

/* Fader: Schiene mit Kappe; Stellung über translate, damit nur transform animiert */
.studio-channel__fader {
	--studio-pos: 0.5;
	position: relative;
	width: 8px;
	border-radius: 4px;
	background: oklch(12% 0.01 245);
	box-shadow: inset 0 0 0 1px var(--studio-line);
}

.studio-channel.is-now .studio-channel__fader { --studio-pos: 1; }
.studio-channel.is-past .studio-channel__fader { --studio-pos: 0; }

.studio-channel__fader b {
	position: absolute;
	top: 0;
	left: 50%;
	width: 38px;
	height: var(--studio-knob-h);
	margin-left: -19px;
	border-radius: 2px;
	background: linear-gradient(oklch(70% 0.01 240), oklch(52% 0.01 240));
	box-shadow: 0 2px 4px oklch(0% 0 0 / 0.5), inset 0 -2px 0 oklch(40% 0 0);
	translate: 0 calc((1 - var(--studio-pos)) * (var(--studio-fader-h) - var(--studio-knob-h)));
	transition: translate 700ms var(--studio-ease-out);
}

.studio-channel.is-now .studio-channel__fader b { background: linear-gradient(var(--studio-brand-hover), var(--studio-brand)); }

/* LED mit Art der Sendung */
.studio-channel__led {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--studio-text-2);
}

.studio-channel__led::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--studio-line);
}

.studio-channel__led--live::before { background: var(--studio-onair-glow); box-shadow: 0 0 6px var(--studio-onair-glow); }
.studio-channel__led--neu::before { background: var(--studio-text); }
.studio-channel__led--wdh::before,
.studio-channel__led--oldie::before { background: var(--studio-level); }
.studio-channel__led--musik::before { background: var(--studio-brand); }

/* „↓ jetzt!“ über dem laufenden Kanalzug: blau, rot nur wenn wirklich live gesendet wird */
.studio-channel__note {
	position: absolute;
	top: -2.4rem;
	left: 50%;
	display: none;
	translate: -50% 0;
	white-space: nowrap;
	font: 400 1rem / 1 var(--studio-font-tape);
	color: var(--studio-brand);
}

.studio-channel.is-now .studio-channel__note { display: block; }
[data-stufu-onair="live"] .studio-channel.is-now .studio-channel__note { color: var(--studio-onair-glow); }

/* Musik-Strecken treten zurück: gedämpfter Kanalzug, helleres Tape */
.studio-channel.is-music { background: oklch(23% 0.02 245); }
.studio-channel.is-music .studio-channel__tape { background: oklch(80% 0.01 95); font-size: 0.72rem; }

/* Details zur angetippten Sendung (Pult-Woche mit Sendungsbild links) */
.studio-pult__detail {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	min-height: 5rem;
	margin-top: var(--wp--preset--spacing--30, 0.75rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	border-top: 1px solid var(--studio-line);
}

.studio-pult__detail img { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: var(--studio-radius-s); }

.studio-pult__detail h3 {
	margin: 0;
	font: 750 var(--studio-step-1) / 1.25 var(--studio-font-text);
	color: var(--studio-text);
}

.studio-pult__detail p {
	max-width: 62ch;
	margin: var(--wp--preset--spacing--10, 0.25rem) 0 0;
	color: var(--studio-text-2);
}

@media (prefers-reduced-motion: reduce) {
	.studio-channel,
	.studio-channel__fader b { transition: none; }
}