/**
 * The Gather Grove media player (core 0.74.0, moved from Courses' media.css,
 * courses-interactive spec Part 3).
 *
 * The chrome for the `<video>`/`<audio>` elements `Player\Renderer` emits for
 * direct-URL media, on a lesson, a page, a Communities post or an Elementor
 * widget. Token-driven throughout, so it takes on the studio's brand.
 *
 * The class names keep their `gg-courses-` prefix: studios' saved Elementor
 * styles target them, and renaming would quietly undo those.
 *
 * Nothing here styles a provider embed's insides; YouTube and Vimeo render in
 * an iframe we cannot reach into.
 *
 * **The strip only exists once gg-player.js has mounted.** Before that (and
 * forever, if the script never runs) the element shows the browser's own
 * controls, which these rules leave alone.
 *
 * Accessibility floor: focus rings are never removed, only replaced with the
 * token ring, and every animation is dropped under prefers-reduced-motion.
 */

/* ── The un-mounted element ──────────────────────────────────────────── */

/*
 * Applies whether or not the script ever runs, so native-controls playback is
 * still sized correctly on a page where gg-player.js failed to load.
 */
.gg-courses-media {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var(--gg-radius-md, 8px);
	background: var(--gg-color-neutral, #000);
}

.gg-courses-media--audio {
	border-radius: var(--gg-radius-pill, 999px);
	background: transparent;
}

/* ── Mounted player ──────────────────────────────────────────────────── */

.gg-courses-media-player {
	display: flex;
	flex-direction: column;
	gap: var(--gg-space-2, 0.5rem);
	font-family: var(--gg-type-body, 'Montserrat')), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-ser);
	color: var(--gg-color-text, #2c2a26);
}

.gg-courses-media-player__stage {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: var(--gg-radius-md, 8px);
	background: var(--gg-color-neutral, #000);
	line-height: 0;
}

.gg-courses-media-player--video .gg-courses-media {
	border-radius: 0;
	cursor: pointer;
}

/*
 * Audio has no picture, so the strip is the whole component — give it the
 * surface treatment the video stage gets from its own black box.
 */
.gg-courses-media-player--audio .gg-courses-media-player__controls {
	background: var(--gg-color-surface-raised, #ffffff);
	border: 1px solid var(--gg-color-border, #e8e3d8);
}

/* The element is still in the DOM as the audio source; it just has no UI. */
.gg-courses-media-player--audio .gg-courses-media {
	display: none;
}

/*
 * The error state (gg-player.js hands control back on a dead source): the strip is
 * hidden and the element's own controls return, so nothing here should style a
 * player that is no longer ours.
 */
.gg-courses-media-player.is-errored .gg-courses-media {
	display: block;
}

/* ── Control strip ───────────────────────────────────────────────────── */

.gg-courses-media-player__controls {
	display: flex;
	align-items: center;
	gap: var(--gg-space-2, 0.5rem);
	padding: var(--gg-space-2, 0.5rem) var(--gg-space-3, 0.75rem);
	border-radius: var(--gg-radius-md, 8px);
	background: var(--gg-color-surface, #ffffff);
	font-size: var(--gg-type-size-sm, 0.875rem);
}

/*
 * ⚠ Every rule below is scoped under `__controls` for SPECIFICITY, not for
 * structure — the class name alone is already unique. Elementor's kit
 * stylesheet ships `.elementor-kit-<id> button { background: var(--e-global-color-accent) }`,
 * which is (0,1,1) and beats a lone (0,1,0) class selector: without the extra
 * class every control in this strip comes out painted in the site's accent
 * colour on any Elementor site, which is most Gather Grove studios. Verified on
 * gather-grove-dev (hello-elementor + Elementor Pro), 2026-08-22. Do not
 * "simplify" these selectors back down, and do not reach for !important —
 * one class is enough and leaves the studio a way to override deliberately.
 */

.gg-courses-media-player__controls .gg-courses-media-player__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--gg-radius-pill, 999px);
	background: transparent;
	color: var(--gg-color-text, #2c2a26);
	cursor: pointer;
	transition: background-color var(--gg-duration-fast, 150ms) var(--gg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		color var(--gg-duration-fast, 150ms) var(--gg-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.gg-courses-media-player__controls .gg-courses-media-player__button:hover {
	background: var(--gg-color-primary-soft, color-mix(in srgb, var(--gg-color-primary, #254032) 10%, #fff));
	color: var(--gg-color-primary-strong, color-mix(in srgb, var(--gg-color-primary, #254032) 82%, #000));
}

.gg-courses-media-player__controls .gg-courses-media-player__button:focus-visible {
	outline: none;
	box-shadow: var(--gg-shadow-focus, 0 0 0 3px var(--gg-color-focus-ring, rgba(74, 124, 74, 0.35)));
}

.gg-courses-media-player__controls .gg-courses-media-player__play {
	background: var(--gg-color-primary, #254032);
	color: var(--gg-color-text-inverse, #fefaf7);
}

.gg-courses-media-player__controls .gg-courses-media-player__play:hover {
	background: var(--gg-color-primary-strong, color-mix(in srgb, var(--gg-color-primary, #254032) 82%, #000));
	color: var(--gg-color-text-inverse, #fefaf7);
}

/* ── Scrubber ────────────────────────────────────────────────────────── */

.gg-courses-media-player__scrub {
	position: relative;
	flex: 1 1 auto;
	min-width: 4rem;
	display: flex;
	align-items: center;
	height: 1.25rem;
}

/*
 * Buffered-ahead bar. Sits behind the range input, painted from the
 * --gg-courses-buffered percentage gg-player.js sets. Purely informational, so it
 * is not in the tab order and carries no semantics.
 */
.gg-courses-media-player__buffered {
	--gg-courses-buffered: 0;

	position: absolute;
	inset-inline: 0;
	z-index: 0;
	height: 4px;
	border-radius: var(--gg-radius-pill, 999px);
	background: linear-gradient(
		to right,
		var(--gg-color-border-strong, #c9c3b4) calc(var(--gg-courses-buffered) * 1%),
		var(--gg-color-border, #e8e3d8) 0
	);
	pointer-events: none;
}

/*
 * A real <input type="range">, so keyboard stepping, screen-reader value
 * announcement and touch targets come from the platform. The appearance is
 * reset, the behavior is not.
 */
.gg-courses-media-player__controls .gg-courses-media-player__seek,
.gg-courses-media-player__controls .gg-courses-media-player__volume {
	--gg-courses-seek: 0;

	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 1.25rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/*
 * ⚠ The seek input must be POSITIONED to paint above the buffered bar.
 * The bar is absolutely positioned, and a positioned element paints over a
 * non-positioned sibling no matter what the DOM order says — so without this
 * the bar covers the whole input: the playhead is sliced in half by the track
 * line, and the played-progress fill disappears entirely behind it. Both read
 * as "the scrubber doesn't work", and both are this one line.
 */
.gg-courses-media-player__controls .gg-courses-media-player__seek {
	position: relative;
	z-index: 1;
}

.gg-courses-media-player__controls .gg-courses-media-player__volume {
	flex: 0 1 5rem;
	min-width: 3rem;
}

/*
 * The seek track's unplayed remainder is TRANSPARENT on purpose: the buffered
 * bar sits behind it and shows through. The volume track has nothing behind it,
 * so it gets a real base colour instead — sharing the seek's gradient made it
 * invisible on the dev site, which is how this was caught.
 */
.gg-courses-media-player__controls .gg-courses-media-player__seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: var(--gg-radius-pill, 999px);
	background: linear-gradient(
		to right,
		var(--gg-color-primary, #254032) calc(var(--gg-courses-seek) * 1%),
		transparent 0
	);
}

.gg-courses-media-player__controls .gg-courses-media-player__volume::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: var(--gg-radius-pill, 999px);
	background: linear-gradient(
		to right,
		var(--gg-color-primary, #254032) calc(var(--gg-courses-seek) * 1%),
		var(--gg-color-border, #e8e3d8) 0
	);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek::-moz-range-track,
.gg-courses-media-player__controls .gg-courses-media-player__volume::-moz-range-track {
	height: 4px;
	border-radius: var(--gg-radius-pill, 999px);
	background: var(--gg-color-border, #e8e3d8);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek::-moz-range-progress,
.gg-courses-media-player__controls .gg-courses-media-player__volume::-moz-range-progress {
	height: 4px;
	border-radius: var(--gg-radius-pill, 999px);
	background: var(--gg-color-primary, #254032);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek::-webkit-slider-thumb,
.gg-courses-media-player__controls .gg-courses-media-player__volume::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: -0.25rem;
	border: 0;
	border-radius: var(--gg-radius-pill, 999px);
	background: var(--gg-color-primary, #254032);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek::-moz-range-thumb,
.gg-courses-media-player__controls .gg-courses-media-player__volume::-moz-range-thumb {
	width: 0.875rem;
	height: 0.875rem;
	border: 0;
	border-radius: var(--gg-radius-pill, 999px);
	background: var(--gg-color-primary, #254032);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek:focus-visible,
.gg-courses-media-player__controls .gg-courses-media-player__volume:focus-visible {
	outline: none;
	box-shadow: var(--gg-shadow-focus, 0 0 0 3px var(--gg-color-focus-ring, rgba(74, 124, 74, 0.35)));
	border-radius: var(--gg-radius-pill, 999px);
}

.gg-courses-media-player__controls .gg-courses-media-player__seek[disabled] {
	cursor: default;
	opacity: 0.5;
}

/* ── Time ────────────────────────────────────────────────────────────── */

.gg-courses-media-player__time {
	flex: none;
	font-family: var(--gg-type-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
	font-size: var(--gg-type-size-xs, 0.75rem);
	color: var(--gg-color-text-muted, #6b675f);
	/* Tabular figures stop the strip twitching as the seconds tick over. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── Speed menu ──────────────────────────────────────────────────────── */

.gg-courses-media-player__speed {
	position: relative;
	flex: none;
}

.gg-courses-media-player__controls .gg-courses-media-player__speed-toggle {
	width: auto;
	min-width: 2.75rem;
	padding-inline: var(--gg-space-2, 0.5rem);
	font-family: var(--gg-type-label, 'Kollektif'), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-seri);
	font-size: var(--gg-type-size-xs, 0.75rem);
	font-weight: var(--gg-type-weight-medium, 500);
	letter-spacing: var(--gg-type-tracking-wide, 0.04em);
}

.gg-courses-media-player__speed-list {
	position: absolute;
	bottom: calc(100% + var(--gg-space-2, 0.5rem));
	inset-inline-end: 0;
	z-index: var(--gg-z-elevated, 10);
	min-width: 5rem;
	margin: 0;
	padding: var(--gg-space-1, 0.25rem);
	list-style: none;
	border: 1px solid var(--gg-color-border, #e8e3d8);
	border-radius: var(--gg-radius-md, 8px);
	background: var(--gg-color-surface-raised, #ffffff);
	box-shadow: var(--gg-shadow-md, 0 4px 12px rgba(28, 26, 22, 0.08));
}

.gg-courses-media-player__speed-item {
	margin: 0;
	list-style: none;
}

.gg-courses-media-player__controls .gg-courses-media-player__speed-choice {
	display: block;
	width: 100%;
	padding: var(--gg-space-1, 0.25rem) var(--gg-space-2, 0.5rem);
	border: 0;
	border-radius: var(--gg-radius-sm, 4px);
	background: transparent;
	color: var(--gg-color-text, #2c2a26);
	font-family: var(--gg-type-body, 'Montserrat')), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-ser);
	font-size: var(--gg-type-size-sm, 0.875rem);
	text-align: start;
	cursor: pointer;
}

.gg-courses-media-player__controls .gg-courses-media-player__speed-choice:hover {
	background: var(--gg-color-primary-soft, color-mix(in srgb, var(--gg-color-primary, #254032) 10%, #fff));
	color: var(--gg-color-primary-strong, color-mix(in srgb, var(--gg-color-primary, #254032) 82%, #000));
}

.gg-courses-media-player__controls .gg-courses-media-player__speed-choice:focus-visible {
	outline: none;
	box-shadow: var(--gg-shadow-focus, 0 0 0 3px var(--gg-color-focus-ring, rgba(74, 124, 74, 0.35)));
}

.gg-courses-media-player__controls .gg-courses-media-player__speed-choice[aria-checked='true'] {
	font-weight: var(--gg-type-weight-bold, 600);
	color: var(--gg-color-primary-strong, color-mix(in srgb, var(--gg-color-primary, #254032) 82%, #000));
}

/* ── Fullscreen ──────────────────────────────────────────────────────── */

/*
 * In fullscreen the wrapper IS the viewport, so the stage takes the space the
 * lesson layout was giving it and the strip sits over the picture rather than
 * under it — a bar below a fullscreen video would letterbox it.
 */
.gg-courses-media-player:fullscreen {
	width: 100%;
	height: 100%;
	gap: 0;
	background: var(--gg-color-neutral, #000);
}

.gg-courses-media-player:fullscreen .gg-courses-media-player__stage {
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 0;
}

.gg-courses-media-player:fullscreen .gg-courses-media {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * A scrim, not a surface — and the one place this file deliberately does not
 * use a token. In fullscreen the strip sits over arbitrary video, so it needs
 * *guaranteed* contrast: `--gg-color-overlay` resolves to 40% opacity in the
 * shipped tokens, which washes the controls out over bright footage. Brand
 * colour still comes through on the play button and the scrub fill; only the
 * backing needed to stop being negotiable.
 */
.gg-courses-media-player:fullscreen .gg-courses-media-player__controls {
	border-radius: 0;
	background: linear-gradient( to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6) );
	color: #fff;
}

/*
 * Same reason: the muted text token is a warm grey meant for a light surface
 * and is close to unreadable on the scrim.
 */
.gg-courses-media-player:fullscreen .gg-courses-media-player__time {
	color: rgba(255, 255, 255, 0.85);
}

.gg-courses-media-player:fullscreen .gg-courses-media-player__controls .gg-courses-media-player__button {
	color: #fff;
}

/* ── Elementor media widgets ─────────────────────────────────────────── */

/*
 * The standalone Video/Audio Player widgets render the same element the lesson
 * does, so they need almost nothing of their own — only the lesson's page
 * measure removed, since an Elementor container already decides the width.
 */
.gg-courses-media-widget .gg-courses-lesson__video,
.gg-courses-media-widget .gg-courses-lesson__audio {
	margin: 0;
}

.gg-courses-media-widget__empty {
	margin: 0;
	padding: var(--gg-space-5, 1.5rem);
	border: 1px dashed var(--gg-color-border, #e8e3d8);
	border-radius: var(--gg-radius-md, 8px);
	color: var(--gg-color-text-muted, #6b675f);
	font-family: var(--gg-type-body, 'Montserrat')), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-ser);
	font-size: var(--gg-type-size-sm, 0.875rem);
	text-align: center;
}

/* ── Narrow screens ──────────────────────────────────────────────────── */

/*
 * Most members watch on a phone. Below 480px the volume slider is the first
 * thing to go: it is the one control with a hardware equivalent on every
 * device, and dropping it keeps the scrub track wide enough to actually hit.
 * Mute stays — muting is not the same gesture as turning the phone down.
 */
@media (max-width: 480px) {
	.gg-courses-media-player__volume {
		display: none;
	}

	.gg-courses-media-player__controls {
		gap: var(--gg-space-1, 0.25rem);
		padding-inline: var(--gg-space-2, 0.5rem);
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gg-courses-media-player__button,
	.gg-courses-media-player__speed-choice {
		transition: none;
	}
}


/* ── Provider embeds and plain elements (from Courses' player.css) ───── */

/* Responsive 16:9 wrapper for oEmbed iframes. */
.gg-courses-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.gg-courses-embed iframe,
.gg-courses-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--gg-radius-md, 8px);
}

.gg-player-media video,
.gg-player-media audio {
	width: 100%;
}