/* ==========================================================================
   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.
   This single !important rule is the canonical hero height for ALL view types
   — default (vt1), hero-image (vt2) and hero-VIDEO (vt3) — on BOTH the homepage
   and the group/list page. The old per-template inline `.heroVideoDiv` <style>
   blocks were redundant (this rule already won) and have been removed; the
   `heroVideoDiv` class is now just markup parity between the two pages.
   -------------------------------------------------------------------------- */
.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 and standalone (group/list) share the SAME pull so the gap
   between the hero buttons and the first rail is identical on both: the hero is
   the same height and the billboard is bottom-anchored, so the gap depends only
   on this value (-8vw made the group rail sit too close under the buttons). */
#items-list .featureSlider + div,
.featureSlider.vxe-ep-standalone + .overLapEditor,
.featureSlider.vxe-ep-standalone + [id] {
  margin-top: -5vw !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 — logo/title stay clearly visible, just smaller (Netflix keeps
   the logo prominent while the trailer plays). scale(0.55) read as "gone"; 0.72
   is a comfortable shrink that keeps it legible. The description fades out below
   (that collapse is intentional — matches Netflix), and the billboard row is
   bottom-anchored (align-items:flex-end above), so the logo + buttons stay
   pinned to the bottom-left and don't jump when the description collapses. */
.featureSlider .vxe-billboard.vxe-shrunk .slideLogo,
.featureSlider .vxe-billboard.vxe-shrunk .slideTitle {
  transform: scale(0.72);
}

/* --------------------------------------------------------------------------
   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;
}