/* ── »Auf dem Plattenteller« — Spotify-Sektion ─────────────────────────────── */

.jl-stereo {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Now Playing */
.jl-stereo-now {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
	color: inherit;
	max-width: fit-content;
}

.jl-stereo-now-cover {
	border-radius: 4px;
	display: block;
}

.jl-stereo-now-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.jl-stereo-now-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent);
}

.jl-stereo-now-track {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.jl-stereo-now-track em {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
}

.jl-stereo-now:hover .jl-stereo-now-track {
	color: var(--wp--preset--color--accent);
}

/* Equalizer-Balken */
.jl-stereo-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
	width: 14px;
	flex-shrink: 0;
}

.jl-stereo-eq i {
	width: 3px;
	background: var(--wp--preset--color--accent);
	border-radius: 1px;
	animation: jl-eq 1s ease-in-out infinite;
}

.jl-stereo-eq i:nth-child(1) { height: 60%; animation-delay: -0.3s; }
.jl-stereo-eq i:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.jl-stereo-eq i:nth-child(3) { height: 40%; animation-delay: -0.1s; }

@keyframes jl-eq {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(0.4); }
}

/* Album-Reihe */
.jl-stereo-albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.75rem;
}

.jl-stereo-album {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1;
}

.jl-stereo-album img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.jl-stereo-album:hover img {
	transform: scale(1.05);
	opacity: 0.9;
}

/* Letterboxd-Poster (2:3) in derselben Reihen-Mechanik */
.jl-stereo-films .jl-stereo-album {
	aspect-ratio: 2 / 3;
}

/* Auf der Plattenteller-Seite steht die Sektion im Content — ohne den
 * Abschnitts-Rahmen der alten Startseiten-Einbindung. */
.wp-block-post-content .jl-stereo {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: none;
}

@media (prefers-reduced-motion: reduce) {
	.jl-stereo-eq i {
		animation: none;
	}
	.jl-stereo-album img {
		transition: none;
	}
	.jl-stereo-album:hover img {
		transform: none;
	}
}