/*
 * Hero loop video (podium highlights). Full-bleed across the top of the hero
 * panel: negative margins cancel the panel padding (kept in --hv-* below,
 * mirroring .hero in styles.css and .content-hero in pages.css).
 * A poster <picture> sits under the <video>; the video fades in only once it
 * is actually playing, so reduced-motion visitors and failed downloads just
 * see the poster. Phones get the 4:5 cut in a 4:5 box, so nothing is cropped.
 */

.hero {
  --hv-top: 30px;
  --hv-x: 24px;
}

.content-hero {
  --hv-top: 34px;
  --hv-x: 28px;
  overflow: hidden;
}

.hero-video {
  position: relative;
  width: calc(100% + 2 * var(--hv-x));
  margin: calc(-1 * var(--hv-top)) calc(-1 * var(--hv-x)) 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0c1f1c;
}

.hero-video picture,
.hero-video img,
.hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-video video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-video.is-playing video {
  opacity: 1;
}

@media (min-width: 900px) {
  .hero {
    --hv-x: 30px;
  }
}

@media (max-width: 640px) {
  .hero {
    --hv-top: 20px;
    --hv-x: 16px;
  }

  .hero-video {
    margin-bottom: 16px;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 420px) {
  .hero {
    --hv-top: 18px;
    --hv-x: 12px;
  }
}