/* =========================================================
   banner.css — Hero Banner (Swiper.js) styling
   ---------------------------------------------------------
   Note: the actual slide box (.hero-slide) - including its
   FIXED height and title/description line-clamping - lives in
   style.css. That fixed height is intentional: it's what
   prevents the page from jumping/shaking as Swiper auto-plays
   between banners of different content lengths. Don't remove
   it when editing this file.
   ========================================================= */

.hero-swiper {
  border-radius: 20px;
  overflow: hidden;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Keep banner content above the overlay layer */
.hero-slide .row { position: relative; z-index: 1; }

/* ---------- Navigation arrows ---------- */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  backdrop-filter: blur(2px);
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.4);
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- Pagination dots ---------- */
.hero-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
  width: 8px;
  height: 8px;
}
.hero-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 767.98px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next {
    display: none; /* dots + swipe gesture are enough on touch devices */
  }
}