/* ---------------------------------------------------------------------------
 * The film page opens on the film.
 *
 * The box at the top of /movie-details/<id> was the theme's video.js frame
 * showing a still with no play button. It is now a banner: the still, then the
 * film's trailer fading in over it (muted, inline), with the title, the facts
 * and the existing Rent / Watch / Watchlist buttons laid over a gradient on
 * wide screens and directly under it on phones.
 *
 * Scoped to .uzt-stage / .uzt-hero, which only movieDetail.blade.php renders.
 * Nothing here gives #detail-section a z-index or a transform: the rental and
 * QPay dialogs live inside it, and a stacking context there would trap them
 * under Bootstrap's backdrop. Overlap is won by DOM order instead.
 *
 * Markup: components/section/trailer_hero.blade.php. Behaviour: js/uz-trailer.js.
 * ------------------------------------------------------------------------- */

.uzt-stage {
  --uzt-bg-rgb: var(--bs-body-bg-rgb, 20, 20, 20);
  position: relative;
}

.uzt-stage > #thumbnail-section {
  position: relative;
}

/* ---- the layer over the player box --------------------------------------
   The box's height comes from the theme (.video-player .video-js is a
   padding-bottom ratio: 43% from 1200px, 56.25% below), so this layer can
   never change the page's height and nothing moves when it fills in. */

.uzt-hero {
  background: #000;
  contain: layout paint;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  position: absolute;
}

.uzt-off .uzt-hero {
  display: none;
}

.uzt-hero picture,
.uzt-backdrop {
  display: block;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  width: 100%;
}

.uzt-backdrop {
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* a slow push-in, so a film with no trailer is not a dead photograph */
  .uzt-backdrop {
    animation: uzt-drift 28s ease-out both;
  }

  @keyframes uzt-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
  }
}

.uzt-media {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.7s ease;
  z-index: 1;
}

.uzt-host.uzt-on .uzt-media {
  opacity: 1;
}

/* YouTube draws a 16:9 frame. Cover-fit it to the box and push it a little past
   the edges: on the 2.33:1 desktop box the crop takes YouTube's title strip
   off the top, and nothing inside the frame can be clicked. */
.uzt-media iframe,
.uzt-media .uzt-yt {
  border: 0;
  height: 56.25vw;              /* the box is full-bleed, so vw is its width */
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.14);
  width: 100%;
}

@supports (aspect-ratio: 16 / 9) {
  .uzt-media iframe,
  .uzt-media .uzt-yt {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

.uzt-media video {
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* legibility for the text, and a seam-free fade into the page */
.uzt-shade {
  background: linear-gradient(to top,
              rgb(var(--uzt-bg-rgb)) 0%,
              rgba(var(--uzt-bg-rgb), 0.7) 16%,
              rgba(var(--uzt-bg-rgb), 0) 46%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* ---- sound / trailer controls ------------------------------------------- */

.uzt-controls {
  align-items: center;
  bottom: 16px;
  bottom: clamp(12px, 3.2vw, 28px);
  display: flex;
  gap: 10px;
  position: absolute;
  right: 16px;
  right: clamp(12px, 3vw, 40px);
  z-index: 3;
}

.uzt-btn {
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(18, 18, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0 18px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.uzt-btn i {
  font-size: 1.2em;
}

.uzt-btn:hover,
.uzt-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  color: #fff;
}

.uzt-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.uzt-round {
  padding: 0;
  width: 44px;
}

/* which control shows is the box's state, set by uz-trailer.js */
.uzt-start,
.uzt-mute {
  display: none;
}

.uzt-host.uzt-offer .uzt-start,
.uzt-host.uzt-ended .uzt-start,
.uzt-host.uzt-on .uzt-mute {
  display: inline-flex;
}

@media (max-width: 767.98px) {
  .uzt-btn {
    font-size: 14px;
    height: 38px;
    padding: 0 14px;
  }

  .uzt-round {
    padding: 0;
    width: 38px;
  }
}

/* ---- wide screens: the details sit on the banner -------------------------
   Both sections share one grid cell. #detail-section comes later in the DOM,
   so it paints over the banner without a z-index. It spans the whole banner,
   so it takes no clicks itself - only its text column does - and a tap on
   the banner's sound / Трейлер / Дахин үзэх buttons reaches them. */

@media (min-width: 992px) {
  /* strong on the left: most stills here are posters with the title baked
     into the artwork, and the page's own title has to win over it */
  .uzt-shade {
    background:
      linear-gradient(to top,
        rgb(var(--uzt-bg-rgb)) 0%,
        rgba(var(--uzt-bg-rgb), 0.6) 16%,
        rgba(var(--uzt-bg-rgb), 0) 42%),
      linear-gradient(to right,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.66) 32%,
        rgba(0, 0, 0, 0.2) 56%,
        rgba(0, 0, 0, 0) 72%);
  }

  .uzt-stage:not(.uzt-off) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* on a wide, short window the 43% box would push the buttons below the
     fold; cap it while it is a banner (the film itself gets the full box) */
  .uzt-stage:not(.uzt-off) .video-player .video-js {
    padding-bottom: min(56.25%, calc(100vh - 170px));
  }

  .uzt-stage:not(.uzt-off) > #thumbnail-section,
  .uzt-stage:not(.uzt-off) > #detail-section {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .uzt-stage:not(.uzt-off) > #thumbnail-section {
    align-self: start;
  }

  .uzt-stage:not(.uzt-off) > #detail-section {
    align-self: end;
    pointer-events: none;   /* the banner's buttons are under it */
    position: relative;
  }

  .uzt-stage:not(.uzt-off) .detail-page-info {
    padding: 0 0 3rem;
    padding: 0 0 clamp(2rem, 4.5vw, 4.5rem);
  }

  .uzt-stage:not(.uzt-off) .movie-detail-content {
    max-width: min(44rem, 54%);
    pointer-events: auto;
  }

  /* the rate button stays with the genres instead of flying to the far edge */
  .uzt-stage:not(.uzt-off) .movie-detail-content > .row > [class*="col-md-"] {
    flex: 0 0 auto;
    width: auto;
  }

  .uzt-stage:not(.uzt-off) .movie-detail-content h4 {
    color: #fff;
    font-size: 2.6rem;
    font-size: clamp(2.2rem, 3.1vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }

  .uzt-stage:not(.uzt-off) .movie-detail-content > p.font-size-14 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: rgba(255, 255, 255, 0.86);
    display: -webkit-box;
    font-size: 1rem !important;
    line-height: 1.55;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  }

  .uzt-stage.uzt-open:not(.uzt-off) .movie-detail-content > p.font-size-14 {
    -webkit-line-clamp: unset;
    display: block;
  }

  .uzt-stage:not(.uzt-off) .movie-metalist {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1rem !important;
  }

  .uzt-stage:not(.uzt-off) .movie-detail-content .mt-5 {
    margin-top: 1.6rem !important;
  }

  /* the rental strip was an opaque bar; on the picture it is glass */
  .uzt-stage:not(.uzt-off) .movie-detail-content > .bg-dark {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(16, 16, 18, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    gap: 16px;
  }

  /* level with the action row, clear of the text column */
  .uzt-controls {
    bottom: 3.5rem;
    bottom: clamp(2.5rem, 5vw, 5rem);
  }
}

@media (min-width: 1200px) {
  .uzt-stage:not(.uzt-off) .video-player .video-js {
    padding-bottom: min(43%, calc(100vh - 170px));
  }
}

/* the price button wrapped to three lines next to the rental text */
.uzt-stage .movie-detail-content > .bg-dark .qpay-payment-btn {
  justify-content: center;
  white-space: nowrap;
}

/* on a phone the strip ran off the right edge, taking the price with it,
   and the genre row did the same; let both wrap */
@media (max-width: 767.98px) {
  .uzt-stage .movie-detail-content > .bg-dark {
    flex-wrap: wrap;
    gap: 12px;
  }

  .uzt-stage .movie-detail-content > .bg-dark > div:last-child,
  .uzt-stage .movie-detail-content > .bg-dark .qpay-payment-btn {
    width: 100%;
  }

  .uzt-stage .movie-detail-content > .row .d-flex {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .uzt-stage .movie-detail-content .genres-list {
    min-width: 0;
  }
}

/* "more" - only drawn by uz-trailer.js when the four-line clamp cut text.
   Absolutely placed on the last line, so adding it moves nothing. */
.uzt-more {
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  border-radius: 999px;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 0 0.7em;
  position: absolute;
  right: 0;
}

.uzt-open .uzt-more {
  margin-left: 0.5em;
  position: static;
}

/* once the film plays the synopsis is no longer clamped, and the pill would
   drift to the stage's corner */
.uzt-off .uzt-more {
  display: none;
}

@media (max-width: 991.98px) {
  .uzt-more {
    display: none;
  }

  /* phones: the banner is a 16:9 strip; the details follow it closely */
  .uzt-stage:not(.uzt-off) .detail-page-info.section-spacing {
    padding-top: 1rem;
  }

  .uzt-stage:not(.uzt-off) .movie-detail-content h4 {
    color: #fff;
    font-size: 1.75rem;
    font-size: clamp(1.5rem, 6.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
  }
}

/* ---- the film dialog (play-modal.js, optional phase 2) -------------------
   window.uzTrailer.mount(art, ...) puts .uzt-media and .uzt-controls inside
   .uzm-art. Its own ::after gradient must stay over the trailer for the title
   that overlaps the artwork's bottom 46px, so the media keeps z-index auto and
   loses to it on DOM order; the controls sit above that overlap. */
.uzm-art .uzt-media {
  z-index: auto;
}

.uzm-art .uzt-controls {
  bottom: 58px;
  right: 14px;
}