/**
 * Home carousel and its musical-staff navigation.
 *
 * Layers on group-pages.css; defines no design tokens of its own.
 * Text always sits BELOW the image — nothing is overlaid on a photo, so
 * legibility never depends on what Kay uploads.
 */

.csmb-carousel {
	margin-bottom: var(--csmb-section-gap);
}

/* ---------- Slides ---------- */

.csmb-carousel__viewport {
	overflow: hidden;
	border-top: 5px solid var(--csmb-accent);
	border-radius: var(--csmb-radius);
	background: #fff;
}

.csmb-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	/* One viewport per slide, so the track is N times as wide. */
	width: calc(var(--csmb-slides, 1) * 100%);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.csmb-carousel__slide {
	width: calc(100% / var(--csmb-slides, 1));
	flex: 0 0 auto;
}

.csmb-carousel__card {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* ---------- Image band ---------- */

.csmb-carousel__media {
	/* A <span> in the markup, so this is required — width and aspect-ratio do
	   not apply to an inline box. */
	display: block;
	position: relative;
	background: var(--csmb-surface);
	overflow: hidden;
	/*
	 * Identical band to the group-page hero — same tokens, defined in
	 * group-pages.css. A photo must not change size between a carousel slide
	 * and the group page it links to, so these must never be set separately.
	 */
	width: min(100%, var(--csmb-band-width));
	aspect-ratio: var(--csmb-band-ratio);
	margin-inline: auto;
}

.csmb-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	/* object-fit is set by .csmb-photo--fill / --fit in group-pages.css, which
	   picks between cropping and fitting from the photo's own orientation. */
}


/* Shown until a group has a Featured Image. */
.csmb-carousel__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			45deg,
			var(--csmb-accent-tint) 0,
			var(--csmb-accent-tint) 14px,
			#fff 14px,
			#fff 28px
		);
}

.csmb-carousel__placeholder-text {
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--csmb-accent-dark);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Caption, always below the image ---------- */

.csmb-carousel__body {
	display: block;
	padding: clamp(0.9rem, 2vw, 1.4rem);
	border: 1px solid var(--csmb-line);
	border-top: 0;
	border-radius: 0 0 var(--csmb-radius) var(--csmb-radius);
}

.csmb-carousel__season {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--csmb-accent);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.csmb-carousel__name {
	display: block;
	color: var(--csmb-ink);
	font-size: clamp(1.35rem, 2.8vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.csmb-carousel__tagline {
	display: block;
	margin-top: 0.5rem;
	max-width: 62ch;
	font-size: clamp(0.95rem, 1.6vw, 1.02rem);
	line-height: 1.55;
	color: var(--csmb-body);
}

.csmb-carousel__cue {
	display: inline-block;
	margin-top: 0.8rem;
	color: var(--csmb-accent-dark);
	font-size: 0.88rem;
	font-weight: 700;
}

.csmb-carousel__card:hover .csmb-carousel__cue,
.csmb-carousel__card:focus-visible .csmb-carousel__cue {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csmb-carousel__card:focus-visible {
	outline: 3px solid var(--csmb-accent);
	outline-offset: 3px;
}

/* ---------- Musical staff navigation ---------- */

/*
 * The staff IS the navigation — no panel, no border, no label. It should read
 * as a line of music sitting under the carousel, not as a UI widget.
 */
.csmb-staff {
	margin-top: 0.9rem;
	padding: 0 clamp(0.5rem, 2vw, 1.25rem);
}

.csmb-staff__stage {
	position: relative;
	height: 78px;
}

.csmb-staff__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: #c9c2c3;
}

.csmb-staff__notes {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.csmb-staff__item {
	margin: 0;
}

/*
 * Each note is positioned from the same geometry the SVG lines use, so a note
 * always lands exactly on its line or space.
 */
.csmb-staff__note {
	position: absolute;
	left: var(--csmb-x, 50%);
	top: var(--csmb-y, 50%);
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.csmb-staff__notehead {
	display: block;
	width: 18px;
	height: 13px;
	border-radius: 50%;
	background: var(--csmb-accent);
	transform: rotate(-20deg);
	transition: transform 0.15s ease, background 0.15s ease;
	position: relative;
}

/* Stem. */
.csmb-staff__notehead::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: 4px;
	width: 2px;
	height: 30px;
	background: var(--csmb-accent);
	transform: rotate(20deg);
	transform-origin: bottom right;
}

.csmb-staff__note:hover .csmb-staff__notehead,
.csmb-staff__note:focus-visible .csmb-staff__notehead {
	transform: rotate(-20deg) scale(1.18);
}

.csmb-staff__note[aria-selected="true"] .csmb-staff__notehead {
	background: var(--csmb-accent-dark);
	transform: rotate(-20deg) scale(1.28);
	box-shadow: 0 0 0 4px rgba(139, 35, 50, 0.18);
}

.csmb-staff__note:focus-visible {
	outline: 3px solid var(--csmb-accent);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.csmb-staff__stage {
		height: 66px;
	}

	.csmb-staff__note {
		width: 34px;
		height: 34px;
	}
}

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

	.csmb-staff__notehead {
		transition: none;
	}
}

/* ---------- Group name, below the notes ---------- */

/*
 * A second track holding just the group name and its link. It mirrors the image
 * track's geometry exactly and is moved by the same transform, so the two stay
 * in step. It lives below the note navigation so the notes sit directly under
 * the photo and stay within reach without scrolling.
 */
.csmb-carousel__viewport--captions {
	border-top: 0;
	background: transparent;
	border-radius: 0;
}

.csmb-carousel__captions {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	width: calc(var(--csmb-slides, 1) * 100%);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.csmb-carousel__cap {
	width: calc(100% / var(--csmb-slides, 1));
	flex: 0 0 auto;
}

.csmb-carousel__caplink {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	flex-wrap: wrap;
	color: inherit;
	text-decoration: none;
}

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