/*
 * Podcast-Seite „aufgeklappt“ (Schritt 6, Thema 5): Platte links draußen (dreht, ist der Schalter), Cover vorn,
 * daneben die Rückseite aus vergilbtem Karton mit Titelliste A1–B3. Markup: inc/podcast-head.php,
 * Verhalten: assets/js/studio-podcast.js. Nur auf Podcast-Seiten geladen.
 */

.studio-pod {
	--studio-disc: min(330px, 70vw);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	max-width: 1100px;
	margin-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
	padding-left: clamp(4rem, 14vw, 9rem);
}

@media (min-width: 900px) {
	.studio-pod { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; }
	.studio-pod__back { margin-left: -6px; rotate: 0.6deg; }
}

/* ---------- Cover vorn ---------- */
.studio-pod__front { position: relative; z-index: 2; aspect-ratio: 1; max-width: 340px; }

.studio-pod__front img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--studio-radius-s);
	box-shadow: 0 24px 34px -14px oklch(0% 0 0 / 0.9), inset 0 0 0 1px oklch(100% 0 0 / 0.14);
	rotate: -1.2deg;
}

/* Ringabrieb und Knitter auf dem Cover */
.studio-pod__front::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--studio-radius-s);
	background: radial-gradient(circle, transparent 40%, oklch(100% 0 0 / 0.14) 41.5%, oklch(100% 0 0 / 0.04) 44%, transparent 46%), var(--studio-crumple) 0 0 / 300px;
	mix-blend-mode: soft-light;
	rotate: -1.2deg;
	pointer-events: none;
}

/* ---------- Platte: liegt links draußen, dreht; ohne JS steht sie als reines Bild ---------- */
.studio-pod__disc,
.studio-pod:not(:has(.studio-pod__disc:not([hidden])))::before {
	position: absolute;
	top: calc(170px - var(--studio-disc) / 2);
	left: 0;
	z-index: 1;
	width: var(--studio-disc);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background:
		linear-gradient(125deg, transparent 35%, oklch(100% 0 0 / 0.12) 45%, transparent 55%),
		repeating-radial-gradient(circle, oklch(14% 0 0) 0 2px, oklch(19% 0 0) 2px 3px),
		oklch(12% 0 0);
	box-shadow: 0 16px 30px oklch(0% 0 0 / 0.7), inset 0 0 0 1px oklch(42% 0.01 245), inset 0 0 0 9px oklch(9% 0 0);
}

.studio-pod:not(:has(.studio-pod__disc:not([hidden])))::before { content: ""; }
.studio-pod__disc[hidden] { display: none; }
.studio-pod__disc { cursor: pointer; }
.studio-pod__disc:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 4px; }

.studio-pod__label {
	position: absolute;
	inset: 33%;
	border-radius: 50%;
	background: var(--studio-brand) center / cover;
	box-shadow: 0 0 0 4px oklch(12% 0 0);
	animation: studio-spin 3.6s linear infinite paused;
}

.studio-pod__label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px;
	border-radius: 50%;
	background: var(--studio-surface);
}

.studio-pod.is-spinning .studio-pod__label { animation-play-state: running; }

/* Hinweis als Stück Tape, erscheint bei Hover/Fokus */
.studio-pod__tip {
	position: absolute;
	top: 8%;
	left: 14%;
	z-index: 3;
	padding: 0.3rem 0.75rem 0.2rem;
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 400 1rem / 1 var(--studio-font-tape);
	clip-path: polygon(2% 6%, 98% 0, 100% 52%, 97% 100%, 1% 94%, 0 48%);
	rotate: -6deg;
	opacity: 0;
	translate: 0 6px;
	transition: opacity 160ms, translate 200ms var(--studio-ease);
	pointer-events: none;
}

.studio-pod__disc:is(:hover, :focus-visible) .studio-pod__tip { opacity: 1; translate: 0 0; }

/* ---------- Rückseite: bedruckter Karton mit Titelliste ---------- */
.studio-pod__back {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background:
		radial-gradient(120% 90% at 50% 40%, transparent 55%, oklch(70% 0.07 75 / 0.3)),
		var(--studio-grain),
		var(--studio-paper-aged);
	color: var(--studio-paper-ink);
	box-shadow: 0 22px 32px -14px oklch(0% 0 0 / 0.85);
}

.studio-pod__by {
	margin: 0;
	color: var(--studio-paper-ink-2);
	font: 800 0.72rem / 1.3 var(--studio-font-text);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.studio-pod__title { margin: 0; font: 800 var(--studio-step-2) / 1.1 var(--studio-font-text); }
.studio-pod__text { max-width: 52ch; margin: 0; line-height: 1.5; }

.studio-pod__list {
	margin: 0.4rem 0 0;
	padding: 0;
	border-top: 2px solid var(--studio-paper-ink);
	list-style: none;
}

.studio-pod__list li {
	display: grid;
	grid-template-columns: 2.2rem 1fr auto;
	gap: 0.5rem;
	align-items: baseline;
	padding: 0.45rem 0;
	border-bottom: 1px dotted oklch(55% 0.03 80 / 0.7);
	font-variant-numeric: tabular-nums;
}

.studio-pod__list a { color: inherit; font-weight: 650; text-decoration: none; }
.studio-pod__list a:hover { text-decoration: underline; }
.studio-pod__list a:focus-visible { outline: 2px solid oklch(42% 0.13 250); outline-offset: 2px; }
.studio-pod__no { color: var(--studio-paper-ink-2); font-weight: 800; }
.studio-pod__len { color: var(--studio-paper-ink-2); }
.studio-pod__all { --studio-tilt: -1deg; justify-self: start; margin-top: 0.4rem; font-size: var(--studio-step--1); }

.studio-pod__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
}

.studio-pod__logo { width: 132px; height: auto; opacity: 0.85; }

/* Der Kopf des Eltern-Templates hatte Seitenränder für die alte Zeile */
.single-podcast main#main-page .wp-block-group.default-box-shadow:has(.studio-pod) { padding: 0 !important; }

@media (max-width: 899px) {
	.studio-pod { padding-left: 0; }
	.studio-pod__disc,
	.studio-pod:not(:has(.studio-pod__disc:not([hidden])))::before { position: relative; top: auto; width: 70%; margin: 0 0 -55% 30%; }
	.studio-pod__front { width: 78%; }
}

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