/* ==========================================================================
   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-sheet is the ONE sheet colour: the shell paints it and the artwork's
   dissolve (::after, below) resolves to it. They used to disagree — the
   dissolve ended on --vod-card-bg while vodlix.css's global
   `.modal-content { background: var(--vod-menu-bg) !important }` painted the
   sheet, so the art faded into a lighter grey band that then cut to the
   darker sheet (owner report 2026-10-08). Hence the !important here
   (legacy-override: vodlix.css .modal-content). */
.vxm .modal-content {
  --vxm-sheet: var(--vod-card-bg, var(--vxl-scrim-solid));
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--vxm-sheet) !important;
  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 {
  /* top padding: the meta row (year · maturity · runtime) sat flush on the
     artwork's lower edge — the hero's 20px foot padding, mirrored */
  padding-top: 20px;
  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: a line or two under the wordmark/title, muted, a
   reading measure; the long description keeps its place in the body.
   26.512.8 — NOT clamped. The field is capped at 200 characters at the source
   (cb_video.short_description), so the line count is already bounded by the
   input; a 2-line -webkit-box clamp on top of that only cut a sentence the admin
   deliberately wrote and left an ellipsis with no way to read the rest. The
   type steps down a little instead, which fits the same copy without eliding
   it. */
.vxm .vxm-info__tagline {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.45;
  color: color-mix(in srgb, var(--vod-white-color, #fff) 82%, transparent);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  max-width: 52ch;
  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);
}
/* Body copy inside the info block. 26.512.8 — the tagline opts OUT: this rule
   is (0,2,1) and sits below `.vxm .vxm-info__tagline` (0,2,0), so it silently
   governed the tagline's size and the tagline's own font-size never applied at
   any width. Excluding it here lets that rule (and the phone step-down in
   mobile-app.css) mean what they say, and leaves every other paragraph alone. */
.vxm .insidePadding > .row p:not(.vxm-info__tagline) {
  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;
    /* Eased, not linear: a straight two-stop ramp shows a visible line where
       it starts and still reads as a band at its foot. These stops follow an
       ease-out curve, so the art is solid for its last few pixels (no seam
       against the surface below) and melts in without a starting edge. */
    background: linear-gradient(0deg,
      var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 0%,
      var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 6%,
      color-mix(in srgb, var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 82%, transparent) 22%,
      color-mix(in srgb, var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 55%, transparent) 42%,
      color-mix(in srgb, var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 26%, transparent) 64%,
      color-mix(in srgb, var(--vxc-dissolve-to, var(--vod-body-bg, #000)) 8%, transparent) 84%,
      transparent 100%);
  }
  /* in the sheet, dissolve into the sheet's own colour (see .vxm .modal-content) */
  body[data-layout] .vxm .modal-content {
    --vxc-dissolve-to: var(--vxm-sheet);
  }
  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 16:9 band. The LOGO (or text title) stays on the
   art's lower-left over a light black scrim, so it reads on a pale frame
   too; progress, actions, meta and synopsis sit UNDER the art on the sheet,
   so the picture is otherwise uncovered (owner call 2026-10-08). The art's
   foot melts 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; /* the logo's containing block — see below */
    inset: auto;
    padding: 20px 48px 4px;
  }
  /* The scrim + melt live on the ratio box, which IS the art, rather than on
     .detailsThumb::after: the thumb also holds the in-flow block under the
     art, so a % height/transform on its ::after landed over the sheet (it
     sat ~200px below the picture) and the art ended on a hard edge. The
     ratio box is positioned and clips, and its children sit at z 1. */
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .detailsThumb::after {
    display: none;
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .detailsThumb .ratio::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      /* melt: the last ~quarter eases into the sheet colour */
      linear-gradient(0deg,
        var(--vxm-sheet) 0%,
        color-mix(in srgb, var(--vxm-sheet) 70%, transparent) 9%,
        color-mix(in srgb, var(--vxm-sheet) 30%, transparent) 18%,
        transparent 28%),
      /* scrim: a light black pool behind the lower-left logo */
      radial-gradient(ellipse 65% 55% at 0% 100%,
        rgb(0 0 0 / 0.5) 0%,
        rgb(0 0 0 / 0.28) 45%,
        transparent 100%);
  }
  /* The logo leaves the in-flow block and sits on the art's foot: bottom:100%
     of .overlapData is the art's lower edge. The column is a Bootstrap .col
     (position: relative), which would capture it, so it is made static. */
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .overlapData .vxm-heroCol {
    position: static;
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .overlapData .videoLogo {
    position: absolute;
    left: 48px;
    bottom: calc(100% + 28px);
    z-index: 3;
    /* a definite width: out of flow the box shrinks to fit, and the img's
       own max-width:45% of THAT made the logo collapse. ~38% of the art is
       the size it had in the column (45% of col-lg-10). */
    width: 38%;
    margin: 0 !important;
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .overlapData .videoLogo img {
    max-width: 100%;
  }
  body[data-layout][data-lo-modal-hero="band"] .vxm .modal-content .videoDetails .innerShade {
    display: none;
  }
}