/*
 * Crew als Backstage-Pässe an einer Stange (inc/home-crew.php, studentenfunk_studio_crew_rail()): Startseite und
 * interner Bereich. Lauf und Pendel: assets/js/studio-crew.js, Karussell: studio-carousel.js.
 */

/* Kugelschreiber-Blau für die Rückseite (auch außerhalb der Startseite) */
.studio-crew { --studio-pen: oklch(40% 0.14 262); }

/* ---------- Crew: Backstage-Pässe an der Stange ---------- */
.studio-crew__intro { max-width: 52ch; margin: 0; color: var(--studio-text-2); }

.studio-crew__rail {
	height: 10px;
	margin-top: 1.5rem;
	border-radius: 5px;
	background: linear-gradient(oklch(62% 0.01 245), oklch(34% 0.01 245) 60%, oklch(22% 0.01 245));
	box-shadow: 0 6px 10px oklch(0% 0 0 / 0.6);
}

.studio-crew__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 210px;
	gap: 1.5rem;
	margin: 0;
	padding: 0 0.5rem 2rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
}

.studio-pass { display: grid; justify-items: center; scroll-snap-align: start; }

.studio-pass__swing { display: grid; justify-items: center; transform-origin: 50% 0; }
.studio-pass:hover .studio-pass__swing,
.studio-pass:focus-within .studio-pass__swing { animation: studio-sway 2.6s ease-in-out; }

/* studio-crew.js: Pendel-Physik übernimmt das Pendeln, beim Gleiten kein Einrasten */
.studio-crew__list.is-physics .studio-pass:hover .studio-pass__swing,
.studio-crew__list.is-physics .studio-pass:focus-within .studio-pass__swing { animation: none; }
.studio-crew__list.is-gliding { scroll-snap-type: none; }

.studio-crew__auto {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 44px;
	margin: 0.25rem 0 0 -0.5rem;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: var(--studio-text-2);
	font: 600 var(--studio-step--1) / 1 var(--studio-font-text);
	cursor: pointer;
}

.studio-crew__auto:hover { color: var(--studio-text); }

/* Pause: zwei Balken; angehalten: Dreieck */
.studio-crew__auto-icon {
	width: 10px;
	height: 12px;
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.studio-crew__auto.is-off .studio-crew__auto-icon {
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.studio-crew__auto:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

@keyframes studio-sway {
	0% { rotate: 0deg; }
	18% { rotate: 3.2deg; }
	40% { rotate: -2.2deg; }
	60% { rotate: 1.2deg; }
	80% { rotate: -0.5deg; }
	100% { rotate: 0deg; }
}

/* Band: blau = Vorstand, Tape = Ressortleitung */
.studio-pass__strap {
	display: grid;
	place-items: center;
	width: 22px;
	height: var(--studio-strap, 96px);
	overflow: hidden;
	background: var(--studio-tape);
	clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}

.studio-pass__strap::after {
	content: "STUDENTENFUNK · STUDENTENFUNK";
	writing-mode: vertical-rl;
	white-space: nowrap;
	color: var(--studio-tape-ink);
	font: 800 0.5rem / 1 var(--studio-font-text);
	letter-spacing: 0.2em;
}

.studio-pass.is-board .studio-pass__strap { background: var(--studio-brand); }
.studio-pass.is-board .studio-pass__strap::after { color: var(--studio-on-brand); }

.studio-pass__clip {
	width: 16px;
	height: 18px;
	margin-top: -2px;
	border-radius: 3px 3px 5px 5px;
	background: linear-gradient(90deg, oklch(45% 0.005 245), oklch(80% 0.005 245) 45%, oklch(50% 0.005 245));
	box-shadow: 0 2px 3px oklch(0% 0 0 / 0.5);
}

.studio-pass__card {
	position: relative;
	width: 188px;
	aspect-ratio: 54 / 86;
	margin-top: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--studio-paper-ink);
	font: inherit;
	text-align: left;
	perspective: 900px;
	cursor: pointer;
}

.studio-pass__card:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 4px; border-radius: 10px; }

.studio-pass__flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 800ms var(--studio-ease-out);
}

.studio-pass__card[aria-pressed="true"] .studio-pass__flip { transform: rotateY(180deg); }

.studio-pass__side {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	overflow: hidden;
	border-radius: 10px;
	background: var(--studio-paper);
	backface-visibility: hidden;
	box-shadow: 0 18px 28px -14px oklch(0% 0 0 / 0.9), inset 0 0 0 1px oklch(100% 0 0 / 0.6);
}

/* Glanz der Schutzhülle */
.studio-pass__side::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, oklch(100% 0 0 / 0.35) 0%, transparent 28%, transparent 62%, oklch(100% 0 0 / 0.14) 70%, transparent 82%);
}

.studio-pass__side--back { transform: rotateY(180deg); }

.studio-pass__slot {
	justify-self: center;
	width: 38px;
	height: 7px;
	margin: 9px 0 6px;
	border-radius: 4px;
	background: oklch(25% 0.01 245);
	box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.6);
}

.studio-pass__band {
	padding: 0.4rem 0.75rem;
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 800 0.68rem / 1 var(--studio-font-text);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.studio-pass.is-board .studio-pass__band { background: var(--studio-brand); color: var(--studio-on-brand); }

.studio-pass__body {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: 0.65rem 0.75rem 0.4rem;
}

.studio-pass__body img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	background: var(--studio-surface-3);
	filter: saturate(0.95);
}

.studio-pass__name { font: 800 1rem / 1.15 var(--studio-font-text); }
.studio-pass__role { font: 400 0.9rem / 1.15 var(--studio-font-tape); color: var(--studio-paper-ink-2); }

.studio-pass__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem 0.6rem;
	color: var(--studio-paper-ink-2);
	font: 700 0.6rem / 1.1 var(--studio-font-text);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.studio-pass__code {
	width: 54px;
	height: 18px;
	background: repeating-linear-gradient(90deg, var(--studio-paper-ink) 0 1px, transparent 1px 3px, var(--studio-paper-ink) 3px 5px, transparent 5px 6px, var(--studio-paper-ink) 6px 7px, transparent 7px 9px);
}

.studio-pass__bio {
	padding: 0.7rem 0.8rem;
	overflow: hidden;
	color: var(--studio-paper-ink);
	font-size: 0.85rem;
	line-height: 1.45;
}

.studio-pass__turn { font: 400 0.8rem / 1 var(--studio-font-tape); color: var(--studio-pen); letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
	.studio-pass__flip { transition: none; }
	.studio-pass:hover .studio-pass__swing,
	.studio-pass:focus-within .studio-pass__swing { animation: none; }
}