/* EMBAC Home Slider — slider-embac.css
   --------------------------------------------------------------
   Pairs with slider-embac.js (Swiper required).
   Mobile (<768px): overlay hidden, NO arrows, keep pagination.
*/

/* Container */
#home-hero {
  position: relative;
  overflow: hidden;
}

/* Slides */
#home-hero .swiper-slide {
  position: relative;
}

#home-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay block (kept for potential future use; hidden by default) */
#home-hero .slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  display: none; /* hidden */
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
  padding: 0 1rem;
  z-index: 3; /* above image, below controls/pagination */
}

#home-hero .slide-title { font-weight: 700; line-height: 1.2; }
#home-hero .slide-sub   { max-width: 48ch; }
#home-hero .slide-cta   {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

/* Controls (arrows) — desktop default */
#home-hero .swiper-button-prev,
#home-hero .swiper-button-next {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  color: #fff;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Safari */
  transition: background 0.2s ease;
  z-index: 5;
  outline: none;
}

#home-hero .swiper-button-prev:hover,
#home-hero .swiper-button-next:hover {
  background: rgba(0,0,0,0.55);
}

/* Focus ring for a11y */
#home-hero .swiper-button-prev:focus-visible,
#home-hero .swiper-button-next:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.6);
}

/* Arrow glyphs — keep EXACT values you set */
#home-hero .swiper-button-prev::after {
  content: "\e7a4"; /* left (<) */
  font-family: "font-icons", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}
#home-hero .swiper-button-next::after {
  content: "\e7a5"; /* right (>) */
  font-family: "font-icons", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}

/* Positioning */
#home-hero .swiper-button-prev { left: 12px; }
#home-hero .swiper-button-next { right: 12px; }

/* Pagination (dots) */
#home-hero .swiper-pagination { z-index: 4; }
#home-hero .swiper-pagination-bullets { bottom: 10px; }
#home-hero .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  opacity: 0.6;
  box-shadow: 0 0 0 2px rgba(255, 121, 4, 0.646); /* your color */
}
#home-hero .swiper-pagination-bullet-active { opacity: 1; }

/* Desktop */
@media (min-width: 768px) {
  #home-hero .slide-overlay { display: none; } /* keep hidden for now */
}

/* Mobile */
@media (max-width: 767px) {
  /* Hide overlay and arrows on mobile */
  #home-hero .slide-overlay { display: none; }
  #home-hero .swiper-button-prev,
  #home-hero .swiper-button-next { display: none; }

  /* Keep swipe & pagination only */
  #home-hero .swiper-pagination { pointer-events: auto; }

  /* Optional: tighter hit areas not needed since arrows hidden */
}
  
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #home-hero .swiper-wrapper { transition-duration: 0s !important; }
}
/* Smoother easing only on desktop */
@media (min-width: 768px) {
  #home-hero .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* easeOutSine-ish */
  }
}