/**
 * File: wp-content/themes/inspiro-child/css/jgf-project-video.css
 * Theme: Inspiro Child (child of Inspiro)
 * Scope: single project post 8664 - "DIY FC - Men in Blazers x Home Depot"
 *
 * Version: 1.0.0
 *
 * Changelog:
 * 1.0.0 - 2026-08-31 - Initial. Corrects the cropped/zoomed render of the ten
 *         Elementor Video widgets on post 8664.
 *
 *         ROOT CAUSE. None of the ten widgets carries an `aspect_ratio` value in
 *         _elementor_data, so Elementor emits its default
 *         `--video-aspect-ratio: 1.77777` for every one of them in post-8664.css.
 *         widget-video.min.css then applies
 *           .elementor-widget-video .elementor-wrapper { aspect-ratio: var(--video-aspect-ratio) }
 *           .elementor-widget-video .e-hosted-video .elementor-video { object-fit: cover }
 *         Eight of the ten sources are portrait - five hosted .mp4 at 720x960
 *         (3:4), two hosted .mp4 at 720x1280 (9:16), one Vimeo source at 9:16 -
 *         so a portrait frame is being cover-cropped into a 16:9 box. Measured
 *         visible frame area was 42% for the 3:4 sources and 32% for the 9:16
 *         sources; 58% and 68% of each frame respectively was cropped away.
 *         Identical at 1280, 768 and 320 - the ratio is fixed, so the crop is
 *         breakpoint-independent.
 *
 *         This is box geometry, not encode quality. Every hosted .mp4 decodes at
 *         its stated native size (tkhd, sample-description and WP attachment
 *         metadata all agree) and is downscaled, never upscaled, at every
 *         breakpoint once the correct ratio is applied. No re-encode is needed.
 *
 *         FIX. Three parts.
 *         (1) Re-point --video-aspect-ratio per widget to the source's true
 *             native ratio. The two already-16:9 Vimeo widgets are left alone.
 *             Done in CSS rather than in _elementor_data because Elementor's
 *             aspect_ratio control offers no 3:4 option, so five of the eight
 *             are unreachable from the widget UI. No page data is modified.
 *         (2) object-fit: cover -> contain on hosted video. With the ratio now
 *             correct this is a no-op today; it is a guard, so that a future
 *             source swap letterboxes visibly instead of silently cropping.
 *         (3) Cap the rendered height. A 9:16 box at the container's 73% width
 *             would be 1479px tall at 1280. --jgf-video-max-h bounds the height
 *             and max-width derives the matching width from the ratio, so the
 *             cap shrinks the box without distorting it.
 *
 *         Selectors carry a leading `body` (0,4,1) purely to outrank the
 *         Elementor-generated post-8664.css rules (0,4,0) regardless of the
 *         order the two stylesheets happen to load in.
 */

/* --------------------------------------------------------------------------
 * 1. Height cap. Width is derived from the ratio, so the box never distorts.
 * ----------------------------------------------------------------------- */

body .elementor-8664 .elementor-widget-video .elementor-wrapper {
	--jgf-video-max-h: 78vh;

	max-width: calc( var( --jgf-video-max-h ) * var( --video-aspect-ratio ) );
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * 2. Native aspect ratios, per widget.
 *
 *    9:16 - 0.5625
 *      7f5ab0d  hosted  ...-img-1.mp4  720x1280  (attachment 8672)
 *      e8f1c3b  hosted  ...-img-2.mp4  720x1280  (attachment 8671)
 *      d68f7e7  vimeo   1199854833 "DIY FC ... DALLAS"
 *
 *    3:4 - 0.75
 *      4f37155  hosted  ...-img-3.mp4  720x960   (attachment 8670)
 *      2ff1a1a  hosted  ...-img-4.mp4  720x960   (attachment 8669)
 *      b53bb93  hosted  ...-img-5.mp4  720x960   (attachment 8668)
 *      2f0333c  hosted  ...-img-6.mp4  720x960   (attachment 8667)
 *      691d7ec  hosted  ...-img-7.mp4  720x960   (attachment 8666)
 *
 *    Untouched, already correct at 16:9 - 1.77777
 *      faf4667  vimeo   1010273525
 *      090b81d  vimeo   1192456129 "DIY FC ... SEATTLE"
 * ----------------------------------------------------------------------- */

body .elementor-8664 .elementor-element.elementor-element-7f5ab0d .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-e8f1c3b .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-d68f7e7 .elementor-wrapper {
	--video-aspect-ratio: 0.5625;
}

body .elementor-8664 .elementor-element.elementor-element-4f37155 .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-2ff1a1a .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-b53bb93 .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-2f0333c .elementor-wrapper,
body .elementor-8664 .elementor-element.elementor-element-691d7ec .elementor-wrapper {
	--video-aspect-ratio: 0.75;
}

/* --------------------------------------------------------------------------
 * 3. Never crop. Fit the whole frame inside the box.
 * ----------------------------------------------------------------------- */

body .elementor-8664 .elementor-widget-video .e-hosted-video .elementor-video,
body .elementor-8664 .elementor-widget-video .elementor-wrapper video {
	object-fit: contain;
	object-position: center center;
}

/* --------------------------------------------------------------------------
 * 4. Responsive. Only the height cap moves; the ratios above are absolute.
 * ----------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	body .elementor-8664 .elementor-widget-video .elementor-wrapper {
		--jgf-video-max-h: 82vh;
	}
}

@media ( max-width: 767px ) {
	body .elementor-8664 .elementor-widget-video .elementor-wrapper {
		--jgf-video-max-h: 88vh;
	}
}