/* LAVI v1.49 — correct framing for vertical HOFEX video */

/* Home hero:
   Make the video element fill the complete visual frame.
   Absolute positioning avoids the intrinsic 9:16 width creating side bars. */
.hero-slider .hero-visual.has-media{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  padding:0!important;
  background:#f5f2ea!important;
}

.hero-slider .hero-visual.has-media video{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center 42%!important;
  background:transparent!important;
  border:0!important;
  margin:0!important;
}

/* Dedicated story page:
   The source video is exactly 9:16. Give its frame the same ratio,
   center it, and show the full video without black bars or bad cropping. */
.story-hero-media.has-media{
  position:relative!important;
  width:min(100%,460px)!important;
  max-width:460px!important;
  aspect-ratio:9 / 16!important;
  height:auto!important;
  max-height:none!important;
  margin-inline:auto!important;
  overflow:hidden!important;
  padding:0!important;
  background:#f5f2ea!important;
}

.story-hero-media.has-media video{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
  margin:0!important;
}

/* Prevent generic story/video rules from stretching the vertical media. */
.story-hero-grid{
  align-items:start;
}

@media(max-width:700px){
  .hero-slider .hero-visual.has-media{
    aspect-ratio:4 / 5!important;
    height:auto!important;
    min-height:0!important;
  }

  .hero-slider .hero-visual.has-media video{
    object-position:center 40%!important;
  }

  .story-hero-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
  }

  .story-hero-media.has-media{
    width:min(100%,390px)!important;
    max-width:390px!important;
    aspect-ratio:9 / 16!important;
    height:auto!important;
    margin:0 auto!important;
  }

  .story-hero-media.has-media video{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* Extra-small phones */
@media(max-width:390px){
  .story-hero-media.has-media{
    width:100%!important;
    max-width:100%!important;
  }
}