/*
 * DhishaAI - preserve a video's intrinsic aspect ratio in fullscreen.
 *
 * THE BUG
 * -------
 * This site runs TWO generations of Elementor video widget, and both force a
 * card-shaped box onto the <video> element in a way that is not scoped to the
 * card - so the box survives into fullscreen and crops the footage.
 *
 * 1. Classic widget (video.default) - used by all four testimonial videos and
 *    the About Us video. From elementor/assets/css/widget-video.min.css:
 *
 *        .elementor-widget-video .e-hosted-video .elementor-video { object-fit: cover }
 *
 * 2. Atomic v4 widget (e-self-hosted-video) - used on Home and Services. From
 *    Elementor's generated stylesheets:
 *
 *        .elementor .e-self-hosted-video-base { aspect-ratio: 16/9; max-width: 100vw }
 *        .e-<id>                              { object-fit: cover; aspect-ratio: 16/9;
 *                                               height: 500px; padding: 20px }
 *
 * `cover` plus a fixed ratio is the right choice inside a card: it fills the box
 * edge to edge. It is the wrong choice in fullscreen, where the declarations still
 * apply once the <video> becomes the fullscreen element. The frame is then forced
 * to cover the whole screen, and anything whose intrinsic ratio differs from the
 * display's gets cropped - severely for portrait footage on a landscape monitor,
 * which reads as "stretched/distorted".
 *
 * Every testimonial video here is 2160x3840 (portrait) while the loop wrapper
 * declares 1.77777 (landscape), so fullscreen showed only a narrow horizontal
 * band of each one.
 *
 * THE FIX
 * -------
 * For the fullscreen state only, re-declare `object-fit: contain` and release the
 * imposed box (`aspect-ratio: auto`, no fixed height, no padding, no max-*).
 * `contain` scales the frame as large as it will go while keeping its intrinsic
 * proportions, and letterboxes/pillarboxes whatever is left over.
 *
 * No ratio is named anywhere in this file. `aspect-ratio: auto` means "use the
 * media's own intrinsic ratio", which the browser reads from the file itself. So
 * this works for 9:16, 16:9, 1:1, 2.39:1 or any custom ratio, with no per-video
 * rules and nothing to update when a video is added or replaced.
 *
 * NOTHING HERE APPLIES OUTSIDE FULLSCREEN. Every selector is gated behind a
 * fullscreen pseudo-class, so the cards render exactly as before.
 *
 * WHY !important
 * --------------
 * Elementor's classic selector scores (0,3,0) and its atomic base (0,2,0). A
 * natural override would have to out-specify both and would still be fragile
 * across Elementor updates. `!important` is safe here precisely because these
 * rules cannot match outside fullscreen.
 *
 * WHY THE RULES ARE REPEATED PER PREFIX
 * ------------------------------------
 * If any selector in a comma-separated list is unknown to the browser, CSS requires
 * the browser to drop the ENTIRE list. Mixing `:fullscreen` with `:-webkit-full-screen`
 * in one list would therefore break the rule in every browser. Each prefix needs its
 * own block, even though that duplicates the declarations.
 *
 * A NOTE ON iOS SAFARI
 * --------------------
 * iPhone Safari does not put the element into CSS fullscreen; it hands the video to
 * the native player, which ignores page CSS. That player already preserves aspect
 * ratio, so behaviour is correct there without this file.
 */

/* ---------- standard: Chrome, Edge, Firefox 64+, Safari 16.4+ ---------- */

video.elementor-video:fullscreen,
video.e-self-hosted-video-base:fullscreen,
:fullscreen video.elementor-video,
:fullscreen video.e-self-hosted-video-base {
	object-fit: contain !important;
	-o-object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	/* `auto` = use the file's own intrinsic ratio. No ratio is hard-coded. */
	aspect-ratio: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: #000 !important;
}

/* If an ancestor (rather than the <video>) is the fullscreen element, release the
   card-sized box Elementor imposed so the video can use the whole screen. */
:fullscreen .elementor-wrapper,
:fullscreen .e-hosted-video {
	aspect-ratio: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #000 !important;
}

:fullscreen::backdrop {
	background-color: #000;
}

/* ---------- -webkit-: Safari, and older Chrome/Edge ---------- */

video.elementor-video:-webkit-full-screen,
video.e-self-hosted-video-base:-webkit-full-screen,
:-webkit-full-screen video.elementor-video,
:-webkit-full-screen video.e-self-hosted-video-base {
	object-fit: contain !important;
	-o-object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: #000 !important;
}

:-webkit-full-screen .elementor-wrapper,
:-webkit-full-screen .e-hosted-video {
	aspect-ratio: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #000 !important;
}

:-webkit-full-screen::-webkit-backdrop {
	background-color: #000;
}

/* ---------- -moz-: Firefox before 64 ---------- */

video.elementor-video:-moz-full-screen,
video.e-self-hosted-video-base:-moz-full-screen,
:-moz-full-screen video.elementor-video,
:-moz-full-screen video.e-self-hosted-video-base {
	object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: #000 !important;
}

:-moz-full-screen .elementor-wrapper,
:-moz-full-screen .e-hosted-video {
	aspect-ratio: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #000 !important;
}

/* ---------- -ms-: legacy Edge / IE11 ---------- */

video.elementor-video:-ms-fullscreen,
video.e-self-hosted-video-base:-ms-fullscreen,
:-ms-fullscreen video.elementor-video,
:-ms-fullscreen video.e-self-hosted-video-base {
	object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: #000 !important;
}

:-ms-fullscreen .elementor-wrapper,
:-ms-fullscreen .e-hosted-video {
	width: 100% !important;
	height: 100% !important;
	background-color: #000 !important;
}