/**
 * sp-cinematic-slide.css
 * Theme-safe player shell — matches Streamit banner-style-2 example.
 *
 * Structure (must match theme example + inner player shell):
 *
 *   <div class="item" style="background: url(...)">
 *     <div class="cinematic-slide" data-*>          <!-- player only -->
 *       <div class="gen-movie-contain-style-2 h-100">
 *         <div class="container h-100">
 *           <div class="row flex-row-reverse align-items-center h-100">
 *             <div class="col-xl-6">
 *               <div class="gen-front-image poster-wrapper">
 *                 <img>
 *                 <div class="live-video">...</div>   <!-- player extra -->
 *                 <a class="playBut">...</a>
 *             <div class="col-xl-6"> ... text ...
 *
 * .item  → theme layout only
 * .cinematic-slide → fills .item; never changes .item height
 * .gen-front-image → theme poster behaviour (intrinsic img)
 */

/* Player shell fills theme item — no sizing of .item itself */
.gen-banner-movies .banner-style-2 .item > .cinematic-slide {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.gen-banner-movies .banner-style-2 .item > .cinematic-slide > .gen-movie-contain-style-2.h-100 {
  height: 100%;
}

/* ---- Theme gen-front-image (example behaviour) ---- */
.gen-banner-movies .banner-style-2 .cinematic-slide .gen-front-image {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

/* Intrinsic image — same as theme example <img> in .gen-front-image */
.gen-banner-movies .banner-style-2 .cinematic-slide .gen-front-image > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
  position: static;
  object-fit: unset; /* let the image file define aspect */
}

/* Play button — theme centers over the image */
.gen-banner-movies .banner-style-2 .cinematic-slide .gen-front-image > a.playBut {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-decoration: none;
}

/* ---- Player-only extras (not in theme example) ---- */
.gen-banner-movies .banner-style-2 .cinematic-slide .poster-wrapper .live-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  display: none; /* idle: hidden; JS/CSS play classes reveal */
}
.gen-banner-movies .banner-style-2 .cinematic-slide .poster-wrapper .live-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* Show video layer only while playing */
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-offline-playing .live-video,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-live-playing .live-video,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-wt-playing .live-video {
  display: block;
}
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-offline-playing .gen-front-image,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-live-playing .gen-front-image,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-wt-playing .gen-front-image {
  /* stable stage while video runs */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-offline-playing .gen-front-image > img,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-live-playing .gen-front-image > img,
.gen-banner-movies .banner-style-2 .cinematic-slide.sp-wt-playing .gen-front-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* Mobile stack: theme example still uses natural image height when idle */
@media (max-width: 1199px) {
  .gen-banner-movies .banner-style-2 .item > .cinematic-slide {
    height: auto;
  }
  .gen-banner-movies .banner-style-2 .item > .cinematic-slide > .gen-movie-contain-style-2.h-100 {
    height: auto;
  }
  .gen-banner-movies .banner-style-2 .cinematic-slide .container.h-100,
  .gen-banner-movies .banner-style-2 .cinematic-slide .row.align-items-center.h-100 {
    height: auto;
  }
}


/* TABLET DESKTOP PARITY OVERRIDE — keep desktop geometry 768–1199 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .gen-banner-movies .banner-style-2 .item > .cinematic-slide {
    height: 100% !important;
  }
  .gen-banner-movies .banner-style-2 .item > .cinematic-slide > .gen-movie-contain-style-2.h-100 {
    height: 100% !important;
  }
  .gen-banner-movies .banner-style-2 .cinematic-slide .container.h-100,
  .gen-banner-movies .banner-style-2 .cinematic-slide .row.align-items-center.h-100 {
    height: 100% !important;
  }
}