/* WatchVIM final mobile presentation corrections. */

/* The video itself should be the visual frame. Remove the extra card border,
   rounded shell, inset padding, and shadow around watch-page players. */
body.wv-route-watch .wv-watch-player,
body.wv-route-watch #playerMount.wv-watch-player,
body.wv-route-watch .wv-player-wrap.wv-watch-player,
body.wv-route-watch .playerWrap.wv-watch-player,
body.wv-route-watch .watch-player-wrap.wv-watch-player,
body.wv-route-watch .watch-player.wv-watch-player {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: #000 !important;
}

body.wv-route-watch .wv-watch-player mux-player,
body.wv-route-watch .wv-watch-player video,
body.wv-route-watch #playerMount mux-player,
body.wv-route-watch #playerMount video {
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* CMS mobile hero artwork is portrait-oriented. Keep it centered toward the
   top so faces and title art remain visible in the mobile hero frame. */
@media (max-width: 900px) {
  body.wv-route-home .wv-home-hero-card > div {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 9 / 16 !important;
    max-height: none !important;
  }

  body.wv-route-home .wv-home-hero .wv-hero-img,
  body.wv-route-watch .wv-detail-hero .wv-hero-img,
  body.wv-route-watch .wv-detail-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  body.wv-route-watch .wv-watch-player {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 24px !important;
  }
}