/* ==========================================================================
   Album Playlists – front end
   Override any token from your theme, e.g.  :root { --albpl-accent: #0a7cff; }
   ========================================================================== */

.albpl-grid,
.albpl-card-wrap,
.albpl-player,
.albpl-lightbox {
	--_accent: var(--albpl-accent, #e4572e);
	--_on-accent: var(--albpl-on-accent, #fff);
	--_bg: var(--albpl-bg, #fff);
	--_fg: var(--albpl-fg, #1d1d1f);
	--_muted: var(--albpl-muted, #6e6e73);
	--_line: var(--albpl-line, rgba(0, 0, 0, .1));
	--_hover: var(--albpl-hover, rgba(0, 0, 0, .045));
	--_radius: var(--albpl-radius, 10px);
	--_font: var(--albpl-font, inherit);
}

.albpl-theme-dark,
.albpl-lightbox.albpl-theme-dark .albpl-player {
	--_bg: var(--albpl-bg, #16161a);
	--_fg: var(--albpl-fg, #f5f5f7);
	--_muted: var(--albpl-muted, #a1a1a6);
	--_line: var(--albpl-line, rgba(255, 255, 255, .12));
	--_hover: var(--albpl-hover, rgba(255, 255, 255, .06));
}

/* Neutralise theme button styles inside the plugin */
.albpl-grid .albpl-card,
.albpl-player button,
.albpl-lightbox button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.albpl-grid .albpl-card:focus-visible,
.albpl-player button:focus-visible,
.albpl-lightbox button:focus-visible,
.albpl-seek:focus-visible {
	outline: 2px solid var(--_accent);
	outline-offset: 3px;
}

.albpl-grid .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Album grid
   -------------------------------------------------------------------------- */
/* Flex (not CSS grid) so a short row can be centred while cards keep their column width. */
.albpl-grid {
	--_cols: 3;
	--_gap-x: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px var(--_gap-x);
	margin: 0 0 1.5em;
	font-family: var(--_font);
}
.albpl-grid--center { justify-content: center; }

.albpl-grid > .albpl-card-wrap {
	flex: 0 0 calc((100% - (var(--_cols) - 1) * var(--_gap-x)) / var(--_cols));
	min-width: 0;
}

.albpl-cols-1 { --_cols: 1; }
.albpl-cols-2 { --_cols: 2; }
.albpl-cols-4 { --_cols: 4; }
.albpl-cols-5 { --_cols: 5; }
.albpl-cols-6 { --_cols: 6; }

@media (max-width: 960px) {
	.albpl-cols-4, .albpl-cols-5, .albpl-cols-6 { --_cols: 3; }
}
@media (max-width: 680px) {
	.albpl-grid:not(.albpl-cols-1) { --_cols: 2; --_gap-x: 16px; row-gap: 24px; }
}
@media (max-width: 360px) {
	.albpl-grid:not(.albpl-cols-1) { --_cols: 1; }
}

.albpl-grid .albpl-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-align: left;
}

.albpl-card-art {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--_radius);
	background: #ddd;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px -8px rgba(0, 0, 0, .25);
	transition: box-shadow .25s ease, transform .25s ease;
}

.albpl-card-art img,
.albpl-card-art .albpl-cover-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.albpl-card-play {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--_accent);
	color: var(--_on-accent);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
}
.albpl-card-play .albpl-icon { width: 22px; height: 22px; margin-left: 0px; }

.albpl-card:hover .albpl-card-art,
.albpl-card:focus-visible .albpl-card-art {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 16px 32px -10px rgba(0, 0, 0, .35);
}
.albpl-card:hover .albpl-card-art img { transform: scale(1.04); }
.albpl-card:hover .albpl-card-play,
.albpl-card:focus-visible .albpl-card-play { opacity: 1; transform: none; }

@media (hover: none) {
	.albpl-card-play { opacity: 1; transform: none; width: 40px; height: 40px; }
}

.albpl-card-title {
	display: block;
	margin-top: 12px;
	font-weight: 600;
	font-size: 1em;
	line-height: 1.3;
}
.albpl-card-meta {
	display: block;
	margin-top: 2px;
	color: var(--_muted);
	font-size: .85em;
}

.albpl-cover-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #3a3a44, #121216);
	color: rgba(255, 255, 255, .35);
}
.albpl-cover-placeholder .albpl-icon { width: 34%; height: 34%; }

/* --------------------------------------------------------------------------
   Player – cover on the left, details + playlist on the right
   -------------------------------------------------------------------------- */
.albpl-player {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 36px;
	align-items: start;
	color: var(--_fg);
	background: var(--_bg);
	font-family: var(--_font);
	text-align: left;
}

.albpl-player--inline {
	margin: 0 0 1.5em;
	padding: 28px;
	border: 1px solid var(--_line);
	border-radius: calc(var(--_radius) + 4px);
}

.albpl-cover { position: sticky; top: 0; }
.albpl-cover img,
.albpl-cover .albpl-cover-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--_radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 20px 40px -16px rgba(0, 0, 0, .4);
}

.albpl-body { min-width: 0; }

.albpl-player .albpl-title {
	margin: 0 0 .4em;
	padding: 0;
	color: inherit;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

.albpl-desc {
	margin: 0 0 22px;
	color: var(--_muted);
	font-size: .95em;
	line-height: 1.6;
}
.albpl-desc > :first-child { margin-top: 0; }
.albpl-desc > :last-child { margin-bottom: 0; }
.albpl-desc a { color: var(--_accent); }

/* Transport */
.albpl-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--_radius);
	background: var(--_hover);
}

.albpl-player .albpl-btn {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--_fg);
	transition: background-color .15s ease, opacity .15s ease, transform .1s ease;
}
.albpl-player .albpl-btn:hover { background: var(--_hover); }
.albpl-player .albpl-btn:active { transform: scale(.94); }
.albpl-player .albpl-btn:disabled { opacity: .3; cursor: default; background: none; }
.albpl-player .albpl-btn .albpl-icon { width: 20px; height: 20px; }

.albpl-player .albpl-play {
	width: 52px;
	height: 52px;
	background: var(--_accent);
	color: var(--_on-accent);
	box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--_accent) 60%, transparent);
}
.albpl-player .albpl-play:hover { background: var(--_accent); filter: brightness(1.08); }
.albpl-player .albpl-play .albpl-icon { width: 24px; height: 24px; }
.albpl-player .albpl-play .albpl-icon-play { margin-left: 0px; }
.albpl-play .albpl-icon-pause,
.albpl-player.is-playing .albpl-play .albpl-icon-play { display: none; }
.albpl-player.is-playing .albpl-play .albpl-icon-pause { display: block; }

.albpl-now { flex: 1 1 auto; min-width: 0; margin-left: 6px; }
.albpl-now-title {
	overflow: hidden;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .92em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.albpl-player.has-error .albpl-now-title { color: #d63638; }

.albpl-seek-row { display: flex; align-items: center; gap: 10px; }
.albpl-time {
	flex: none;
	min-width: 2.6em;
	color: var(--_muted);
	font-size: .75em;
	font-variant-numeric: tabular-nums;
}
.albpl-time-dur { text-align: right; }

.albpl-seek {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	width: 100%;
	height: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: linear-gradient(to right, var(--_accent) var(--albpl-fill, 0%), var(--_line) var(--albpl-fill, 0%));
	cursor: pointer;
}
.albpl-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--_accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.albpl-seek::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--_accent);
}
.albpl-seek::-moz-range-track { background: transparent; }

/* Track list */
.albpl-player .albpl-tracklist {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.albpl-tracklist li { margin: 0; padding: 0; border-bottom: 1px solid var(--_line); }
.albpl-tracklist li:last-child { border-bottom: 0; }
.albpl-tracklist li::before { content: none; }

.albpl-player .albpl-track {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--_fg);
	transition: background-color .15s ease;
}
.albpl-player .albpl-track:hover { background: var(--_hover); }
.albpl-player .albpl-track:focus-visible { outline-offset: -2px; }

.albpl-track-num {
	position: relative;
	color: var(--_muted);
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.albpl-track-info { display: flex; flex-direction: column; min-width: 0; }
.albpl-track-title,
.albpl-track-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.albpl-track-title { font-size: .95em; line-height: 1.35; }
.albpl-track-artist { color: var(--_muted); font-size: .8em; }
.albpl-track-len { color: var(--_muted); font-size: .8em; font-variant-numeric: tabular-nums; }

.albpl-track.is-active .albpl-track-title { color: var(--_accent); font-weight: 600; }

/* Equaliser bars on the active track */
.albpl-eq {
	display: none;
	justify-content: center;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}
.albpl-eq i {
	display: block;
	width: 3px;
	height: 40%;
	border-radius: 1px;
	background: var(--_accent);
}
.albpl-track.is-active .albpl-track-n { display: none; }
.albpl-track.is-active .albpl-eq { display: flex; }
.albpl-player.is-playing .albpl-track.is-active .albpl-eq i { animation: albpl-eq .9s ease-in-out infinite alternate; }
.albpl-player.is-playing .albpl-track.is-active .albpl-eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.albpl-player.is-playing .albpl-track.is-active .albpl-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }

@keyframes albpl-eq {
	from { height: 20%; }
	to { height: 100%; }
}

.albpl-no-tracks { color: var(--_muted); font-style: italic; }

@media (max-width: 760px) {
	.albpl-player { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.albpl-cover { position: static; width: 100%; max-width: 300px; margin: 0 auto; }
	.albpl-player--inline { padding: 18px; }
	.albpl-controls { flex-wrap: wrap; }
	.albpl-now { flex-basis: 100%; margin: 6px 0 0; order: 4; }
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
html.albpl-lock,
html.albpl-lock body { overflow: hidden; }

.albpl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 24px;
}
.albpl-lightbox[hidden] { display: none; }

.albpl-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .25s ease;
}

.albpl-lb-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1040px, 100%);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: hidden;
	border-radius: 16px;
	background: var(--_bg);
	color: var(--_fg);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .25s ease, transform .25s ease;
	outline: none;
}
.albpl-lightbox.albpl-theme-dark .albpl-lb-dialog { --_bg: var(--albpl-bg, #16161a); --_fg: var(--albpl-fg, #f5f5f7); --_hover: var(--albpl-hover, rgba(255, 255, 255, .06)); }

.albpl-lightbox.is-open .albpl-lb-backdrop { opacity: 1; }
.albpl-lightbox.is-open .albpl-lb-dialog { opacity: 1; transform: none; }

.albpl-lb-body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px;
}

.albpl-lightbox .albpl-lb-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--_fg);
	background: var(--_bg);
	transition: background-color .15s ease;
}
.albpl-lightbox .albpl-lb-close:hover { background: var(--_hover); }

.albpl-player--lightbox .albpl-title { padding-right: 40px; }

@media (max-width: 760px) {
	.albpl-lightbox { padding: 0; align-items: end; }
	.albpl-lb-dialog {
		width: 100%;
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 16px 16px 0 0;
		transform: translateY(40px);
	}
	.albpl-lb-body { padding: 24px 18px 28px; }
	.albpl-player--lightbox .albpl-cover { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
	.albpl-grid *, .albpl-player *, .albpl-lightbox * { transition: none !important; animation: none !important; }
}