/*------------------------------------------------
# banner carousel slider
--------------------------------------------------*/
.banner-carousel { position:relative; overflow:hidden; width:100%; height:400px;}
.carousel-wrapper { display:flex; transition:transform .5s ease-in-out; will-change:transform; }
.carousel-slide { min-width:100%; position:relative; }
.carousel-slide img { width:100%; height:auto; display:block; object-fit:cover; }

.carousel-controls {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 10px; z-index:10; pointer-events:none;
}
.carousel-controls button { pointer-events:auto; }

.carousel-prev, .carousel-next{
  background:rgba(0,0,0,.5); color:#fff; border:none;
  padding:.75rem 1rem; cursor:pointer;
}
.carousel-toggle {
  background:rgba(0,0,0,.5); color:#fff; border:none;
  padding:.5rem 0.5rem; cursor:pointer;
  display:none;
}

.hero-carousel-cta {
  position:absolute; bottom:25%; right:2%;
  text-decoration:none;
}

.carousel-dots {
  position:absolute; left:50%; bottom:12px;
  transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.carousel-dot {
  width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(0,0,0,.9);
  background:transparent; cursor:pointer;
  padding:0 !important;margin-top:12px;
}
.carousel-dot[aria-selected="true"] { background:rgba(255,255,255,.9); }

/* Focus outlines */
.banner-carousel:focus,
.carousel-prev:focus, .carousel-next:focus, .carousel-toggle:focus,
.carousel-dot:focus, .hero-carousel-cta:focus {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.carousel-toggle:active,.carousel-toggle:focus,.carousel-toggle:hover{color:#000 !important;

/* Screen reader only */
.screen-reader-text {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-wrapper { transition:none; }
}