/*
 * Audio-Beiträge als Kassette (Schritt 6, Thema 1). Ein kleiner Abzug des Beitragsbilds liegt hinter der Kassette
 * wie die Hülle hinter der Platte. Hover/Fokus: Kassette rutscht heraus, Spulen drehen (nur dann). Dazu die Liste
 * „jede Form“ (Archiv Audio-Beiträge, Suche). Markup: inc/cassette.php. Startseite und Unterseiten.
 */

/* ---------- Spule: weiße Nabe mit Zähnen; steht, bis Hover oder das Deck sie startet ---------- */
.studio-reel {
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, oklch(20% 0.01 250) 0 22%, transparent 23%),
		repeating-conic-gradient(oklch(95% 0.005 250) 0 14deg, transparent 14deg 60deg),
		radial-gradient(circle, transparent 0 40%, oklch(92% 0.005 250) 41% 58%, transparent 59%);
	-webkit-mask: radial-gradient(circle, #000 0 64%, transparent 65%);
	mask: radial-gradient(circle, #000 0 64%, transparent 65%);
	animation: studio-spin 1.8s linear infinite paused;
}

/* ---------- Gegenstand + Bildunterschrift ---------- */
.studio-cassette {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.35rem;
	color: var(--studio-text);
	text-decoration: none;
}

.studio-cassette__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 0.86;
	margin-bottom: 0.6rem;
}

.studio-cassette__cap {
	font: 750 var(--studio-step-1) / 1.2 var(--studio-font-text);
	text-wrap: pretty;
}

.studio-cassette__by {
	color: var(--studio-text-2);
	font-size: var(--studio-step--1);
	font-variant-numeric: tabular-nums;
}

.studio-cassette:hover .studio-cassette__cap { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.studio-cassette:focus-visible { outline: none; }
.studio-cassette:focus-visible .studio-cassette__media { outline: 3px solid var(--studio-brand); outline-offset: 6px; }

/* Abzug dahinter */
.studio-cassette__photo {
	position: absolute;
	top: 0;
	left: 2%;
	width: 62%;
	padding: 5px 5px 14px;
	background: var(--studio-grain), var(--studio-paper-aged);
	rotate: var(--studio-tilt);
	box-shadow: 0 10px 16px -6px oklch(0% 0 0 / 0.6);
	transition: rotate 300ms var(--studio-ease), translate 300ms var(--studio-ease);
}

.studio-cassette__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	filter: sepia(0.15) saturate(0.9);
}

/* Gehäuse mit vier Schrauben */
.studio-cassette__body {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 88%;
	aspect-ratio: 100 / 64;
	border-radius: var(--studio-radius-m);
	background:
		radial-gradient(circle at 5% 8%, oklch(45% 0.01 250) 0 2.2%, transparent 2.6%),
		radial-gradient(circle at 95% 8%, oklch(45% 0.01 250) 0 2.2%, transparent 2.6%),
		radial-gradient(circle at 5% 92%, oklch(45% 0.01 250) 0 2.2%, transparent 2.6%),
		radial-gradient(circle at 95% 92%, oklch(45% 0.01 250) 0 2.2%, transparent 2.6%),
		linear-gradient(160deg, oklch(30% 0.012 250), oklch(19% 0.01 250));
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 18px 26px -10px oklch(0% 0 0 / 0.8);
	rotate: var(--studio-tilt);
	transition: rotate 300ms var(--studio-ease), translate 300ms var(--studio-ease);
}

/* Etikett: blauer Streifen oben, Schreiblinien, vergilbtes Papier */
.studio-cassette__label {
	position: absolute;
	inset: 7% 6% 30%;
	display: grid;
	grid-template-rows: auto 1fr;
	padding: 9% 5% 4%;
	border-radius: 2px;
	background:
		linear-gradient(var(--studio-brand) 0 0) 0 0 / 100% 7% no-repeat,
		repeating-linear-gradient(transparent 0 15px, oklch(70% 0.03 240 / 0.4) 15px 16px) 0 26% / 100% 40% no-repeat,
		var(--studio-grain),
		var(--studio-paper-aged);
	color: var(--studio-paper-ink);
	container-type: inline-size;
}

.studio-cassette__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
	padding-left: 12%;
	font: 400 clamp(0.85rem, 7cqi, 1.25rem) / 1.1 var(--studio-font-tape);
	white-space: nowrap;
}

.studio-cassette__title.is-long { padding-left: 9%; font-size: clamp(0.7rem, 5.2cqi, 0.95rem); }

.studio-cassette__title small {
	overflow: hidden;
	color: var(--studio-paper-ink-2);
	font: 700 clamp(0.55rem, 3.6cqi, 0.68rem) / 1 var(--studio-font-text);
	letter-spacing: 0.04em;
	text-overflow: clip;
}

/* Kleines Etikett (mobil zweispaltig): nur die Rubrik, das Datum steht ohnehin darunter */
@container (max-width: 190px) {
	.studio-cassette__title small { display: none; }
}

.studio-cassette__side {
	position: absolute;
	left: 5%;
	top: 13%;
	font: 400 clamp(0.8rem, 6cqi, 1.05rem) / 1 var(--studio-font-tape);
}

.studio-cassette__len {
	position: absolute;
	right: 5%;
	bottom: 6%;
	font: 400 clamp(0.7rem, 5cqi, 0.85rem) / 1 var(--studio-font-tape);
}

/* Fenster mit zwei Spulen und dem Bandwickel links (Anfang) */
.studio-cassette__window {
	position: relative;
	align-self: end;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 62%;
	height: 52%;
	padding: 0 7%;
	border-radius: 999px;
	background: linear-gradient(oklch(14% 0.01 250 / 0.92), oklch(22% 0.01 250 / 0.92));
	box-shadow: inset 0 2px 4px oklch(0% 0 0 / 0.7);
}

.studio-cassette__window .studio-reel { width: 30%; }
.studio-cassette__window .studio-reel:first-child { box-shadow: 0 0 0 5px oklch(28% 0.04 50); }

.studio-cassette__tape {
	position: absolute;
	top: 62%;
	left: 30%;
	right: 30%;
	height: 3px;
	background: oklch(28% 0.04 50);
}

/* Unterkante mit Andruck-Öffnungen */
.studio-cassette__foot {
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 21%;
	background: linear-gradient(oklch(34% 0.012 250), oklch(25% 0.01 250));
	clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.studio-cassette__foot i { width: 9%; aspect-ratio: 1; border-radius: 50%; background: oklch(10% 0.01 250); }

/* „neu!“ in Marker auf Tape, oben rechts am Gegenstand */
.studio-cassette__new {
	position: absolute;
	top: 6%;
	right: 2%;
	padding: 0.15em 0.6em;
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 400 var(--studio-step--1) / 1.2 var(--studio-font-tape);
	rotate: 4deg;
	box-shadow: 0 3px 6px oklch(0% 0 0 / 0.4);
}

.studio-cassette:is(:hover, :focus-visible) .studio-cassette__body { rotate: 0deg; translate: 4px -10px; }
.studio-cassette:is(:hover, :focus-visible) .studio-cassette__photo { rotate: -4deg; translate: -6px -4px; }
.studio-cassette:is(:hover, :focus-visible) .studio-reel { animation-play-state: running; }
.studio-cut__lead:has(.studio-cut__tape.is-playing) .studio-reel { animation-play-state: running; }

/* Startseite: Kassette als Aufmacher in „Frisch aus dem Schnitt“ */
.studio-cut__lead { padding-top: 1rem; }
.studio-cassette--lead .studio-cassette__cap { font-size: var(--studio-step-2); line-height: 1.15; }
.studio-cassette--lead .studio-cassette__by { font-size: var(--studio-step-0); }

/* „Mehr aus dem Schnitt“: gleiche Höhe wie die Abzüge daneben */
.studio-cassette--small { padding-top: 0.75rem; }

/* ---------- Liste „jede Form“: Archiv Audio-Beiträge, Suche ---------- */
.studio-forms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	margin: 0;
	padding: 1rem 0.25rem 0;
	list-style: none;
}

.studio-forms__item { position: relative; min-width: 0; }
.studio-forms__item:is(:hover, :focus-within) { z-index: 2; }

/* Platte schaut rechts aus der Hülle: Platz lassen */
.studio-forms__item--podcast { padding-right: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
	.studio-reel { animation: none !important; }
	.studio-cassette__body,
	.studio-cassette__photo { transition: none; }
}