/**
 * "Hear ErgVoxi in Action" — audio demo section + player.
 * Layout mirrors the section rhythm already established for dark sections
 * in the theme's redesign.css (continuous dark surface, .vai-eyebrow/.vai-h2
 * inside .vai-section--dark); only the card/player styling below is new.
 */

.vai-avdemo {
	background: var( --vai-color-dark-bg );
}

/* The play/pause and volume/mute icon pairs rely on the [hidden] attribute
   to show only one at a time; explicitly enforce it since it wasn't being
   applied to these inline <svg> elements, leaving both icons visible. */
.vai-avplayer [hidden] {
	display: none;
}

.vai-avdemo-layout {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.vai-avdemo-copy {
	flex: 1 1 380px;
}

.vai-avdemo-card {
	flex: 1 1 380px;
	background: var( --vai-color-dark-surface );
	border: 1px solid var( --vai-color-dark-border );
	border-radius: var( --vai-radius-lg, 20px );
	box-shadow: var( --vai-shadow-lg, 0 24px 60px rgba( 0, 0, 0, 0.22 ) );
	padding: 28px;
}

.vai-avdemo-placeholder {
	color: var( --vai-color-dark-muted );
	font-size: 0.95rem;
	margin: 0;
}

.vai-avdemo-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --vai-color-dark-text );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.vai-avdemo-label-muted {
	color: var( --vai-color-dark-muted );
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
}

.vai-avdemo-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --vai-color-live-demo );
	flex-shrink: 0;
}

/* ---- Player ---- */

.vai-avplayer-row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.vai-avplayer-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	/* Astra applies a global `padding: 15px 30px` + line-height to every bare
	   <button> — without resetting them here, that padding alone is wider
	   than this 52px circle, so the flexbox min-content floor silently grows
	   the button (and collapses the icon inside it) past its intended size. */
	padding: 0;
	line-height: 1;
	border-radius: 50%;
	border: none;
	background: var( --vai-color-live-demo );
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.vai-avplayer-toggle:hover,
.vai-avplayer-toggle:focus-visible {
	background: var( --vai-color-live-demo-hover );
	transform: translateY( -1px );
}

.vai-avplayer-toggle:focus-visible {
	outline: 3px solid var( --vai-color-accent );
	outline-offset: 2px;
}

.vai-avplayer-toggle svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.vai-avplayer-wave {
	position: relative;
	flex: 1 1 auto;
	height: 40px;
}

.vai-avplayer-wave-base,
.vai-avplayer-wave-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	overflow: hidden;
}

.vai-avplayer-wave-base {
	width: 100%;
}

.vai-avplayer-wave-fill {
	width: 0%;
	/* Set inline by JS to the current playback fraction. */
}

.vai-avplayer-wave-base span,
.vai-avplayer-wave-fill span {
	width: 3px;
	flex-shrink: 0;
	border-radius: 2px;
}

.vai-avplayer-wave-base span {
	background: var( --vai-color-dark-border );
}

.vai-avplayer-wave-fill span {
	background: var( --vai-color-live-demo );
}

.vai-avplayer-seek {
	width: 100%;
	/* Extra top margin so the seek thumb clears the toggle button sitting
	   above it (they share the same left edge). */
	margin: 30px 0 10px;
	appearance: none;
	-webkit-appearance: none;
	height: 4px;
	border-radius: 2px;
	background: var( --vai-color-dark-border );
	cursor: pointer;
}

.vai-avplayer-seek::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var( --vai-color-live-demo );
	border: 2px solid var( --vai-color-dark-surface );
	margin-top: -3.5px;
	cursor: pointer;
}

.vai-avplayer-seek::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var( --vai-color-live-demo );
	border: 2px solid var( --vai-color-dark-surface );
	cursor: pointer;
}

.vai-avplayer-seek::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: var( --vai-color-dark-border );
}

.vai-avplayer-seek:focus-visible {
	outline: 3px solid var( --vai-color-accent );
	outline-offset: 3px;
}

.vai-avplayer-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.vai-avplayer-time {
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
	color: var( --vai-color-dark-muted );
	white-space: nowrap;
}

.vai-avplayer-volume-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vai-avplayer-mute {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	/* Same Astra global button padding/line-height reset as .vai-avplayer-toggle. */
	padding: 0;
	line-height: 1;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var( --vai-color-dark-muted );
	cursor: pointer;
	transition: color 0.15s ease;
}

.vai-avplayer-mute:hover,
.vai-avplayer-mute:focus-visible {
	color: var( --vai-color-dark-text );
}

.vai-avplayer-mute:focus-visible {
	outline: 3px solid var( --vai-color-accent );
	outline-offset: 2px;
}

.vai-avplayer-mute svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.vai-avplayer-volume {
	width: 72px;
	appearance: none;
	-webkit-appearance: none;
	height: 4px;
	border-radius: 2px;
	background: var( --vai-color-dark-border );
	cursor: pointer;
}

.vai-avplayer-volume::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --vai-color-dark-text );
	margin-top: -4px;
	cursor: pointer;
}

.vai-avplayer-volume::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --vai-color-dark-text );
	cursor: pointer;
}

.vai-avplayer-volume:focus-visible {
	outline: 3px solid var( --vai-color-accent );
	outline-offset: 3px;
}

@media ( max-width: 767px ) {
	.vai-avdemo-layout {
		flex-direction: column;
		align-items: stretch;
	}

	/* flex: 1 1 380px above sizes the desktop row's *width*; once the layout
	   switches to a column, that same 380px basis applies to *height*
	   instead, padding both the copy and the card out to a 380px-tall box
	   even though their content is much shorter. Let height follow content. */
	.vai-avdemo-copy,
	.vai-avdemo-card {
		flex: none;
	}

	.vai-avdemo-card {
		padding: 22px;
	}

	/* Mobile browsers control hardware volume directly; a software slider is
	   at best redundant and at worst non-functional (notably iOS Safari). */
	.vai-avplayer-volume {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vai-avplayer-toggle {
		transition: none;
	}
}