/**
 * Video Banner — Autoplay Background Video Styles
 * Works with .ms-banner-bg-video injected by video-banner-autoplay.js
 * @package mixedskills
 */

/* ── 1. Make every video-banner slide the positioning parent ── */
.banner-area.video-banner .swiper-slide {
  position: relative;
  overflow: hidden;
}

/* ── 2. Full-bleed background video ── */
.ms-banner-bg-video {
  position: absolute;
  inset: 0;                      /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;          /* clicks pass through to slide content */
  display: block;
}

/* ── 3. Slide content stays above the video ── */
.banner-area.video-banner .swiper-slide .container,
.banner-area.video-banner .swiper-slide .cell,
.banner-area.video-banner .swiper-slide .content,
.banner-area.video-banner .swiper-slide .banner-social-buttons {
  position: relative;
  z-index: 2;
}

/* ── 4. Dark overlay so text & UI remain readable ── */
.banner-area.video-banner .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
  pointer-events: none;
}

/* ── 5. The popup trigger link — hidden visually, still in DOM for popup JS ── */
/* Hide the entire <a data-popup-json> link and its icon in video banners */
.banner-area.video-banner [data-popup-json],
.banner-area.video-banner [data-popup-json] i,
.banner-area.video-banner [data-popup-json] i::before,
.banner-area.video-banner [data-popup-json] i::after,
.banner-area.video-banner .music-and-multimedia-play-button,
.banner-area.video-banner .music-and-multimedia-play-button::before,
.banner-area.video-banner .music-and-multimedia-play-button::after,
.ms-vbanner-icon-hidden,
.ms-vbanner-icon-hidden::before,
.ms-vbanner-icon-hidden::after {
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  font-size: 0 !important;
}

/* ── 6. Hide the decorative corner-bracket (.angle) ── */
.banner-area.video-banner .angle,
.banner-area.video-banner .angle span,
.banner-area.video-banner .angle span::before,
.banner-area.video-banner .angle span::after {
  display: none !important;
  visibility: hidden !important;
}