/*
 * Byline Audio — Plyr overrides.
 *
 * Maps Plyr's CSS custom properties to theme.json tokens where available,
 * with sensible fallbacks for any theme.
 *
 * Common WP theme token slugs: base, contrast, accent-1 through accent-6.
 * Full list of Plyr CSS vars: https://github.com/sampotts/plyr#css
 */

/* ── Global Plyr audio theming — pill shape ── */

.plyr--audio {
	--plyr-color-main: var(--wp--preset--color--accent-3, #0093c9);
	--plyr-audio-controls-background: var(--wp--preset--color--base, #12284c);
	--plyr-audio-control-color: var(--wp--preset--color--contrast, #FFF);
	--plyr-audio-control-color-hover: var(--wp--preset--color--accent-3, #12284c);
	--plyr-range-fill-background: var(--wp--preset--color--accent-3, #ffffff8a);
	--plyr-range-track-height: 4px;
	--plyr-range-thumb-height: 12px;
	--plyr-range-thumb-background: var(--wp--preset--color--accent-3, #FFF);
	--plyr-range-thumb-shadow: none;
	--plyr-audio-progress-buffered-background: #ffffff2b;
	--plyr-tooltip-background: var(--wp--preset--color--contrast, #333);
	--plyr-tooltip-color: #fff;
	--plyr-font-family: inherit;
	--plyr-font-size-time: 0.75rem;
	--plyr-control-icon-size: 22px;

	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Pill-shaped control bar — generous horizontal padding
   to keep content clear of the curved edges. */
.plyr--audio .plyr__controls {
	border-radius: 999px;
	padding: 0.45rem 1.25rem;
	gap: 0.625rem;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* Rounder control buttons */
.plyr--audio .plyr__control {
	flex-shrink: 0;
	padding: 0.375rem;
	border-radius: 50%;
}

/* Progress scrubber — let it fill available space */
.plyr--audio .plyr__progress__container {
	flex: 1;
	min-width: 0;
	margin: 0 0.25rem;
}

.plyr--audio input[type="range"] {
	border-radius: 999px;
}

/* Time display */
.plyr--audio .plyr__time {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
	padding: 0 0.125rem;
}

/* Volume — fixed width, no overflow */
.plyr--audio .plyr__volume {
	flex-shrink: 0;
	min-width: 64px;
	width: 100px;
}

/* ── Wrapper — acts as container query context ── */

.iba-audio-player {
	container-type: inline-size;
	margin-block: 1.5rem;
}

.wp-block-audio {
	container-type: inline-size;
}

/* ── Responsive controls via container queries ──
   Hide least-essential controls first as the player narrows.
   Priority: volume → duration → current-time.
   Play + progress always remain. */

/* Under 400px: hide volume */
@container (max-width: 400px) {
	.plyr--audio .plyr__progress__container {
		display: none;
	}
}

/* Under 300px: also hide duration */
@container (max-width: 300px) {
	.plyr--audio .plyr__time--duration {
		display: none;
	}
}

/* Under 220px: also hide current time — just play + scrubber */
@container (max-width: 220px) {
	.plyr--audio .plyr__time--current {
		display: none;
	}

	.plyr--audio .plyr__controls {
		padding: 0.375rem 0.75rem;
		gap: 0.375rem;
	}
}

/* ── Featured variant (dark/inverted for prominent placement) ── */

.iba-audio-player--featured .plyr--audio {
	--plyr-audio-controls-background: var(--wp--preset--color--contrast, #1a1a2e);
	--plyr-audio-control-color: rgba(255, 255, 255, 0.8);
	--plyr-audio-control-color-hover: #fff;
	--plyr-color-main: #fff;
	--plyr-range-fill-background: #fff;
	--plyr-range-thumb-background: #fff;
	--plyr-audio-progress-buffered-background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.iba-audio-player--featured .plyr--audio .plyr__time {
	opacity: 0.6;
}

/* ── Compact variant (for tight card layouts) ── */

.iba-audio-player--compact .plyr--audio {
	--plyr-font-size-time: 0.6875rem;
	--plyr-range-thumb-height: 8px;
	--plyr-range-track-height: 3px;
}

.iba-audio-player--compact .plyr--audio .plyr__controls {
	padding: 0.25rem 1rem;
	gap: 0.5rem;
}

.iba-audio-player--compact .plyr--audio .plyr__control {
	padding: 0.25rem;
}

.iba-audio-player--compact .plyr--audio .plyr__volume {
	min-width: 48px;
	max-width: 64px;
}

.iba-audio-player--compact {
	margin-block: 0.75rem;
}

/* ── Core Audio block enhancement ── */

.wp-block-audio .plyr--audio {
	border-radius: 999px;
}