/* ==========================================================================
   VidMov Child — Netflix-style streaming UI
   Loaded after the parent style.css and dark-version.css, so plain
   specificity is enough; no !important anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROW CARD WIDTH  —  REQUIRED, NOT COSMETIC
   The parent ships widths for the GRID widget
   (.global-blog-wrapper.blog-style-rose .post-item { width:16.66% }) but has
   NO equivalent for the SLIDER wrapper. Swiper's base CSS sets
   .swiper-slide{width:100%}, and slidesPerView:'auto' measures the slide's
   rendered width — so without this rule every row renders as ONE full-width
   card and the carousel does not work.
   -------------------------------------------------------------------------- */
.beeteam368-slider-container.container-silder-style-rose .swiper-slide,
.beeteam368-slider-container.container-silder-style-orchid .swiper-slide {
  width: clamp(150px, 15vw, 210px);
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 1365px) {
  .beeteam368-slider-container.container-silder-style-rose .swiper-slide,
  .beeteam368-slider-container.container-silder-style-orchid .swiper-slide {
    width: clamp(140px, 20vw, 190px);
  }
}

@media (max-width: 767px) {
  .beeteam368-slider-container.container-silder-style-rose .swiper-slide,
  .beeteam368-slider-container.container-silder-style-orchid .swiper-slide {
    width: clamp(118px, 34vw, 160px);
  }
}

/* --------------------------------------------------------------------------
   2. UN-CLIP THE ROW EDGES
   Swiper's own CSS sets .swiper{overflow:hidden}, which decapitates a card
   scaled on hover at the start/end of a row (the classic Netflix problem).
   Swiper positions with translate3d on .swiper-wrapper and does not require
   the clip, so we open it up and buy vertical room with padding + a matching
   negative margin (no change to document flow).
   -------------------------------------------------------------------------- */
.beeteam368-slider-container.container-silder-style-rose,
.beeteam368-slider-container.container-silder-style-orchid {
  overflow: visible;
  padding-block: 34px;
  margin-block: -34px;
}

/* Keep the horizontal bleed contained so un-clipping cannot cause page-wide
   sideways scrolling on small screens. */
.elementor-widget-beeteam368_slider_addon {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   3. THUMBNAIL HOVER — SCALE UP + LIFT
   The bottom gradient overlay already exists in the parent at
   style.css:9315 (.blog-style-rose .post-item-wrap .post-featured-image:after)
   so we only add motion, depth and a slightly deeper scrim for dark mode.
   -------------------------------------------------------------------------- */
.blog-style-rose .post-item-wrap .post-featured-image,
.blog-style-orchid .post-item-wrap .post-featured-image {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 280ms ease;
  transform-origin: center center;
  will-change: transform;
}

.container-silder-style-rose .swiper-slide:hover .post-featured-image,
.container-silder-style-orchid .swiper-slide:hover .post-featured-image,
.container-silder-style-rose .swiper-slide:focus-within .post-featured-image,
.container-silder-style-orchid .swiper-slide:focus-within .post-featured-image {
  transform: scale(1.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62);
}

/* Raise the hovered card above its neighbours. */
.container-silder-style-rose .swiper-slide:hover,
.container-silder-style-orchid .swiper-slide:hover,
.container-silder-style-rose .swiper-slide:focus-within,
.container-silder-style-orchid .swiper-slide:focus-within {
  position: relative;
  z-index: 5;
}

/* Deepen the existing gradient so title text stays legible on bright frames. */
body.dark-mode .blog-style-rose .post-item-wrap .post-featured-image:after,
body.dark-mode .blog-style-orchid .post-item-wrap .post-featured-image:after {
  top: 38%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
}

/* --------------------------------------------------------------------------
   4. KEYBOARD FOCUS VISIBILITY
   Hover alone would make the interaction mouse-only.
   -------------------------------------------------------------------------- */
.container-silder-style-rose .swiper-slide a:focus-visible,
.container-silder-style-orchid .swiper-slide a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  border-radius: 7px;
}

.beeteam368-slider-container .swiper-button-next:focus-visible,
.beeteam368-slider-container .swiper-button-prev:focus-visible,
.beeteam368-slider-container .slider-button-next:focus-visible,
.beeteam368-slider-container .slider-button-prev:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. TRANSPARENT -> GLASS HEADER
   Reuses the parent's EXISTING scroll listener (main.js toggles
   body.beeteam368-sticky-menu). No new JavaScript.
   Scoped to the front page so inner pages keep their normal solid header.
   -------------------------------------------------------------------------- */
body:has(.vy-hero) #beeteam368-site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: transparent;
  transition: background-color 350ms ease, backdrop-filter 350ms ease;
}

body:has(.vy-hero) #beeteam368-site-header .beeteam368-top-menu,
body:has(.vy-hero) #beeteam368-site-header .beeteam368-main-menu {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background-color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}

/* Scrolled state — dark glassmorphic bar. */
body:has(.vy-hero).beeteam368-sticky-menu #beeteam368-site-header .beeteam368-main-menu,
body:has(.vy-hero).beeteam368-sticky-menu #beeteam368-site-header .beeteam368-top-menu {
  background-color: rgba(1, 0, 1, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* Fallback for browsers without backdrop-filter — use a solid bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:has(.vy-hero).beeteam368-sticky-menu #beeteam368-site-header .beeteam368-main-menu,
  body:has(.vy-hero).beeteam368-sticky-menu #beeteam368-site-header .beeteam368-top-menu {
    background-color: rgba(1, 0, 1, 0.96);
  }
}

/* --------------------------------------------------------------------------
   6. HERO
   Helper classes applied to the Elementor hero container.
   -------------------------------------------------------------------------- */
.vy-hero {
  position: relative;
  isolation: isolate;
}

/* Cinematic scrim so title/synopsis stay readable over any video frame. */
.vy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 0, 1, 0.25) 0%, rgba(1, 0, 1, 0.00) 42%, rgba(1, 0, 1, 0.88) 100%),
    linear-gradient(90deg, rgba(1, 0, 1, 0.78) 0%, rgba(1, 0, 1, 0.00) 62%);
}

/* Content sits above the scrim; the video layer sits below it. */
.vy-hero > * {
  position: relative;
  z-index: 1;
}

.vy-hero > .elementor-background-video-container {
  z-index: 0;
}

/* Portrait / mobile: shorter hero, centred content, no 100vh letterboxing. */
@media (max-width: 767px) and (orientation: portrait) {
  .vy-hero {
    min-height: 76svh;
  }
  .vy-hero::after {
    background: linear-gradient(180deg, rgba(1, 0, 1, 0.30) 0%, rgba(1, 0, 1, 0.00) 30%, rgba(1, 0, 1, 0.92) 100%);
  }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   Honour the OS setting for both the hover scale and the autoplaying hero.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blog-style-rose .post-item-wrap .post-featured-image,
  .blog-style-orchid .post-item-wrap .post-featured-image,
  body:has(.vy-hero) #beeteam368-site-header,
  body:has(.vy-hero) #beeteam368-site-header .beeteam368-main-menu,
  body:has(.vy-hero) #beeteam368-site-header .beeteam368-top-menu {
    transition: none;
  }

  .container-silder-style-rose .swiper-slide:hover .post-featured-image,
  .container-silder-style-orchid .swiper-slide:hover .post-featured-image,
  .container-silder-style-rose .swiper-slide:focus-within .post-featured-image,
  .container-silder-style-orchid .swiper-slide:focus-within .post-featured-image {
    transform: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }

  /* Hero falls back to its poster image instead of an autoplaying clip. */
  .vy-hero .elementor-background-video-container {
    display: none;
  }
}