/* Consolidated Mux sizing rules */

.mux-video-container,
mux-player {
  width: 100%;
  max-width: 100%;
}

/* Explicit ratio handling from shortcode classes/attributes */
.mux-video-container.aspect-ratio-16-9,
.mux-video-container.mux-video--16-9,
.mux-video-container[style*="aspect-ratio: 16 / 9"],
.mux-video-container[style*="aspect-ratio: 16/9"],
.mux-video-container[style*="aspect-ratio:16/9"],
.mux-video-container[style*="aspect-ratio:16 / 9"],
mux-player.aspect-ratio-16-9,
mux-player.mux-video--16-9,
mux-player[aspect-ratio="16 / 9"],
mux-player[aspect-ratio="16/9"],
mux-player[aspect-ratio="16:9"] {
  aspect-ratio: 16 / 9 !important;
}

.mux-video-container.aspect-ratio-1-1,
.mux-video-container.mux-video--square,
.mux-video-container[style*="aspect-ratio: 1 / 1"],
.mux-video-container[style*="aspect-ratio: 1/1"],
mux-player.aspect-ratio-1-1,
mux-player.mux-video--square,
mux-player[aspect-ratio="1 / 1"],
mux-player[aspect-ratio="1/1"],
mux-player[aspect-ratio="1:1"] {
  aspect-ratio: 1 / 1 !important;
}

.mux-video-container.aspect-ratio-9-16,
.mux-video-container.mux-video--9-16,
mux-player.aspect-ratio-9-16,
mux-player.mux-video--9-16,
mux-player[aspect-ratio="9 / 16"],
mux-player[aspect-ratio="9/16"],
mux-player[aspect-ratio="9:16"] {
  aspect-ratio: 9 / 16 !important;
}

/* Keep player dimensions stable across browsers */
.mux-video-container mux-player,
.mux-video-container iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 768px) {
  /* If page hero contains Mux, force a 16:9 slot on mobile */
  .deru-hero.deru-hero--mux {
    aspect-ratio: 16 / 9 !important;
  }
}

/* iOS/WebKit specific guard: prevent odd intrinsic recalculation */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .mux-video-container.aspect-ratio-16-9,
    .mux-video-container.mux-video--16-9,
    .mux-video-container[style*="aspect-ratio: 16 / 9"],
    .mux-video-container[style*="aspect-ratio: 16/9"],
    mux-player.aspect-ratio-16-9,
    mux-player.mux-video--16-9,
    mux-player[aspect-ratio="16 / 9"],
    mux-player[aspect-ratio="16/9"],
    mux-player[aspect-ratio="16:9"] {
      aspect-ratio: 16 / 9 !important;
      overflow: hidden;
    }
  }
}