/*
 * Kassettendeck der Audio-Beitragsseite (Schritt 6, Thema 2): Fach mit Kassette hinter Glas, Bandwickel links
 * schrumpft und rechts wächst mit dem Fortschritt, darunter Bandlauf und Klaviertasten, rechts Seitenleiste mit
 * Zählwerk, Zeit und Zustand. Mobil rutscht die Seitenleiste unter die Tasten. Markup: inc/deck.php,
 * Verhalten: assets/js/studio-deck.js. Nur auf Audio-Beitragsseiten geladen.
 */

.studio-deck {
	--studio-progress: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(11rem, 18vw, 14rem);
	grid-template-areas: "bay side" "run side" "keys side";
	gap: 0.9rem clamp(1rem, 3vw, 1.75rem);
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--50, 2rem);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	background: linear-gradient(oklch(100% 0 0 / 0.05), transparent 40%), var(--studio-surface-2);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 24px 40px -20px oklch(0% 0 0 / 0.85);
}

/* Breite inklusive Innenabstand, sonst steht die Kassette mobil über den Rand des Fachs */
.studio-deck,
.studio-deck * { box-sizing: border-box; }

/* display: grid/flex der Teile überstimmt sonst hidden (ohne JS bleiben sie aus) */
.studio-deck [hidden] { display: none !important; }

/* Ohne JS: nur Fach und die Bedienelemente des Browsers */
.studio-deck:not(.is-ready) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bay" "audio"; }
.studio-deck__audio { grid-area: audio; width: 100%; }
.studio-deck.is-ready .studio-deck__audio { display: none; }

/* Titel nur, wenn das Deck nicht auf der Seite seines Beitrags steht (z. B. Wochenplan) */
.studio-deck__title { grid-area: title; margin: 0; font: 750 var(--studio-step-1) / 1.25 var(--studio-font-text); }
.studio-deck__title a { color: var(--studio-text); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.studio-deck__title a:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

/* Mit Titel jeweils eine Zeile mehr oben */
.studio-deck.has-title { grid-template-areas: "title title" "bay side" "run side" "keys side"; }
.studio-deck.has-title:not(.is-ready) { grid-template-areas: "title" "bay" "audio"; }

/* ---------- Fach mit Kassette hinter Glas ---------- */
.studio-deck__bay {
	grid-area: bay;
	padding: 12px;
	border-radius: var(--studio-radius-m);
	background: oklch(11% 0.01 250);
	box-shadow: inset 0 3px 10px oklch(0% 0 0 / 0.9);
}

.studio-deck__cas {
	position: relative;
	display: grid;
	gap: 7%;
	align-content: center;
	width: min(100%, 380px);
	aspect-ratio: 100 / 56;
	margin-inline: auto;
	padding: 5% 7%;
	border-radius: var(--studio-radius-m);
	background:
		radial-gradient(circle at 4% 7%, oklch(45% 0.01 250) 0 1.6%, transparent 2%),
		radial-gradient(circle at 96% 7%, oklch(45% 0.01 250) 0 1.6%, transparent 2%),
		linear-gradient(160deg, oklch(30% 0.012 250), oklch(19% 0.01 250));
}

/* Glasklappe mit Spiegelung */
.studio-deck__cas::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.08) 38%, transparent 46%);
	pointer-events: none;
}

.studio-deck__label {
	overflow: hidden;
	padding: 0.45rem 0.9rem 0.35rem;
	border-radius: 2px;
	background: linear-gradient(var(--studio-brand) 0 0) 0 0 / 100% 5px no-repeat, var(--studio-grain), var(--studio-paper-aged);
	color: var(--studio-paper-ink);
	font: 400 clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem) / 1.2 var(--studio-font-tape);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Fenster: Bandwickel links schrumpft, rechts wächst er */
.studio-deck__window {
	position: relative;
	justify-self: center;
	width: 74%;
	aspect-ratio: 3.4 / 1;
	overflow: hidden;
	border-radius: 999px;
	background: oklch(12% 0.01 250);
	box-shadow: inset 0 2px 6px oklch(0% 0 0 / 0.8);
}

.studio-deck__wind,
.studio-deck__reel {
	position: absolute;
	top: 50%;
	translate: -50% -50%;
}

.studio-deck__wind {
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, oklch(30% 0.045 50) 0 1px, oklch(24% 0.035 50) 1px 2px);
	transition: scale 200ms linear;
}

.studio-deck__wind--l { left: 22%; scale: calc(0.42 + (1 - var(--studio-progress)) * 0.58); }
.studio-deck__wind--r { left: 78%; scale: calc(0.42 + var(--studio-progress) * 0.58); }
.studio-deck__reel { z-index: 1; width: 17%; }
.studio-deck__reel:first-of-type { left: 22%; }
.studio-deck__reel:last-of-type { left: 78%; }
.studio-deck.is-playing .studio-reel { animation-play-state: running; }

/* ---------- Bandlauf: dünne Spur, gefüllt bis zur Position ---------- */
.studio-deck__run { grid-area: run; padding: 0 4px; }

.studio-deck__run input {
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background:
		linear-gradient(var(--studio-brand), var(--studio-brand)) 0 50% / calc(var(--studio-progress) * 100%) 4px no-repeat,
		linear-gradient(oklch(30% 0.02 245), oklch(30% 0.02 245)) 0 50% / 100% 4px no-repeat;
	cursor: pointer;
}

.studio-deck__run input::-webkit-slider-thumb {
	width: 12px;
	height: 20px;
	border-radius: 2px;
	-webkit-appearance: none;
	background: linear-gradient(oklch(85% 0.01 250), oklch(60% 0.01 250));
	box-shadow: 0 2px 4px oklch(0% 0 0 / 0.6);
}

.studio-deck__run input::-moz-range-thumb {
	width: 12px;
	height: 20px;
	border: 0;
	border-radius: 2px;
	background: linear-gradient(oklch(85% 0.01 250), oklch(60% 0.01 250));
}

.studio-deck__run input:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

/* ---------- Klaviertasten: geschlossene Reihe, Abspielen doppelt breit, Download abgesetzt ---------- */
.studio-deck__keys {
	grid-area: keys;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 3px;
	padding: 4px;
	border-radius: var(--studio-radius-s);
	background: oklch(10% 0.01 250);
}

.studio-deck__key {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.3rem;
	min-width: 0;
	min-height: 58px;
	padding: 0.4rem;
	border: 0;
	border-radius: 2px;
	background: linear-gradient(oklch(38% 0.012 250), oklch(28% 0.012 250) 60%, oklch(24% 0.01 250));
	color: var(--studio-text);
	font-family: var(--studio-font-text);
	text-decoration: none;
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 3px 0 oklch(14% 0.01 250);
	translate: 0 -2px;
	cursor: pointer;
	transition: translate 80ms, box-shadow 80ms;
}

.studio-deck__key small { color: var(--studio-text-2); font: 700 0.72rem / 1 var(--studio-font-text); letter-spacing: 0.04em; white-space: nowrap; }
.studio-deck__key:hover { background: linear-gradient(oklch(42% 0.012 250), oklch(31% 0.012 250) 60%, oklch(26% 0.01 250)); }
.studio-deck__key:active { translate: 0 1px; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.studio-deck__key:focus-visible { z-index: 1; outline: 2px solid var(--studio-brand); outline-offset: 2px; }

.studio-deck__key--play {
	background: linear-gradient(oklch(80% 0.11 234), var(--studio-brand) 60%, oklch(64% 0.13 236));
	color: var(--studio-on-brand);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.35), 0 3px 0 oklch(42% 0.1 240);
}

.studio-deck__key--play small { color: var(--studio-on-brand); }
.studio-deck__key--play:hover { background: linear-gradient(oklch(84% 0.1 234), var(--studio-brand-hover) 60%, oklch(68% 0.12 236)); }

.studio-deck__key--play[aria-pressed="true"] {
	translate: 0 1px;
	box-shadow: inset 0 2px 6px oklch(0% 0 0 / 0.35), 0 0 18px oklch(71.5% 0.135 234 / 0.45);
}

.studio-deck__key--dl { margin-left: 8px; background: linear-gradient(oklch(32% 0.012 250), oklch(24% 0.01 250)); }

/* Symbole als Formen */
.studio-deck__ico { display: block; background: currentColor; }
.studio-deck__ico--play { width: 14px; height: 16px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
[aria-pressed="true"] > .studio-deck__ico--play { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.studio-deck__ico--stop { width: 13px; height: 13px; }
.studio-deck__ico--rew,
.studio-deck__ico--ffw { width: 20px; height: 13px; clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%); }
.studio-deck__ico--ffw { rotate: 180deg; }

.studio-deck__ico--dl {
	width: 16px;
	height: 16px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9M4 6.5 8 10.5l4-4M2 14h12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9M4 6.5 8 10.5l4-4M2 14h12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Seitenleiste: Zählwerk, Zeit, Zustand ---------- */
.studio-deck__side {
	grid-area: side;
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 0.7rem;
	padding: 0.9rem;
	border-radius: var(--studio-radius-s);
	background: oklch(15% 0.015 245);
	box-shadow: inset 0 2px 6px oklch(0% 0 0 / 0.6);
}

.studio-deck__time {
	margin: 0;
	color: var(--studio-text-2);
	font: 700 var(--studio-step--1) / 1 var(--studio-font-text);
	font-variant-numeric: tabular-nums;
}

.studio-deck__state {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--studio-text-2);
	font: 800 0.72rem / 1 var(--studio-font-text);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.studio-deck__lamp {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: oklch(35% 0.03 234);
	box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.6);
}

.studio-deck.is-playing .studio-deck__state { color: var(--studio-brand); }
.studio-deck.is-playing .studio-deck__lamp { background: var(--studio-brand); box-shadow: 0 0 10px oklch(71.5% 0.135 234 / 0.9); }

@media (max-width: 640px) {
	.studio-deck.is-ready { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bay" "run" "keys" "side"; }
	.studio-deck.has-title.is-ready { grid-template-areas: "title" "bay" "run" "keys" "side"; }
	.studio-deck__keys { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
	.studio-deck__key { padding-inline: 0.15rem; }
	.studio-deck__key small { font-size: 0.66rem; letter-spacing: 0; }
	.studio-deck__key--dl { margin-left: 4px; }
	.studio-deck__side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.studio-deck__wind { transition: none; }
}