/* =============================================================================
   ECR — homepage hero: show the poster without waiting for the parallax init

   THE DEFECT
   The hero row is saved with `parallax_bg="true"`, so Salient gives it
   `.parallax_section`, and Salient's own stylesheet then holds the background
   video at zero opacity until its JavaScript has constructed the parallax
   object for that row:

       .wpb_row.parallax_section > .nectar-video-wrap video:not(.translate)
           { opacity: 0 }

   `.translate` is added by the parallax constructor as its "I am initialised"
   marker (`this.$parallaxEl.addClass('translate')`), which happens inside
   Salient's jQuery-ready sequence. So the `<video>` — AND THEREFORE ITS
   `poster` — is invisible until DOM-ready, no matter how early the poster JPEG
   arrived. Measured on a throttled connection the poster was fetched at ~0.5 s
   and stayed invisible until ~13 s.

   `.mobile-video-image` does not cover the gap either: it is `display: none`
   unless `body.using-mobile-browser` is present, and that class comes from a
   user-agent test, so a desktop visitor never sees that layer at all.

   WHY THIS OVERRIDE IS SAFE
   `.translate` carries NO styles of its own. The only two rules in the whole
   theme that mention it are the opacity gate above and Salient's own escape
   hatch from it:

       body[data-remove-m-parallax="1"].using-mobile-browser
           .wpb_row.parallax_section > .nectar-video-wrap video:not(.translate)
           { opacity: 1 }

   So revealing the video before `.translate` cannot move it, cannot re-scale it
   and cannot cause a layout shift — there is no transform to apply late. It
   only stops the poster being hidden. This is the same exemption Salient
   already grants itself above, narrowed to one page.

   WHAT THE VISITOR GETS
     1. poster as soon as the JPEG decodes — a `<video poster>` paints its
        poster with no source attached at all, so this does not wait on the MP4
     2. the first video frame replaces the poster only once the browser has
        actually decoded one, which is native `<video>` behaviour
     3. the poster stays if the MP4 is slow, fails, or autoplay is refused

   SCOPE
   `body.home` plus the row and wrap classes: only the front page's hero. Every
   other row, page and video background on the site keeps Salient's behaviour
   unchanged. The selector is (0,5,2) against Salient's (0,4,1) — `:not()`
   contributes its argument's specificity, which is why the class count is
   higher than it looks.
   ========================================================================== */

body.home .wpb_row.parallax_section > .nectar-video-wrap video:not(.translate) {
	opacity: 1;
}


/* =============================================================================
   PART 2 — the film on portrait phones and tablets

   THE DEFECT (measured, cache disabled, Chrome 9 s load)
   The film is 1920x1080 (16:9) and the hero row is a Salient full-height row
   (inline `min-height: 100vh`). With `object-fit: cover` the visible fraction
   of the FILM'S WIDTH is therefore:

       1920x1080 viewport   100%      1440x900   90%     1024x768   75%
       768x1024  portrait    42%      390x844    26%     375x812    26%

   The film carries burnt-in headlines across almost its full width —
   "COOPERATION YES. SUPERSTATE NO!", "DOING LESS, BUT BETTER", "AN IMMIGRATION
   SYSTEM THAT WORKS", "SAFE & SECURE", the ECR GROUP logo. At 26% they are
   sliced to "ERATION" / "RSTATE": the message is not merely cropped, it is
   unreadable. No `object-position` can fix it — the text spans the width, so
   there is no better 26% window to choose.

   THE FIX — hero geometry, not the film
   In PORTRAIT below 1000px the hero stops being a 100vh column and becomes a
   banner about 62vh tall, and the film is shown `contain`ed inside it, at its
   own 16:9 proportions, anchored just below the fixed header. The film is
   never scaled non-uniformly and never re-encoded: 100% of the frame is
   visible and every headline is legible. Landscape and every viewport at or
   above 1000px keep Salient's full-height `cover` hero exactly as approved.

   `.row_col_wrap_12` gets the same height because Salient bottom-aligns the
   hero's only content (the social row) against that box; leaving it at 100vh
   would push the icons past the shortened row, and zeroing it would float them
   up under the logo.

   THE HEIGHT IS DERIVED FROM THE FILM, NOT FROM THE VIEWPORT.
   A viewport-relative banner (62vh) left the film floating in dead space: on a
   390px phone the contained 16:9 frame is only 219px tall inside a 523px row,
   so 227px — 43% of the hero — was empty gradient. A 16:9 frame contained in a
   full-width box is always `56.25vw` tall, so the row is that plus a constant
   180px band, and the spare space stops tracking the viewport:

       390px phone   219 + 180 = 399px    768px tablet   432 + 180 = 612px

   `object-position: 50% 47%` then splits that 180px into ~85px above the film,
   which clears the fixed logo, and ~95px below it, which is where Salient
   bottom-aligns the social row. Both numbers now hold at every width instead
   of drifting, and the film itself is untouched — still `contain`, still its
   own proportions, still no re-encode. The clamp keeps the banner sane on a
   very narrow phone (340px floor) and a large tablet (700px cap).

   THE POSTER LAYER
   Salient also renders `.mobile-video-image`, a div whose background is the
   poster, `display: none` on desktop and `display: block` whenever the
   user-agent test sets `body.using-mobile-browser`. Measured under an iPhone
   UA it is `position: absolute; z-index: 1; opacity: 1` over the full hero,
   i.e. it paints ON TOP of a video that is decoded, unmuted-safe and playing
   (readyState 4, currentTime advancing 2.5 s per 2.5 s). Every mobile visitor
   was therefore served a still image while the MP4 played invisibly beneath
   it and consumed their bandwidth — an undeclared substitution, not a
   fallback.

   It is switched off on the front page only. The fallback is not lost: it
   becomes the `<video poster>` attribute, which is the same JPEG and is what
   desktop already relies on. A `<video>` paints its poster until it has
   decoded a frame and keeps painting it if autoplay is refused, if the MP4 is
   slow and if the MP4 never arrives — so the poster remains the declared
   fallback, now for every viewport by the same mechanism, and the film is
   shown wherever the browser permits it.
   ========================================================================== */

body.home .mobile-video-image {
	display: none !important;
}

@media only screen and (max-width: 999px) and (orientation: portrait) {

	body.home .wpb_row.parallax_section.first-section,
	body.home .wpb_row.parallax_section.first-section > .row_col_wrap_12 {
		min-height: clamp(340px, calc(56.25vw + 180px), 700px) !important;
		height: clamp(340px, calc(56.25vw + 180px), 700px) !important;
	}

	/* `contain` = the whole frame, its own proportions, no distortion.
	   47% splits the constant 180px band into ~85px above the film, which
	   clears the fixed logo, and ~95px below it for the social row. */
	body.home .wpb_row.parallax_section.first-section .nectar-video-wrap video {
		object-fit: contain;
		object-position: 50% 47%;
	}
}