/* ==========================================================================
   vxe — Netflix-style editors-pick billboard for styles/default
   Restyles the editors-pick hero (all 3 view types: default swiper, hero
   image, hero video) into a Netflix billboard, and drives the trailer
   "shrink" animation (logo scales down + description fades ~8s into playback,
   toggled by the .vxe-shrunk class the Vue instance adds).
   Scoped under .featureSlider so it only touches the billboard. Consumes only
   --vod-* customizer vars (incl. --vod-ep-* button colours) with fallbacks;
   beats vodlix.css's vw-based !important overlay rules with scoped !important.
   vodlix.css loads first and is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Billboard overlay — bottom-left anchored content column
   -------------------------------------------------------------------------- */
.featureSlider .swiperInfo.vxe-billboard {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  /* bottom padding must clear the -13vw rail overlap (.featureSlider +
     .overLapEditor / #items-list .featureSlider + div) so the buttons never
     collide with the first rail */
  padding: 0 3% 7vw !important;
  pointer-events: none;
}
/* Gradients live on `.relative` (the artwork wrapper), NOT on `.swiperInfo`
   (z-index 10). The artwork's own wrapper (`.ratio > div`) is `position:absolute;
   z-index:1`, so the gradients MUST carry a z-index above that (2) or they paint
   BEHIND the image and never show. They still stay below `.cateHolder` (the rail
   wrapper) and the overlapping first rail because the whole `.featureSlider` is
   non-positioned while `.cateHolder` is positioned (z-index 1) — a local z-index
   inside `.featureSlider` can't lift its subtree past a positioned ancestor's
   sibling. So the fade covers the image bottom yet the rails still paint on top.
   `.relative::before` = left scrim (legibility) + top vignette (blends the
   artwork under the fixed header instead of a hard cut). */
.featureSlider .relative::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 26%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 16%);
}
/* `.relative::after` = bottom fade to the page background, solid for the full
   ~13vw rail-overlap depth then fades up, so the rails sit on a merged surface
   (restores the old .sliderInnerShadow feel). z-index 2 = above the artwork,
   below the rails (see note above). */
.featureSlider .relative::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  z-index: 2;
  pointer-events: none;
  /* gentle Netflix-style fade: the artwork stays visible and just darkens
     toward the bottom (solid only in the last sliver where the page bg starts),
     so the first rail sits on a darkened image instead of a hard black band */
  background: linear-gradient(0deg,
    var(--vod-body-bg, #141414) 0%,
    var(--vod-body-bg, #141414) 8%,
    rgba(20, 20, 20, 0) 100%);
}
/* --------------------------------------------------------------------------
   Billboard geometry — Netflix-style full-bleed hero (default + hero-image)
   A natural 16:9 leaves black at the bottom on wide-but-tall viewports and
   isn't full-bleed. Instead the hero fills the viewport (`calc(100vh - 64px)`)
   with `object-fit: cover` pinned to the top, so the artwork covers the whole
   screen, the top is never sliced, and the first rail peeks over the bottom.
   Applies to the default (vt1) + hero-image (vt2); the vt3 hero-VIDEO keeps its
   own `heroVideoDiv` 100vh rule (more specific, wins).
   -------------------------------------------------------------------------- */
.featureSlider .ratio.ratio-16x9 {
  padding-top: 0 !important;
  height: calc(100vh - 64px) !important;
}
.featureSlider .ratio.ratio-16x9 > div,
.featureSlider .ratio.ratio-16x9 img.imgFull,
.featureSlider .ratio.ratio-16x9 > video {
  height: 100% !important;
  object-fit: cover !important;
  /* pin the crop to the TOP so the header-side of the artwork is never sliced;
     any cover overflow is taken off the bottom (which the fade covers anyway) */
  object-position: center top !important;
}
/* Top pull is HOME-only (`#items-list`). The home content is pulled up ~64px
   under the fixed header by the global layout, which slices the top of the
   artwork; a +64px margin lands the hero flush at the viewport top (behind the
   floating header) so the top is never cut. The group/list page isn't pulled
   up, so it keeps the vodlix.css -6rem to sit flush (overriding it there
   re-opens a gap under the header). */
#items-list .featureSlider {
  margin-top: 64px !important;
}
/* First-rail overlap — pull the rail up so it peeks over the hero bottom
   (Netflix). Home + standalone (group/list) sit at slightly different heights,
   so the standalone gets a touch more pull to land the rail in the same place. */
#items-list .featureSlider + div {
  margin-top: -5vw !important;
}
.featureSlider.vxe-ep-standalone + .overLapEditor,
.featureSlider.vxe-ep-standalone + [id] {
  margin-top: -8vw !important;
}
/* info column above the scrim (z-index 10 already set below) */
.featureSlider .swiperInfo.vxe-billboard .row {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  align-items: flex-end !important;
}
.featureSlider .swiperInfo.vxe-billboard .row > [class*="col-"] {
  padding-left: 0;
}
.featureSlider .swiperInfo.vxe-billboard .row > [class*="col-"],
.vxe-billboard__col {
  max-width: 42% !important;
  flex: 0 0 42% !important;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Logo / title — big by default, shrinks on .vxe-shrunk
   -------------------------------------------------------------------------- */
.featureSlider .vxe-billboard .slideLogo {
  transform-origin: bottom left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 18px !important;
}
.featureSlider .vxe-billboard .slideLogo img.innerSlideLogo {
  width: auto !important;
  max-width: clamp(200px, 30vw, 420px) !important;
  max-height: clamp(90px, 13vw, 200px) !important;
  object-fit: contain;
  object-position: bottom left;
}
.featureSlider .vxe-billboard .slideTitle {
  font-size: clamp(1.9rem, 4vw, 3.6rem) !important;
  line-height: 1.05;
  color: var(--vod-white-color, #fff);
  transform-origin: bottom left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 14px !important;
}
/* shrink state */
.featureSlider .vxe-billboard.vxe-shrunk .slideLogo,
.featureSlider .vxe-billboard.vxe-shrunk .slideTitle {
  transform: scale(0.55);
}

/* --------------------------------------------------------------------------
   Description — visible by default, fades + collapses on shrink
   -------------------------------------------------------------------------- */
.featureSlider .vxe-billboard .text_description,
.featureSlider .vxe-billboard .text_description1 {
  font-size: clamp(0.9rem, 1.15vw, 1.35rem) !important;
  line-height: 1.5;
  color: color-mix(in srgb, var(--vod-white-color, #fff) 90%, transparent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  max-height: 8em;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.featureSlider .vxe-billboard.vxe-shrunk .text_description,
.featureSlider .vxe-billboard.vxe-shrunk .text_description1 {
  opacity: 0;
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Buttons — Play (solid) + More Info (translucent grey), stay put on shrink
   -------------------------------------------------------------------------- */
.featureSlider .vxe-billboard .sldieBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.featureSlider .vxe-billboard .sldieBtns .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 1.9rem !important;
  border-radius: 6px !important;
  font-size: clamp(0.95rem, 1.15vw, 1.25rem) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.featureSlider .vxe-billboard .sldieBtns .btn .iconsize {
  height: auto !important;
  width: auto !important;
  line-height: 1 !important;
  font-size: 1.5em !important;
  margin: 0 !important;
}
/* Play / Trailer — customizer play-button colour, default solid white */
.featureSlider .vxe-billboard .sldieBtns .btn.btn-editors-pick {
  background-color: var(--vod-ep-playbutton-bg, var(--vod-ep-playbutton-color, #fff)) !important;
  border-color: var(--vod-ep-playbutton-bg, var(--vod-ep-playbutton-color, #fff)) !important;
  color: var(--vod-ep-playbutton-text, #000) !important;
  transition: filter 0.15s ease;
}
.featureSlider .vxe-billboard .sldieBtns .btn.btn-editors-pick:hover {
  filter: brightness(0.9);
}
/* More Info — translucent grey */
.featureSlider .vxe-billboard .sldieBtns .btn.btn-secondary {
  background-color: var(--vod-ep-secondary-button-bg, rgba(109, 109, 110, 0.7)) !important;
  border-color: transparent !important;
  color: var(--vod-white-color, #fff) !important;
  transition: background-color 0.15s ease;
}
.featureSlider .vxe-billboard .sldieBtns .btn.btn-secondary:hover {
  background-color: var(--vod-ep-secondary-button-hover-bg, rgba(109, 109, 110, 0.5)) !important;
}

/* --------------------------------------------------------------------------
   Controls — bottom-right mute / replay (trailer view types)
   -------------------------------------------------------------------------- */
/* controls sit just above the age tag on the right edge */
.featureSlider .vxe-controls {
  position: absolute;
  right: 0;
  bottom: calc(35% + 54px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 3%;
}
.featureSlider .vxe-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-color: color-mix(in srgb, var(--vod-white-color, #fff) 50%, transparent);
  color: var(--vod-white-color, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.featureSlider .vxe-ctrl:hover {
  border-color: var(--vod-white-color, #fff);
  background-color: rgba(0, 0, 0, 0.55);
}
.featureSlider .vxe-ctrl .mdi {
  font-size: 20px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Age-rating tag — Netflix vertical tab on the right edge
   -------------------------------------------------------------------------- */
.featureSlider .maturityLevel.vxe-agetag,
.featureSlider .maturityLevel {
  position: absolute;
  right: 0;
  bottom: 35%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 3% 6px 14px !important;
  border: 0 !important;
  border-left: 3px solid color-mix(in srgb, var(--vod-white-color, #fff) 85%, transparent) !important;
  background-color: rgba(51, 51, 51, 0.6) !important;
  color: var(--vod-white-color, #fff) !important;
  font-size: clamp(0.8rem, 1vw, 1.1rem) !important;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Legacy shadow layers — fold into the billboard gradient (avoid double-dark)
   -------------------------------------------------------------------------- */
.featureSlider .slideRightShadow,
.featureSlider .sliderInnerShadow {
  display: none;
}

/* --------------------------------------------------------------------------
   Mobile — static billboard, no shrink; smaller logo, hide description
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .featureSlider .swiperInfo.vxe-billboard {
    align-items: flex-end;
    padding: 0 16px 20px !important;
  }
  .featureSlider .swiperInfo.vxe-billboard .row > [class*="col-"],
  .vxe-billboard__col {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .featureSlider .vxe-billboard .slideLogo img.innerSlideLogo {
    max-width: 150px !important;
    max-height: 70px !important;
  }
  .featureSlider .vxe-billboard .text_description,
  .featureSlider .vxe-billboard .text_description1 {
    display: none !important;
  }
  /* no shrink transform on mobile */
  .featureSlider .vxe-billboard.vxe-shrunk .slideLogo,
  .featureSlider .vxe-billboard.vxe-shrunk .slideTitle {
    transform: none;
  }
  .featureSlider .vxe-controls {
    bottom: auto;
    top: 62px;
    gap: 8px;
  }
  .featureSlider .maturityLevel {
    bottom: auto;
    top: 12px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — no shrink/fade transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .featureSlider .vxe-billboard .slideLogo,
  .featureSlider .vxe-billboard .slideTitle,
  .featureSlider .vxe-billboard .text_description,
  .featureSlider .vxe-billboard .text_description1 {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   RTL — anchor content right, flip gradient + controls/age tag to the left
   -------------------------------------------------------------------------- */
body.rtl .featureSlider .relative::before {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 26%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 16%);
}
body.rtl .featureSlider .vxe-billboard .slideLogo,
body.rtl .featureSlider .vxe-billboard .slideTitle {
  transform-origin: bottom right;
}
body.rtl .featureSlider .vxe-billboard .slideLogo img.innerSlideLogo {
  object-position: bottom right;
}
body.rtl .featureSlider .vxe-controls {
  right: auto;
  left: 0;
  padding-right: 0;
  padding-left: 3%;
}
body.rtl .featureSlider .maturityLevel {
  right: auto;
  left: 0;
  border-left: 0 !important;
  border-right: 3px solid color-mix(in srgb, var(--vod-white-color, #fff) 85%, transparent) !important;
  padding: 6px 14px 6px 3% !important;
}