/*
 * STUPPLAYS — MOBILE MAIN-CARD VOD CLICK / LOAD SURFACE
 *
 * Mobile only. Desktop is intentionally untouched.
 * This stylesheet makes the existing VOD play anchor the topmost clickable
 * control and makes the existing player layer usable after the JS controller
 * creates the YouTube VOD iframe.
 */

@media (max-width: 991px) {
  /* Only normal VOD cards. LIVE cards keep their existing live authority. */
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide[data-live="off"] a.sp-vod-play-button,
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide:not([data-live="on"]) a.sp-vod-play-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10001 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* The poster image must never sit above the VOD anchor on a touch device. */
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide[data-live="off"] .poster-wrapper > img,
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide:not([data-live="on"]) .poster-wrapper > img {
    pointer-events: none !important;
  }

  /* Do not let decorative layers steal the tap from the VOD button. */
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide[data-live="off"] .sp-live-badge,
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide:not([data-live="on"]) .sp-live-badge {
    pointer-events: none !important;
  }

  /* Existing shared player host: ready for the iframe created on VOD click. */
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide[data-live="off"] .live-video,
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide:not([data-live="on"]) .live-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body #sp-walkthrough .gen-banner-movies .cinematic-slide[data-live="off"] .live-video iframe,
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide:not([data-live="on"]) .live-video iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
  }

  /* Once the controller marks VOD as playing, the player owns the card. */
  html body #sp-walkthrough .gen-banner-movies .cinematic-slide.sp-offline-playing .live-video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }

  html body #sp-walkthrough .gen-banner-movies .cinematic-slide.sp-offline-playing .poster-wrapper > img {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body #sp-walkthrough .gen-banner-movies .cinematic-slide.sp-offline-playing a.sp-vod-play-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ============================================================
   STUPPLAYS — FINAL MOBILE VOD VIDEO SURFACE
   The symptom this fixes is: VOD audio starts, but the picture stays
   black.  The YouTube iframe/Plyr must occupy the same real 16:9
   surface as the poster; never leave a zero-height/aspect-ratio-only
   Plyr wrapper on a touch viewport.
   ============================================================ */
@media (max-width: 991px) {
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 100 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr__video-embed,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr__video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player iframe,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr__video-embed iframe {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    aspect-ratio: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* Keep poster and play button below the active video surface. */
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > img {
    z-index: 0 !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr__controls {
    z-index: 1000 !important;
  }
}

/* Phones: preserve the card's actual poster dimensions; don't force a
   desktop 1440p pixel size onto the viewport.  100% means the same player
   scales cleanly to the mobile card. */
@media (max-width: 576px) {
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================
   STUPPLAYS — FINAL MOBILE LIVE / STREAM VIDEO SURFACE
   Same geometry contract as VOD so LIVE never ends up with a
   zero-height / black Plyr wrapper on touch carousel layouts.
   ============================================================ */
@media (max-width: 991px) {
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .live-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 100 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player .plyr,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player .plyr__video-embed,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player .plyr__video-wrapper,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .live-video .plyr,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .live-video .plyr__video-embed,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .live-video .plyr__video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player iframe,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .sp-shared-player .plyr__video-embed iframe,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > .live-video iframe {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    aspect-ratio: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-live-playing
  .poster-wrapper > img {
    z-index: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   FORCE PLYR CHROME ON MOBILE VOD — never show native YouTube UI
   ============================================================ */
@media (max-width: 991px) {
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing.sp-plyr-vod-active
  .poster-wrapper > .sp-shared-player.sp-plyr-owned .plyr,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .live-video.sp-plyr-owned .plyr {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .sp-shared-player .plyr__controls,
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper > .live-video .plyr__controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  /* Kill any residual YouTube native chrome that might leak through the embed. */
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper iframe[src*="youtube.com/embed"],
  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing
  .poster-wrapper iframe[src*="youtube-nocookie.com/embed"] {
    /* Plyr owns interaction; keep the surface fill-only */
  }

  html body #sp-walkthrough .gen-banner-movies
  .cinematic-slide.sp-offline-playing .plyr--youtube .plyr__video-embed {
    pointer-events: auto !important;
  }
}