/* =====================================================================
   MyvanCMS — hero background video (home page only)
   ---------------------------------------------------------------------
   A muted, looping YouTube embed behind the home hero, sitting UNDER the same
   scrim the photo used, so the headline's contrast is unchanged.

   THE COVER PROBLEM

   An <iframe> is not an <img>: there is no background-size:cover for it. A 16:9
   player in a container of a different aspect ratio either letterboxes (black
   bars) or crops the wrong axis. The fix below is the standard one — size the
   iframe to whichever of 100vw / 16:9-of-100vh is LARGER, then centre it with a
   translate. That guarantees it always overflows the container rather than
   leaving a gap, and .hero-v2's overflow:hidden clips the excess.

   NON-INTERACTIVE ON PURPOSE
     pointer-events:none. It is decoration: clicks must reach the hero's search
     form and tabs, not open YouTube. That also means the player is never
     interacted with, which is what keeps the nocookie host from setting
     tracking cookies.

   THE POSTER MATTERS
     The iframe takes a moment to load and can be blocked entirely (a strict
     CSP, a content blocker, a corporate proxy). The poster frame sits beneath it
     as the first paint and the permanent fallback, so the hero is never an empty
     navy rectangle.
   ===================================================================== */

.hero-v2__video{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;              /* under the scrim (which is on .hero-v2__image::after) */
  pointer-events:none;    /* decoration: never steals a click */
  background-position:center;
  background-size:cover;  /* the poster frame */
  background-repeat:no-repeat;
}

.hero-v2__video iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border:0;

  /*
   * Cover-fill for a 16:9 player. Take the larger of the two so the frame always
   * overflows: 100vw when the viewport is narrower than 16:9, and 177.78vh
   * (= 16/9 * 100vh) when it is taller.
   */
  width:max(100vw, 177.7778vh);
  height:max(56.25vw, 100vh);   /* 56.25vw = 9/16 * 100vw */

  /* Belt and braces for the same idea, for engines that ignore max() here. */
  min-width:100%;
  min-height:100%;
}

/*
   The scrim lives on .hero-v2__image::after. With a video present the image
   layer carries no photo of its own — it becomes the scrim layer only — so it
   must sit ABOVE the video and stay transparent to clicks.
*/
.hero-v2.has-video .hero-v2__image{
  background-image:none !important;
  z-index:1;
  pointer-events:none;
}

/* --- CONTRAST OVER MOVING FOOTAGE ----------------------------------
   A video is a harder background than a still, for two reasons: it is brighter
   in places a photo was not, and those places MOVE — so a word that reads in one
   frame can be lost in the next. Nothing can be checked once and trusted.

   Measured against this footage (a night skyline full of specular highlights),
   the still-photo scrim left the maroon eyebrow and accent word barely legible.
   So for the video case only:
     - the scrim is deepened, and
     - the eyebrow goes white with a brand rule, and the accent uses the brand hue
       lightened — the same treatment the inner-page heroes already needed.
   The still-photo hero is untouched: it sits over a bright sky where the deep
   maroon reads fine.
   ------------------------------------------------------------------ */
.hero-v2.has-video .hero-v2__image::after{
  background:linear-gradient(90deg,
    rgba(23,27,42,.90) 0%,
    rgba(23,27,42,.76) 55%,
    rgba(23,27,42,.58) 100%);
}

.hero-v2.has-video .hero-v2__eyebrow{color:#fff}
.hero-v2.has-video .hero-v2__eyebrow::after{background:var(--pl-brand)}
.hero-v2.has-video h1 .hero-v2__accent{color:#E08A8F}

/* --- reduced motion -------------------------------------------------
   A full-bleed moving background is exactly what this preference exists for.
   The iframe is hidden and the poster frame remains, so the hero still has its
   imagery — it simply stops moving.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .hero-v2__video iframe{display:none}
}

/* --- small screens --------------------------------------------------
   Autoplaying video is dropped below 768px: mobile browsers throttle or refuse
   it anyway, it is expensive on a metered connection, and at that size the
   player is cropped so hard that almost nothing of the shot is legible. The
   poster frame does the job better.
   ------------------------------------------------------------------ */
@media (max-width:767.98px){
  .hero-v2__video iframe{display:none}
}