/**
 * Home hero responsive override.
 * Loaded after main bundle CSS, so keep this in sync with src/index.css.
 */
.hero-home-swiper.swiper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #0a0a14;
}

.hero-home-swiper .swiper-wrapper {
  height: 100%;
}
.hero-home-swiper .swiper-slide {
  height: 100% !important;
  box-sizing: border-box;
}
.hero-home-swiper .hero-slide-inner {
  min-height: 100%;
}

@media (max-width: 1023px) {
  .hero-home-swiper.swiper {
    height: clamp(17rem, 60vw, 24rem) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .hero-home-swiper .swiper-slide > div > img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  .hero-home-swiper .hero-slide-media {
    height: calc(100% - 6.25rem) !important;
    bottom: auto !important;
  }

  .hero-home-swiper .hero-slide-shade {
    height: calc(100% - 6.25rem) !important;
    bottom: auto !important;
  }

  .hero-home-swiper .container-custom {
    padding-bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-home-swiper .hero-cta-group {
    border-radius: 1rem;
    padding: 0.45rem;
    background: rgba(10, 10, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

  .hero-home-swiper .swiper-button-next,
  .hero-home-swiper .swiper-button-prev {
    width: 36px !important;
    height: 36px !important;
    top: calc((100% - 6.25rem) / 2) !important;
  }

  .hero-home-swiper .swiper-button-next::after,
  .hero-home-swiper .swiper-button-prev::after {
    font-size: 13px !important;
  }

  .hero-home-swiper .swiper-pagination {
    bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-home-swiper .swiper-pagination-bullet {
    width: 7px !important;
    height: 7px !important;
    margin: 0 4px !important;
  }

  .hero-home-swiper .swiper-pagination-bullet-active {
    width: 18px !important;
  }
}

@media (max-width: 380px) {
  .hero-home-swiper.swiper {
    height: clamp(16rem, 62vw, 20rem) !important;
  }
}

@media (max-width: 1023px) and (max-height: 520px) {
  .hero-home-swiper.swiper {
    height: clamp(15rem, 56vw, 19rem) !important;
  }

  .hero-home-swiper .container-custom {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-home-swiper .hero-slide-media,
  .hero-home-swiper .hero-slide-shade {
    height: calc(100% - 5.25rem) !important;
    bottom: auto !important;
  }

  .hero-home-swiper .swiper-pagination {
    bottom: calc(4.95rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-home-swiper .swiper-button-next,
  .hero-home-swiper .swiper-button-prev {
    top: calc((100% - 5.25rem) / 2) !important;
  }
}

@media (min-width: 1024px) {
  .hero-home-swiper.swiper {
    height: clamp(32rem, 82vh, 58.75rem) !important;
    min-height: 32rem !important;
    max-height: none;
  }

  .hero-home-swiper .swiper-slide > div > img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
}