/*
 * Gemeinsame Papier- und Pult-Bausteine für Startseite und Unterseiten: Abschnittskopf (Tape + Tape-Link),
 * Abzug (Fotoabzug), Plattenhülle mit Dymo-Band. Markup-Helfer: inc/home-parts.php.
 */

/* Das Eltern-style.css färbt Überschriften; auf Tape bleibt die Schrift dunkel */
.studio-section-head .studio-tape,
.studio-kicker .studio-tape { color: var(--studio-tape-ink); }

/* ---------- Abschnittskopf: Überschrift auf Tape, Tape-Link rechts ---------- */
.studio-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin-bottom: var(--wp--preset--spacing--60, 2rem);
}

.studio-section-head__title.studio-tape {
	margin: 0;
	padding: 0.15em 0.6em 0.05em;
	font-size: var(--studio-step-3);
	line-height: 1.15;
}

.studio-section-head .studio-tape-link { margin-left: auto; }

/* Abzug: vergilbter Fotoabzug mit weißem Rand */
.studio-print {
	position: relative;
	isolation: isolate;
	display: block;
	padding: 0.75rem 0.75rem 1rem;
	color: var(--studio-paper-ink);
	text-decoration: none;
	rotate: -1.4deg;
	filter: drop-shadow(0 16px 18px oklch(0% 0 0 / 0.55));
	transition: rotate 200ms var(--studio-ease), translate 200ms var(--studio-ease);
}

.studio-print::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 50% 40%, transparent 55%, oklch(70% 0.07 75 / 0.35)),
		var(--studio-grain),
		var(--studio-paper-aged);
	clip-path: var(--studio-edge-b);
}

.studio-print:hover,
.studio-print:focus-visible {
	color: var(--studio-paper-ink);
	rotate: -0.4deg;
	translate: 0 -4px;
}

.studio-print:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 6px; }

.studio-print img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: sepia(0.18) saturate(0.9);
}

.studio-print > .studio-strip { left: 40%; top: -14px; rotate: -3deg; }

.studio-print__cap {
	display: block;
	padding: 1rem 0.5rem 0;
	font: 400 var(--studio-step-2) / 1.15 var(--studio-font-tape);
	overflow-wrap: anywhere;
}

.studio-print__by {
	display: block;
	padding: 0.5rem 0.5rem 0;
	font-size: var(--studio-step--1);
	color: var(--studio-paper-ink-2);
}

.studio-print__sticker { right: -12px; top: -18px; }

.studio-sleeve {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	color: var(--studio-text);
	text-decoration: none;
}

.studio-sleeve:hover,
.studio-sleeve:focus-visible { color: var(--studio-text); }
.studio-sleeve:focus-visible { outline: none; }
.studio-sleeve:focus-visible .studio-sleeve__cover { outline: 3px solid var(--studio-brand); outline-offset: 4px; }

.studio-sleeve__media { position: relative; width: 100%; }

.studio-sleeve__disc {
	position: absolute;
	top: 3%;
	left: 3%;
	width: 94%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, oklch(14% 0 0) 0 2px, oklch(19% 0 0) 2px 3px), oklch(12% 0 0);
	box-shadow: 0 6px 14px oklch(0% 0 0 / 0.6), inset 0 0 0 1px oklch(42% 0.01 245), inset 0 0 0 7px oklch(9% 0 0), inset 0 0 0 8px oklch(30% 0.01 245);
	translate: 18% 0;
	transition: translate 650ms var(--studio-ease);
	animation: studio-spin 2.4s linear infinite paused;
}

/* Glanz bleibt stehen, während die Platte dreht */
.studio-sleeve__disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(125deg, transparent 35%, oklch(100% 0 0 / 0.12) 45%, transparent 55%);
}

.studio-sleeve__label {
	position: absolute;
	inset: 33%;
	border-radius: 50%;
	background: var(--studio-brand) center / cover;
	box-shadow: 0 0 0 3px oklch(12% 0 0);
}

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

.studio-sleeve__cover {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--studio-radius-s);
	background: var(--studio-surface-3);
	rotate: var(--studio-tilt, 0deg);
	box-shadow: 0 16px 26px -12px oklch(0% 0 0 / 0.85);
	transition: rotate 300ms var(--studio-ease), translate 300ms var(--studio-ease);
}

.studio-sleeve__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92) contrast(0.97);
}

/* Ringabrieb und Knitter auf der Hülle */
.studio-sleeve__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, transparent 40%, oklch(100% 0 0 / 0.16) 41.5%, oklch(100% 0 0 / 0.04) 44%, transparent 46%),
		var(--studio-crumple) 0 0 / 300px;
	mix-blend-mode: soft-light;
	box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.14), inset 0 0 22px oklch(0% 0 0 / 0.4);
}

.studio-sleeve:hover .studio-sleeve__disc,
.studio-sleeve:focus-visible .studio-sleeve__disc { translate: 58% 0; animation-play-state: running; }

.studio-sleeve:hover .studio-sleeve__cover,
.studio-sleeve:focus-visible .studio-sleeve__cover { rotate: 0deg; translate: -4px 0; }

/* Blau, nicht rot: rot heißt nur live */
.studio-sleeve__new {
	position: absolute;
	z-index: 2;
	top: -14px;
	right: -12px;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--studio-brand);
	color: var(--studio-on-brand);
	font: 400 0.95rem / 1 var(--studio-font-tape);
	rotate: -14deg;
	box-shadow: 0 4px 8px oklch(0% 0 0 / 0.5);
}

.studio-sleeve__name.studio-tape { font-size: var(--studio-step-0); }

@keyframes studio-spin { to { rotate: 360deg; } }

/* Dymo-Prägeband */
.studio-dymo {
	padding: 0.4rem 0.65rem 0.35rem;
	border-radius: 2px;
	background: oklch(25% 0.05 255);
	color: oklch(95% 0.005 250);
	font: 800 0.72rem / 1 var(--studio-font-text);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	rotate: var(--studio-tilt, -1deg);
	text-shadow: 0 1px 0 oklch(100% 0 0 / 0.25), 0 -1px 0 oklch(0% 0 0 / 0.6);
	box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.15), inset 0 -1px 0 oklch(0% 0 0 / 0.4), 0 2px 3px oklch(0% 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.studio-sleeve__disc,
	.studio-sleeve__cover,
	.studio-print { transition: none; }
	.studio-sleeve__disc { animation: none; }
}

/* Bandzählwerk: Ziffernrollen (Kassettendeck, Seitenzahlen) */
.studio-counter {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 2px;
	background: oklch(10% 0.01 250);
	box-shadow: inset 0 1px 3px oklch(0% 0 0);
}

.studio-counter span {
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.8rem;
	border-radius: 1px;
	background: linear-gradient(oklch(26% 0.01 250), oklch(14% 0.01 250) 50%, oklch(24% 0.01 250));
	color: oklch(95% 0.005 250);
	font: 800 1rem / 1 var(--studio-font-text);
	font-variant-numeric: tabular-nums;
}

.studio-counter__sep {
	align-self: center;
	color: oklch(80% 0.005 250);
	font: 800 1rem / 1 var(--studio-font-text);
	font-style: normal;
}