/* Hero background video (12 Oct 2026) - see inc/theme-hero-video.php and assets/js/hero-video.js.
   The wrapper is the hero's first child and paints under everything: rules.css R10 leaves it out of the
   z-index 1 lift, so the mock hero's own ::after scrim and its content sit above it. The hero image
   beneath it is the poster and the fallback. */
body .elementor .hero > .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none; /* no YouTube hover chrome, no stray clicks into the frame */
}

/* Cover-sized and centred: a frame no smaller than the hero in either direction. */
body .elementor .hero-video__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
}
/* A YouTube frame is always 16:9, so one side grows until both cover (container units, 2023+ browsers;
   older ones get the letterboxed 100% x 100% frame above). */
@supports (width: 1cqw) {
  body .elementor .hero > .hero-video > iframe.hero-video__media {
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: max(100cqh, calc(100cqw * 9 / 16));
  }
}

/* Interim heroes (.section-card.hero) paint their scrim inside the Elementor background, which the video
   now covers: one scrim on the wrapper instead. The mock hero keeps its own .hero::after (rules.css:169). */
body .elementor .section-card.hero > .hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

/* Once ours is in, Elementor's own <video> (dead for a YouTube link) and its two controls step aside. */
body .elementor .hero.has-hero-video > :is(video, .e-background-video__media),
body .elementor .hero.has-hero-video > .e-background-video__controls {
  display: none;
}

/* Theme Builder heroes (12 Oct 2026): the service and case study singles open with a plain header.section, not
   the mock's .hero. The same layer sits under their content, with one scrim so the words stay readable. */
body .elementor header.section.has-hero-video { position: relative; overflow: hidden; }
body .elementor header.section.has-hero-video > :not(.hero-video) { position: relative; z-index: 1; }
body .elementor header.section > .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
body .elementor header.section > .hero-video::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
@supports (width: 1cqw) {
  body .elementor header.section > .hero-video > iframe.hero-video__media {
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: max(100cqh, calc(100cqw * 9 / 16));
  }
}