/**
 * APSL Winner Video Banner Styles
 * Responsive, full-bleed pure video banner for Desktop & Mobile
 */

/* -------------------------------------------------------------
 * 1. Base Slide Container (Inside #homeBanner Owl Carousel)
 * ------------------------------------------------------------- */
.banner .item.apsl-video-banner-slide,
#homeBanner .item.apsl-video-banner-slide {
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #0b1a3d !important;
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  float: left !important;
}

/* Banner Component Root */
.apsl-video-banner {
  position: relative !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  overflow: hidden !important;
  background-color: #0b1a3d !important;
  display: block !important;
}

/* Optional Full-Banner Clickable Link */
.apsl-video-banner__link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
  outline: none !important;
  z-index: 2 !important;
}

/* Media Wrappers */
.apsl-video-banner__media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Video Elements: 100% width, no left crop */
.apsl-video-banner__video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: fill !important;
  object-position: left center !important;
  display: block !important;
  border: none !important;
  outline: none !important;
  background-color: #0b1a3d !important;
}

/* -------------------------------------------------------------
 * 2. Desktop Mode (> 580px)
 * ------------------------------------------------------------- */
@media (min-width: 581px) {
  .apsl-video-banner__media--desktop {
    display: block !important;
  }
  .apsl-video-banner__media--mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------
 * 3. Mobile Mode (<= 580px)
 * ------------------------------------------------------------- */
@media (max-width: 580px) {
  .banner .item.apsl-video-banner-slide,
  #homeBanner .item.apsl-video-banner-slide {
    height: 375px !important;
    min-height: 375px !important;
    max-height: 375px !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  .apsl-video-banner {
    height: 375px !important;
    min-height: 375px !important;
    max-height: 375px !important;
    width: 100vw !important;
    min-width: 100vw !important;
  }

  .apsl-video-banner__media--desktop {
    display: none !important;
  }

  .apsl-video-banner__media--mobile {
    display: block !important;
  }

  .apsl-video-banner__video {
    object-fit: cover !important;
    object-position: center center !important;
  }
}