/* ==========================================================================
   vxm — Netflix-style info modal for styles/default
   Applies inside the video/series "More Info" modals (.modal.vxm) and on
   the detail pages (movies/{id}, series, live), which opt in via a
   .vxm.vxm-page wrapper + the components' presentation-only `netflix` prop.
   Consumes only existing customizer variables (--vod-*); vodlix.css is
   untouched and loads before this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dialog shell
   -------------------------------------------------------------------------- */
.vxm .modal-dialog.detailsModal {
  max-width: 916px;
  margin: 2rem auto;
}
.vxm .modal-content {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--vod-card-bg);
  box-shadow: var(--vxl-shadow-3);
}
.vxm .close {
  top: 16px;
  right: 16px;
  z-index: 5;
}
/* Bootstrap's .card puts a 4px radius + clip on the inner videoDetails card,
   which trims the hero at a different curve than the 8px modal shell — the
   shell background peeks through the gap at the corners. One clip, one curve:
   the shell's overflow:hidden owns all the rounding. */
.vxm .modal-content .card.videoDetails {
  border-radius: 0;
}

/* Darker, Netflix-weight backdrop — scoped to these modals only; browsers
   without :has() keep Bootstrap's default .5 backdrop */
body:has(.vxm.show) .modal-backdrop.show {
  /* the page's own colour, dimmed — on a light tenant palette a hard black
     scrim would read as a different product */
  background-color: var(--vxl-scrim-solid, #000);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Detail pages (vxm-page) — same treatment as the modal, page-shaped
   -------------------------------------------------------------------------- */
.vxm-page .videoDetails.detail {
  border-radius: 8px;
  overflow: hidden;
}
/* The movie/series detail page nests a SECOND .container (.detailsContainer)
   inside the page .container. Its 15px gutter pushed the card ~15px in from the
   box the close button is positioned against, so the button hugged the right
   edge (only ~5px clearance) while sitting 20px from the top — visibly "too far
   right". The outer .container already supplies the page gutter, so drop the
   redundant inner one: the card fills the width and the close button lands
   symmetrically in its top-right corner. Scoped to the double-container case
   (outer is a .container) so the live detail page — whose single
   .detailsContainer IS its only gutter — is untouched. */
.vxm-page.container > .detailsContainer {
  padding-left: 0;
  padding-right: 0;
}
.vxm-page .insidePadding {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 767.98px) {
  .vxm-page .insidePadding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   Motion — zoom-in instead of Bootstrap's slide-down
   -------------------------------------------------------------------------- */
/* Asymmetric open/close (transitions.dev modal recipe): the base state is
   the CLOSE path — Bootstrap drops .show on dismiss, so the dialog falls
   back here and shrinks away quick (dur-1). The .show state carries its own
   slower transition, so opening scales up at dur-2. Open slow, close fast. */
.vxm.modal.fade .modal-dialog {
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--vxl-dur-1) var(--vxl-ease), opacity var(--vxl-dur-1) var(--vxl-ease);
  will-change: transform, opacity;
}
.vxm.modal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
  transition: transform var(--vxl-dur-2) var(--vxl-ease), opacity var(--vxl-dur-2) var(--vxl-ease);
}
/* Bootstrap reads hide-duration from the .modal element's transition —
   stretch it so the zoom-out completes before teardown */
.vxm.modal.fade {
  transition: opacity var(--vxl-dur-2) var(--vxl-ease);
}

/* --------------------------------------------------------------------------
   Content padding (description / episodes / More Like This)
   -------------------------------------------------------------------------- */
.vxm .modal-content .insidePadding {
  padding-left: 48px;
  padding-right: 48px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.vxm .detailsThumb {
  overflow: hidden;
}
.vxm .detailsThumb iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Seam-free fade from the hero into the modal background — the editors-pick
   billboard treatment (owner call): a tall, eased melt where the artwork
   stays visible and gently dissolves into the card surface, solid only in
   the last sliver, instead of the old short 30% ramp that read as a band. */
.vxm .videoDetails .innerShade {
  background: linear-gradient(0deg,
    var(--vod-card-bg) 0%,
    var(--vod-card-bg) 6%,
    color-mix(in srgb, var(--vod-card-bg) 60%, transparent) 26%,
    rgba(0, 0, 0, 0) 58%);
}
/* Overlay pinned over the hero (replaces the legacy -8vw pull-up) */
.vxm .detailsThumb .overlapData {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 2;
  padding: 0 48px 20px;
}
.vxm .overlapData > .row {
  margin-bottom: 0 !important;
}
.vxm .overlapData .progress {
  margin-bottom: 6px;
}
/* Continue-watch duration row: the bar shipped inside a col-lg-6 — half the
   row at desktop widths, unpredictable below them (a bare .col-lg-* is just
   a shrink-to-fit flex child under 992px) — with the "Xm remaining" label as
   a loose sibling of the column, so bar and label never shared a width or a
   baseline and the fill could stand taller than its own track. One flex
   line: the col dissolves, the bar fills it, the label trails it. Cinematic's
   own detail-page rules load later and still win where they apply. */
.vxm .vxm-info__progressRow {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin-inline: 0 !important;
}
.vxm .vxm-info__progressRow > [class*="col-"] {
  display: contents;
}
.vxm .vxm-info__progressRow .progress {
  flex: 1 1 auto;
  height: 2px !important;
  margin: 0 !important;
  overflow: hidden;
}
.vxm .vxm-info__progressRow .progress .progress-bar {
  height: 100% !important;
}
.vxm .vxm-info__remaining {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  color: var(--vod-white-color);
  opacity: 0.7;
}

/* Full-width hero column (poster is gone in the modal) */
.vxm .vxm-heroCol {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 !important;
}
/* Hide the phone-only title column; the main videoLogo shows everywhere */
.vxm .overlapData .vxm-heroCol.d-lg-none {
  display: none !important;
}
.vxm .videoLogo.d-none {
  display: block !important;
}
/* Netflix-sized title treatment. The drop-shadow matches the detail-page
   logo treatment (26.379.2): a small tenant logo asset reads on bright
   artwork instead of washing into it. */
.vxm .videoLogo img {
  width: auto;
  max-width: 45%;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}
.vxm .videoLogo h1,
.vxm .videoLogo h2 {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
/* 26.499.0 — logo text as a wordmark (editorpick.css carries the hero twin) */
.vxm .videoLogo .vxm-wordmark {
  font-weight: 800;
  letter-spacing: var(--vxl-tracking-tight, -0.03em);
  text-transform: none;
  text-wrap: balance;
  max-width: 16ch;
}
/* 26.499.0 — the tagline: two lines under the wordmark/title, muted, a
   reading measure; the long description keeps its place in the body */
.vxm .vxm-info__tagline {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--vod-white-color, #fff) 82%, transparent);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 46ch;
  margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   Action buttons
   -------------------------------------------------------------------------- */
/* The action CTAs here are the co-classed .vxl-btn tiers from the detail
   templates (this modal renders those same blocks) — no modal-local button
   paint remains; the retired --vod-modal-playbutton-* pair drove it. */
/* The bordered-disc treatment is retired: every icon action here is
   co-classed .vxl-btn--icon (components.css) — a bare 44px circle with a
   soft hover disc, identical on every layout. Only the ink remains ours. */
.vxm .rundedBtn {
  color: var(--vod-white-color);
}
/* Mute + trailer play/pause hug the right edge of the row, Netflix-style.
   .playPauseModal / .iframePlayPauseSeries cover the modal (and series detail,
   which reuses .iframePlayPauseSeries); .playPausePage is the video DETAIL
   page's mute button — add it so the detail page matches the modal. */
.vxm .playPauseModal,
.vxm .iframePlayPauseSeries,
.vxm .playPausePage {
  margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   Metadata row (rendered below the hero in the modal)
   -------------------------------------------------------------------------- */
.vxm .vxm-meta {
  align-items: center;
  font-size: 14px;
  color: var(--vod-white-color);
}
.vxm .badge-secondary-outline {
  border: 1px solid var(--vxl-line-strong);
  border-color: color-mix(in srgb, var(--vod-white-color) 40%, transparent);
  border-radius: 3px;
  color: var(--vod-white-color);
}
.vxm .insidePadding > .row p {
  font-size: 15px;
  line-height: 1.55;
}
.vxm .text-secondary,
.vxm .grey--text {
  color: var(--vod-grey-text) !important;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Episodes (series modal)
   -------------------------------------------------------------------------- */
/* Header: "Episodes" label LEFT, season picker RIGHT, one row (owner call).
   The heading/picker cols were rendering stacked at 100% each — something
   outside this file forces modal cols full-width — so the two header cells
   are pinned here: label flexes, picker hugs its content. The episode rows
   (.vxm-ep, hoisted into this same flex row via .vxc-epScroll's
   display:contents) are NOT direct children, so the > selectors skip them. */
.vxm .vxm-epList {
  align-items: center;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(1) {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(2) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.vxm .vxm-epList h2 {
  font-weight: 600;
  margin-bottom: 0 !important;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(2) .mb-4 {
  margin-bottom: 0 !important;
}
.vxm .vxm-epList select.form-control {
  display: block;
  width: auto;
  min-width: 200px;
  height: 40px;
  margin-left: auto;
  padding: 0 32px 0 14px;
  background-color: var(--vod-menu-bg);
  color: var(--vod-white-color);
  border: 1px solid var(--vxl-line-strong) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 35%, transparent) !important;
  border-radius: var(--vxl-btn-radius, var(--vxl-radius-pill));
}
/* Episode rows: real inner padding so the hover highlight breathes (owner:
   the flush highlight "looks very bad"). Negative inline margins keep the
   row's CONTENT aligned with the heading while the rounded hover surface
   extends a gutter beyond it — the Netflix/HBO list treatment. The width
   bump compensates the negative margins (the row is a flex item at 100%). */
.vxm .vxm-ep {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin: 0 -14px;
  padding: 12px 14px !important;
  border-radius: 10px;
  border-bottom: 0;
  transition: background-color var(--vxl-dur-1) var(--vxl-ease);
}
.vxm .vxm-ep:hover {
  background-color: var(--vxl-surface-1);
  background-color: color-mix(in srgb, var(--vod-white-color) 6%, transparent);
}
/* the separator moves to an inset pseudo-line so the rounded hover surface
   never crosses a full-bleed border */
.vxm .vxm-ep + .vxm-ep {
  position: relative;
}
.vxm .vxm-ep + .vxm-ep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
}
.vxm .vxm-ep:hover + .vxm-ep::before,
.vxm .vxm-ep + .vxm-ep:hover::before {
  background: transparent;
}
.vxm .vxm-ep hr {
  display: none;
}
.vxm .vxm-ep .seriesIndex {
  font-size: 20px;
  color: var(--vod-grey-text);
}
.vxm .vxm-ep .listMenu {
  border-radius: var(--vxl-card-radius, 6px);
  overflow: hidden;
}
.vxm .vxm-ep .listMenu .img {
  width: 132px;
  min-width: 132px;
  margin-bottom: 0 !important;
  border-radius: var(--vxl-card-radius, 4px); /* Thumbnail corners word */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   More Like This cards
   -------------------------------------------------------------------------- */
.vxm .cardBg {
  /* the CARD surface, not the MENU surface — painting these from
     --vod-menu-bg made the Menu Background control repaint More Like This
     and left Card Background option2 with nothing to do (#5350 items 4+7) */
  background-color: var(--vod-card-bg2) !important;
  border-radius: 6px;
  padding-bottom: 4px;
}
.vxm .cardBg .img {
  border-radius: var(--vxl-card-radius, 6px) var(--vxl-card-radius, 6px) 0 0;
  overflow: hidden;
  margin-bottom: 0.75rem !important;
}
/* round every layer under the thumb — the ratio placeholder and the image
   itself — so no square backing peeks out at the corners on any tenant */
.vxm .cardBg .img .ratio,
.vxm .cardBg .img .imgFull {
  border-radius: var(--vxl-card-radius, 6px) var(--vxl-card-radius, 6px) 0 0;
}
.vxm .vxm-ep .listMenu .img .ratio,
.vxm .vxm-ep .listMenu .img img {
  border-radius: 4px;
}
.vxm .cardBg .card-img-overlay span.whiteColor {
  background: var(--vxl-scrim);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
.vxm .cardBg .badge-secondary {
  background-color: transparent;
  border: 1px solid var(--vxl-line-strong);
  border-color: color-mix(in srgb, var(--vod-white-color) 40%, transparent);
  color: var(--vod-white-color);
}
/* description: quieter and smaller so the card reads title-first. Colour
   comes from the derived text token — the markup used to pin it with
   Bootstrap's .text-white-50 literal, which no palette could reach
   (#5350 item 1). */
.vxm .cardBg .vid-description,
.vxm .vxm-ep .listMenu .vid-description {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vod-grey-text);
}

/* --------------------------------------------------------------------------
   About section — keep it mellow (small grey label lines, modest heading)
   -------------------------------------------------------------------------- */
.vxm .insidePadding > h2.h4:has(span) {
  margin-bottom: 10px !important;
  font-size: 1.15rem;
}
.vxm .insidePadding > h2.h4:has(span) span {
  font-weight: 400;
}
.vxm .insidePadding > h2.h4:has(span) span.font-weight-medium {
  font-weight: 600;
}
.vxm .insidePadding > .mb-4 {
  margin-bottom: 12px !important;
  font-size: 13px;
  color: var(--vod-grey-text);
}
.vxm .insidePadding > .mb-4 .badge {
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Mobile — near full-screen sheet
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .vxm .modal-dialog.detailsModal {
    max-width: 100%;
    margin: 0;
    min-height: 100%;
  }
  .vxm .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  .vxm .modal-content .insidePadding {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Overlay back in flow: small heroes can't fit logo + buttons inside */
  .vxm .detailsThumb {
    overflow: visible;
  }
  .vxm .detailsThumb .overlapData {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: -16vw;
    padding: 0 16px 8px;
  }
  .vxm .videoLogo img {
    max-width: 70%;
    max-height: 80px;
  }
  .vxm .detailsIcon {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .vxm .vxm-ep .listMenu .img {
    width: 40%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxm .close {
  right: auto;
  left: 16px;
}
body.rtl .vxm .playPauseModal,
body.rtl .vxm .iframePlayPauseSeries {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.rtl .vxm .vxm-epList select.form-control {
  margin-left: 0;
  margin-right: auto;
  padding: 0 14px 0 32px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxm.modal.fade .modal-dialog {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .vxm.modal.fade {
    transition: none;
  }
  .vxm .vxm-ep {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Info modal + detail page (.vxm / .vxm-page) polish — universal since
   26.481.0 (was cinematic-only): a rounded, elevated sheet, the billboard's
   tight heavy title voice, pill actions, the art dissolving into the
   surface beneath it, a calm lift on the More Like This cards. All from
   tenant tokens. The bare body[data-layout] prefix keeps the specificity
   the rules were written at.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body[data-layout] .vxm .modal-content {
    border-radius: var(--vxl-radius-lg);
    box-shadow: var(--vxl-shadow-3);
  }
  body[data-layout] .vxm .modal-dialog.detailsModal {
    max-width: 1000px;                    /* a cinematic sheet reads wider */
  }
  /* title: the same tight, heavy voice as the billboard */
  body[data-layout] .vxm .videoLogo h1,
  body[data-layout] .vxm .insidePadding > h2.h4:has(span) {
    font-weight: 700;
    letter-spacing: var(--vxl-tracking-tight);
  }
/* 26.499.0 — the wordmark keeps its mark weight under the sheet's title rule */
body[data-layout] .vxm .videoLogo .vxm-wordmark {
  font-weight: 800;
  text-transform: none;
  letter-spacing: var(--vxl-tracking-tight, -0.03em);
}
  body[data-layout] .vxm .videoLogo h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1.08;
  }
  /* actions: the CTA takes the button_shape word (layouts.css) like every
     other labeled button; the icon discs stay round */
  body[data-layout] .vxm .playResumeBtn {
    border-radius: var(--vxl-btn-radius, var(--vxl-radius-pill));
  }
  body[data-layout] .vxm .rundedBtn {
    border-radius: var(--vxl-radius-pill);
  }
  /* The art dissolves into whatever is beneath it — the sheet body in the modal,
     the page on the detail screen.

     This was written for the modal and hard-coded `--vod-card-bg` as the end
     colour. But `.vxm` is on the detail PAGE as well as the sheet, so the page
     got a gradient resolving to the card colour (rgb 23,23,28) over a body that
     is rgb(11,11,16) — a visibly wrong block behind the synopsis, and a seam
     where the gradient ended. The end colour is now a variable that defaults to
     the page background and is re-pointed at the sheet colour inside the modal,
     so each context dissolves into its own surface. */
  body[data-layout] .vxm .detailsThumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(0deg,
      var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 0%,
      transparent 100%);
  }
  body[data-layout] .vxm .modal-content {
    --vxc-dissolve-to: var(--vod-card-bg, var(--vxl-scrim-solid));
  }
  body[data-layout] .vxm .detailsThumb {
    position: relative;
  }
  /* "More Like This" cards get the same calm lift as the rails */
  body[data-layout] .vxm .cardBg {
    border-radius: var(--vxl-card-radius);
    transition: transform var(--vxl-dur-2) var(--vxl-ease),
                box-shadow var(--vxl-dur-2) var(--vxl-ease);
  }
  body[data-layout] .vxm .cardBg:hover {
    transform: translateY(-3px);
    box-shadow: var(--vxl-shadow-2);
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-layout] .vxm .cardBg {
      transition: none;
    }
    body[data-layout] .vxm .cardBg:hover {
      transform: none;
    }
  }
}

/* (26.495.0) The phone copy of this polish, gated on the old
   detail_hero="fullbleed" stamp, is gone: phones never open the sheet
   (Opening a title is a desktop word, the phone always routes to the page),
   so it styled nothing a viewer could reach. */

/* ==========================================================================
   modal_hero (26.495.0) — the info modal's own hero word, shown in the pane
   while Opening a title = Info modal.

   fullbleed (default = what the sheet has looked like since 26.478): the
   title, meta and actions sit ON the artwork's foot over the dissolve.

   band: the artwork is a plain 16:9 band and the same block sits UNDER it
   in flow, so the picture is never covered. The melt stays, shorter, so the
   band's lower edge blends into the sheet instead of ending on a line.
   ========================================================================== */
@media (min-width: 992px) {
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .detailsThumb .overlapData {
    position: relative;
    inset: auto;
    padding: 20px 48px 4px;
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .detailsThumb::after {
    /* the ratio box, not the whole hero + block: bottom-anchored to the art */
    top: auto;
    height: 34%;
    bottom: auto;
    transform: translateY(-100%);
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .videoDetails .innerShade {
    display: none;
  }
  /* a title on a band wants no shadow — it is on the sheet, not on art */
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .videoLogo h1,
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .vxm-info__title {
    text-shadow: none;
  }
}