/*
 * AURA One Site Kit — AURA Video.
 *
 * Loaded only on pages that use the widget.
 *
 * Four layers, each owning one thing, because two transform systems on one node
 * overwrite each other:
 *
 *   .aura-video__motion-media   entrance motion, and nothing else
 *   .aura-video__frame          radius, overflow and the mask
 *   .aura-video__media          the player: fit, focal point and scale
 *   .aura-video__overlay        colour only, never intercepts a pointer
 *
 * Full width here means 100% of the Elementor parent. There is no 100vw and no
 * negative margin: an edge-to-edge hero is made by giving the parent container
 * full width, which is Elementor's job and not this widget's.
 */

.aura-video {
	--aura-video-ratio: 16 / 9;
	--aura-video-min-height: 0px;
	--aura-video-height: 60vh;
	--aura-video-radius: 0px;
	--aura-video-focal-x: 50%;
	--aura-video-focal-y: 50%;
	--aura-video-media-scale: 1;
	--aura-video-media-opacity: 1;
	--aura-video-mask-fit: contain;
	--aura-video-overscan: 1.35;
	/* Every embed transform consumes this value. Background playback raises it
	   below, so a later fit rule cannot accidentally remove the crop. */
	--aura-video-provider-scale: 1;

	--aura-video-content-width: 42rem;
	--aura-video-content-padding: clamp(1rem, 4vw, 3rem);
	--aura-video-content-gap: 1rem;

	--aura-video-overlay-color: rgb(23 32 28 / 45%);
	--aura-video-overlay-color-end: rgb(23 32 28 / 0%);
	--aura-video-overlay-angle: 180deg;

	--aura-video-tag-color: var(--aura-color-muted, #5b655f);
	--aura-video-eyebrow-color: var(--aura-color-accent, #285c4d);
	--aura-video-title-color: var(--aura-color-text, #17201c);
	--aura-video-excerpt-color: var(--aura-color-muted, #5b655f);

	--aura-video-action-padding: .75rem 1.25rem;
	--aura-video-action-gap: .75rem;
	--aura-video-action-radius: var(--aura-radius-button, 999px);
	--aura-video-action-color-normal: var(--aura-color-accent-contrast, #fff);
	--aura-video-action-background-normal: var(--aura-color-accent, #285c4d);
	--aura-video-action-color-hover: var(--aura-video-action-color-normal);
	--aura-video-action-background-hover: var(--aura-video-action-background-normal);
	--aura-video-action-color-focus: var(--aura-video-action-color-normal);
	--aura-video-action-background-focus: var(--aura-video-action-background-normal);

	--aura-video-play-size: 4.5rem;
	--aura-video-play-color: var(--aura-color-accent, #285c4d);
	--aura-video-play-background: var(--aura-color-accent-contrast, #fff);
	--aura-video-play-background-hover: var(--aura-video-play-background);

	--aura-video-lightbox-backdrop: rgb(9 12 11 / 88%);
	--aura-video-lightbox-width: min(72rem, 92vw);
	--aura-video-lightbox-close: #fff;

	--aura-video-transition: 220ms;

	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	font-family: var(--aura-font-body, ui-sans-serif, system-ui, sans-serif);
}

/* AURA Video can be taller than an explicitly sized Elementor Container. The
   controller measures the rendered component and exposes only minimums, so
   surrounding layout may grow naturally but can never close over the video. */
.aura-video__elementor-host {
	min-block-size: var(--aura-video-host-min-height) !important;
}

/*
 * Elementor 4's public atomic stylesheet no longer assigns a default width to
 * every custom widget inside a flex container. The editor still does, which
 * made AURA Video appear correct to an administrator while visitors briefly
 * saw the host collapse to the poster's intrinsic width. Keep the fix scoped
 * to this block widget and honour Elementor's responsive width token.
 */
.elementor :where(.e-con, .e-con-inner) > .elementor-widget-aura-one-site-kit-video {
	inline-size: var(--container-widget-width, 100%);
}

.aura-video__elementor-owner {
	min-block-size: var(--aura-video-owner-min-height) !important;
}

/* Elementor does not regenerate page CSS for a new control until a document
   is saved again. The controller therefore applies these utility classes for
   the Automatic tablet/phone default as well as explicit Fill. A zero flex
   basis lets the available parent height win over the Hero's min-content size;
   the configured video height remains the lower bound. */
.aura-video__elementor-fill {
	display: flex;
	flex-direction: column !important;
	flex: 1 1 0 !important;
	align-self: stretch;
}

.aura-video__elementor-fill > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
}

.aura-video--hero.aura-video--fill-wrapper {
	flex: 1 1 0;
	block-size: auto !important;
	min-block-size: var(--aura-video-height) !important;
}

.aura-video--hero.aura-video--fill-wrapper .aura-video__motion-media,
.aura-video--hero.aura-video--fill-wrapper .aura-video__frame {
	block-size: 100% !important;
	min-block-size: 0 !important;
}

/* ------------------------------------------------------------- Media layers */

.aura-video__motion-media {
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}

.aura-video__frame {
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	aspect-ratio: var(--aura-video-ratio);
	min-block-size: var(--aura-video-min-height);
	/* Fit is applied to the media, not to the frame, so the frame may be any
	   shape and the picture still fills it. */
	border-radius: var(--aura-video-radius);
	/* The radius lives here so it clips the poster, a local video and an
	   embedded iframe alike, which none of them would do on their own. */
	overflow: hidden;
	background: var(--aura-color-surface-alt, #f2eee6);
}

/* Elementor device previews prewarm alternate remote sources here. It remains
   inside the clipped media frame, cannot affect layout and is never emitted on
   the public page unless the editor-preview flag is active. */
.aura-video__responsive-preload {
	position: absolute;
	inset: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

/*
 * An aspect ratio derives the height from the width, so min-block-size can only
 * ever make the frame taller. Asking for a short banner therefore does nothing
 * until the ratio is taken out of the way, which is what Fixed height does.
 */
.aura-video--height-fixed .aura-video__motion-media {
	block-size: var(--aura-video-height);
	min-block-size: 0;
}

.aura-video--height-fixed .aura-video__frame {
	aspect-ratio: auto;
	block-size: 100%;
	min-block-size: 0;
}

/* In a hero, media, overlay and content share one grid area. Fixing only the
   frame left the grid/container free to grow after a source refresh. Keep the
   complete component on the configured responsive height and clip any remote
   player geometry at that boundary. Inline and card presentations remain auto
   height so their editorial text can continue below the fixed media frame. */
.aura-video--hero.aura-video--height-fixed {
	block-size: var(--aura-video-height);
	min-block-size: 0;
	overflow: hidden;
}

.aura-video--hero.aura-video--height-fixed .aura-video__motion-media {
	block-size: 100%;
}

/*
 * Cropping the provider out of a decorative background.
 *
 * A third party's player cannot be told to be quiet. Vimeo moved title, byline
 * and portrait to the video's own settings on vimeo.com and gates several of
 * them behind the owner's plan; YouTube decides its branding for itself. Sending
 * the documented parameters is still right, but it is a request, not a
 * guarantee, and on somebody else's video it is often refused.
 *
 * What no provider can refuse is geometry. Every player draws its chrome — the
 * title bar along the top, the controls along the bottom — at its own edges. So
 * a background enlarges the player past the frame and centres it: the edges, and
 * everything painted on them, fall outside the area the frame clips to. The
 * picture is cropped, which is exactly what a decorative background wants
 * anyway, and pointer-events are dropped so nothing under there is clickable
 * even by accident.
 *
 * This is deliberately limited to background playback. Cropping a player the
 * visitor is meant to operate would hide the controls they need.
 */
.aura-video--playback-background .aura-video__media {
	pointer-events: none;
	touch-action: pan-y pinch-zoom;
}

/* YouTube paints a central Pause state inside its cross-origin iframe. Keep an
   immediate poster above it only until the API confirms PLAYING and that brief
   provider affordance has faded; the rest of the component is never hidden. */
.aura-video--youtube-starting .aura-video__poster {
	z-index: 1;
}

.aura-video--youtube-starting .aura-video__media--embed {
	opacity: 0;
}

.aura-video--playback-background .aura-video__media--embed {
	transition: opacity var(--aura-video-transition) ease;
}

.aura-video--playback-background {
	--aura-video-provider-scale: var(--aura-video-overscan);
}

.aura-video--playback-background .aura-video__media--embed,
.aura-video--playback-background .aura-video__media--oembed {
	inline-size: auto;
	block-size: auto;
	min-inline-size: 100%;
	min-block-size: 100%;
	aspect-ratio: var(--aura-video-ratio);
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%) scale(var(--aura-video-provider-scale));
}

/*
 * An iframe has no object-fit, so covering a frame of a different shape means
 * growing the frame's own aspect ratio until both dimensions are filled and
 * centring the overflow. The frame clips the rest.
 */
.aura-video--fit-cover .aura-video__media--embed,
.aura-video--fit-cover .aura-video__media--oembed {
	inline-size: auto;
	block-size: auto;
	min-inline-size: 100%;
	min-block-size: 100%;
	aspect-ratio: var(--aura-video-ratio);
	inset: 50% auto auto 50%;
	/* Keep the background crop when Cover is also active (the default). The
	   previous declaration replaced the whole transform and exposed YouTube's
	   title/channel header and bottom transport controls again. */
	transform: translate(-50%, -50%) scale(var(--aura-video-provider-scale));
}

/* Once the controller knows the frame dimensions, size the provider itself at
   the final cover rectangle. Unlike transform scaling, this larger layout box
   is visible to YouTube/Vimeo and helps their adaptive stream selection choose
   a resolution suitable for the pixels that will actually be displayed. */
.aura-video--provider-sized.aura-video--fit-cover .aura-video__media--embed,
.aura-video--provider-sized.aura-video--fit-cover .aura-video__media--oembed {
	inline-size: var(--aura-video-provider-width);
	block-size: var(--aura-video-provider-height);
	min-inline-size: 0;
	min-block-size: 0;
	transform: translate(-50%, -50%);
}

.aura-video--provider-sized.aura-video--fit-cover.aura-video--playback-background .aura-video__media--embed,
.aura-video--provider-sized.aura-video--fit-cover.aura-video--playback-background .aura-video__media--oembed {
	/* Keep the responsive Elementor slider live: changing overscan updates the
	   real provider box through CSS without waiting for another resize event. */
	inline-size: calc(var(--aura-video-provider-width) * var(--aura-video-overscan));
	block-size: calc(var(--aura-video-provider-height) * var(--aura-video-overscan));
}

.aura-video--masked .aura-video__frame {
	-webkit-mask-image: var(--aura-video-mask);
	mask-image: var(--aura-video-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--aura-video-mask-fit);
	mask-size: var(--aura-video-mask-fit);
}

.aura-video__poster,
.aura-video__media {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.aura-video__poster {
	object-fit: cover;
	object-position: var(--aura-video-focal-x) var(--aura-video-focal-y);
}

.aura-video__media--file,
.aura-video__media--embed {
	opacity: var(--aura-video-media-opacity);
}

.aura-video__media--file {
	object-fit: cover;
	object-position: var(--aura-video-focal-x) var(--aura-video-focal-y);
	transform: scale(var(--aura-video-media-scale));
}

.aura-video--fit-contain .aura-video__poster,
.aura-video--fit-contain .aura-video__media--file {
	object-fit: contain;
}

.aura-video__media--oembed {
	position: absolute;
	inset: 0;
}

.aura-video__media--oembed iframe,
.aura-video__media--oembed video {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* A deferred player shows its poster until the visitor asks for it. */
.aura-video--playback-lightbox .aura-video__frame {
	cursor: pointer;
}

/* ------------------------------------------------- Scrolling over the media */

/*
 * A vertical gesture that starts on the video still belongs to the page.
 *
 * Nothing here calls preventDefault on a live gesture and nothing here drags
 * the page with a mouse. The rules only stop surfaces that have no interactive
 * job from claiming a movement they cannot answer:
 *
 *   - `touch-action: pan-y` declares the one axis these surfaces pass through.
 *     `pinch-zoom` stays with it, because removing zoom from a visitor who
 *     needs it is not an acceptable price for a scroll fix. A tap is unaffected
 *     by touch-action, so Play, the lightbox trigger and every hero link keep
 *     their ordinary action.
 *   - `pointer-events: none` is reserved for a player the visitor cannot
 *     operate. A provider iframe handles touch inside its own cross-origin
 *     document, where the page can no longer get the gesture back; dropping it
 *     out of hit testing is the only thing that reliably prevents that.
 *
 * A player with controls is excluded from both, by mode and by attribute, so a
 * scrubber the visitor is meant to drag still receives its own gesture.
 */
.aura-video__frame,
.aura-video__poster {
	touch-action: pan-y pinch-zoom;
}

.aura-video__media--file:not([controls]) {
	pointer-events: none;
	touch-action: pan-y pinch-zoom;
}

/* Controls turned off, in any playback mode. Background already forces this
   state; an inline provider without transport controls reaches it too, and its
   iframe was swallowing the swipe with nothing to offer in return. */
.aura-video--no-controls .aura-video__media--embed,
.aura-video--no-controls .aura-video__media--oembed {
	pointer-events: none;
	touch-action: pan-y pinch-zoom;
}

/* ---------------------------------------------------------------- Overlay */

.aura-video__overlay {
	position: absolute;
	inset: 0;
	border-radius: var(--aura-video-radius);
	/* Visual only. An overlay that swallowed clicks would break every control
	   and link underneath it. */
	pointer-events: none;
}

.aura-video--overlay-color .aura-video__overlay {
	background: var(--aura-video-overlay-color);
}

.aura-video--overlay-gradient .aura-video__overlay {
	background: linear-gradient(var(--aura-video-overlay-angle), var(--aura-video-overlay-color-end), var(--aura-video-overlay-color));
}

/* ---------------------------------------------------------------- Content */

.aura-video__content {
	display: flex;
	flex-direction: column;
	gap: var(--aura-video-content-gap);
	max-inline-size: var(--aura-video-content-width);
}

.aura-video--inline .aura-video__content,
.aura-video--card .aura-video__content {
	padding-block-start: var(--aura-video-content-gap);
}

/*
 * A hero layers its content above the media. The text stays in normal logical
 * flow inside that layer, so it wraps and reorders like ordinary content
 * instead of being positioned piece by piece.
 */
.aura-video--hero {
	display: grid;
}

.aura-video--hero .aura-video__motion-media,
.aura-video--hero .aura-video__overlay,
.aura-video--hero .aura-video__content,
.aura-video--hero .aura-video__play {
	grid-area: 1 / 1;
}

.aura-video--hero .aura-video__content {
	position: relative;
	z-index: 2;
	display: flex;
	box-sizing: border-box;
	min-inline-size: 0;
	inline-size: min(100%, var(--aura-video-content-width));
	max-block-size: 100%;
	/* Scrolls its own text only while that text really is taller than the hero,
	   and never sideways: a hero that grew a horizontal scrollbar would be a
	   worse bug than the one this rule exists to avoid. */
	overflow-x: hidden;
	overflow-y: auto;
	/* Never `contain`. A hero whose text overflows would scroll that text to
	   the end and then refuse to pass the movement on: the gesture died at the
	   hero and the page never moved, measured. Engines differ on whether a
	   contained scroller with nothing to scroll also refuses; `auto` settles
	   both cases in the only direction that helps a reader. */
	overscroll-behavior: auto;
	touch-action: pan-y pinch-zoom;
	padding: var(--aura-video-content-padding);
	/* Respects the rounded display corners of a phone in landscape. */
	padding-inline-start: max(var(--aura-video-content-padding), env(safe-area-inset-left));
	padding-inline-end: max(var(--aura-video-content-padding), env(safe-area-inset-right));
}

/*
 * Width breakpoints cannot identify a short desktop monitor. Before the Hero
 * exposes its emergency internal scrollbar, the controller measures the real
 * composition and opts into one of these two reversible density levels. Every
 * cap starts from the editor's computed value, so compact mode may make a large
 * design smaller but can never enlarge a deliberately modest one. Horizontal
 * padding and 44px action targets remain under their original owners.
 */
.aura-video.aura-video--hero.aura-video--content-compact .aura-video__content {
	padding-block-start: min(var(--aura-video-fit-padding-top, 1.5rem), clamp(.75rem, 2.5vh, 1.25rem));
	padding-block-end: min(var(--aura-video-fit-padding-bottom, 1.5rem), clamp(.75rem, 2.5vh, 1.25rem));
	row-gap: min(var(--aura-video-fit-content-gap, 1rem), clamp(.5rem, 1.5vh, .75rem));
}

.aura-video.aura-video--hero.aura-video--content-compact .aura-video__title {
	/* Elementor's generated page selector can have the same specificity and is
	   loaded after this stylesheet. Auto-fit is only active after measured
	   overflow, so it must win that tie until the composition fits. */
	font-size: min(var(--aura-video-fit-title-size, 4.25rem), clamp(2rem, 8vh, 4.25rem)) !important;
	line-height: min(var(--aura-video-fit-title-line-height, 1.15em), 1.12em) !important;
}

.aura-video.aura-video--hero.aura-video--content-compact .aura-video__eyebrow {
	font-size: min(var(--aura-video-fit-eyebrow-size, 1rem), 1rem) !important;
	line-height: min(var(--aura-video-fit-eyebrow-line-height, 1.3em), 1.25em) !important;
}

.aura-video.aura-video--hero.aura-video--content-compact .aura-video__excerpt {
	font-size: min(var(--aura-video-fit-excerpt-size, 1rem), 1rem) !important;
	line-height: min(var(--aura-video-fit-excerpt-line-height, 1.55em), 1.4em) !important;
}

.aura-video.aura-video--hero.aura-video--content-compact .aura-video__actions {
	margin-block-start: min(var(--aura-video-fit-actions-margin-top, 0px), .5rem);
	margin-block-end: min(var(--aura-video-fit-actions-margin-bottom, 0px), .5rem);
}

.aura-video.aura-video--hero.aura-video--content-tight .aura-video__content {
	padding-block-start: min(var(--aura-video-fit-padding-top, 1rem), clamp(.5rem, 1.75vh, .875rem));
	padding-block-end: min(var(--aura-video-fit-padding-bottom, 1rem), clamp(.5rem, 1.75vh, .875rem));
	row-gap: min(var(--aura-video-fit-content-gap, .75rem), clamp(.375rem, 1vh, .5rem));
}

.aura-video.aura-video--hero.aura-video--content-tight .aura-video__title {
	font-size: min(var(--aura-video-fit-title-size, 3.5rem), clamp(1.75rem, 7vh, 3.5rem)) !important;
	line-height: min(var(--aura-video-fit-title-line-height, 1.1em), 1.08em) !important;
}

.aura-video.aura-video--hero.aura-video--content-tight .aura-video__excerpt {
	font-size: min(var(--aura-video-fit-excerpt-size, .9375rem), .9375rem) !important;
	line-height: min(var(--aura-video-fit-excerpt-line-height, 1.4em), 1.32em) !important;
}

.aura-video--position-top-left .aura-video__content    { align-self: start;  justify-self: start;  text-align: start; }
.aura-video--position-top-center .aura-video__content  { align-self: start;  justify-self: center; text-align: center; }
.aura-video--position-top-right .aura-video__content   { align-self: start;  justify-self: end;    text-align: end; }
.aura-video--position-left .aura-video__content        { align-self: center; justify-self: start;  text-align: start; }
.aura-video--position-center .aura-video__content      { align-self: center; justify-self: center; text-align: center; }
.aura-video--position-right .aura-video__content       { align-self: center; justify-self: end;    text-align: end; }
.aura-video--position-bottom-left .aura-video__content { align-self: end;    justify-self: start;  text-align: start; }
.aura-video--position-bottom-center .aura-video__content { align-self: end;  justify-self: center; text-align: center; }
.aura-video--position-bottom-right .aura-video__content { align-self: end;   justify-self: end;    text-align: end; }

.aura-video__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.aura-video__tag {
	color: var(--aura-video-tag-color);
	font-size: .8125rem;
	line-height: 1.3;
	text-decoration: none;
}

.aura-video__eyebrow {
	margin: 0;
	color: var(--aura-video-eyebrow-color);
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.aura-video__title {
	margin: 0;
	max-inline-size: 100%;
	color: var(--aura-video-title-color);
	font-family: var(--aura-font-heading, ui-sans-serif, system-ui, sans-serif);
	font-weight: var(--aura-heading-weight, 700);
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.aura-video__excerpt {
	color: var(--aura-video-excerpt-color);
	line-height: 1.55;
}

.aura-video__excerpt p {
	margin: 0 0 .5rem;
}

.aura-video__excerpt p:last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------- Actions */

.aura-video__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aura-video-action-gap);
	align-items: center;
}

.aura-video__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never below a comfortable touch target, whatever the padding says. */
	min-block-size: 2.75rem;
	padding: var(--aura-video-action-padding);
	border: 0;
	border-radius: var(--aura-video-action-radius);
	background: var(--aura-video-action-background-normal);
	color: var(--aura-video-action-color-normal);
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--aura-video-transition) ease,
		color var(--aura-video-transition) ease;
}

.aura-video__action:hover {
	background: var(--aura-video-action-background-hover);
	color: var(--aura-video-action-color-hover);
}

.aura-video__action:focus-visible {
	background: var(--aura-video-action-background-focus);
	color: var(--aura-video-action-color-focus);
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.aura-video__action--secondary {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--aura-video-action-background-normal);
}

.aura-video__action--text {
	padding-inline: 0;
	background: transparent;
	color: var(--aura-video-action-background-normal);
	text-decoration: underline;
}

/* Elementor keeps a navigation action visible while its destination is still
   being selected. It is a non-interactive span and never reaches the frontend. */
.aura-video__action--placeholder {
	opacity: .7;
	cursor: default;
	pointer-events: none;
}

/* ------------------------------------------------------------ Play button */

.aura-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: max(var(--aura-video-play-size), 2.75rem);
	block-size: max(var(--aura-video-play-size), 2.75rem);
	padding: 0;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 999px;
	background: var(--aura-video-play-background);
	color: var(--aura-video-play-color);
	cursor: pointer;
	transition: background var(--aura-video-transition) ease;
}

.aura-video--hero .aura-video__play {
	position: relative;
	inset: auto;
	align-self: center;
	justify-self: center;
	transform: none;
}

.aura-video__play:hover {
	background: var(--aura-video-play-background-hover);
}

.aura-video__play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* A triangle drawn from borders: no icon font, no extra request. */
.aura-video__play-icon {
	inline-size: 0;
	block-size: 0;
	margin-inline-start: .2em;
	border-block-start: .5em solid transparent;
	border-block-end: .5em solid transparent;
	border-inline-start: .85em solid currentColor;
}

.aura-video__empty {
	padding: 1.5rem;
	border: 1px dashed var(--aura-color-border, #d9ddd5);
	border-radius: var(--aura-radius-card, .75rem);
	color: var(--aura-color-muted, #5b655f);
	text-align: center;
}

/* ---------------------------------------------------------------- Lightbox */

.aura-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	border: 0;
	background: var(--aura-video-lightbox-backdrop, rgb(9 12 11 / 88%));
}

.aura-video-lightbox[hidden] {
	display: none;
}

.aura-video-lightbox__frame {
	position: relative;
	inline-size: var(--aura-video-lightbox-width, min(72rem, 92vw));
	max-inline-size: 100%;
	aspect-ratio: var(--aura-video-ratio, 16 / 9);
	max-block-size: 82vh;
	background: #000;
}

.aura-video-lightbox__frame iframe,
.aura-video-lightbox__frame video {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.aura-video-lightbox__close {
	position: absolute;
	inset-block-start: -3.25rem;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--aura-video-lightbox-close, #fff);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.aura-video-lightbox__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The page behind the dialog stays put rather than jumping to the top. */
.aura-video-lightbox-open {
	overflow: hidden;
}

/* Editor-only segment confirmation, emitted only by the PHP preview render. */
.aura-video__range-preview {
	position: absolute;
	inset-block-end: .75rem;
	inset-inline-start: .75rem;
	z-index: 6;
	padding: .38rem .62rem;
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 999px;
	background: rgb(9 12 11 / 82%);
	color: #fff;
	font: 600 12px/1.2 system-ui, sans-serif;
	pointer-events: none;
	/* The badge now reads as a clock and carries the loop contract, so it is
	   longer and translated. Capped and wrapping, it can never widen the frame
	   it sits in. */
	max-inline-size: calc(100% - 1.5rem);
	text-wrap: pretty;
}

/* ---------------------------------------------------- Mobile and reduced motion */

/*
 * Poster-only builds no player at all on a phone. The class is what the
 * controller reads before deciding whether to create anything.
 */
@media (max-width: 767px) {
	.aura-video--mobile-poster .aura-video__media {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aura-video__action,
	.aura-video__play {
		transition-duration: 0ms;
	}
}