/* =========================================
   HERO FADER (Fade + Zoom-out)
   - Full screen style
   - No border / no circle buttons
   - RTL/LTR fixed arrows (JS driven)
========================================= */

/* Wrapper */
.hero-fader{
  position: relative;
  width: 100%;
  overflow: hidden;
  height: min(100vh, 880px);
  min-height: 420px;
}

/* Track */
.hero-fader .hero-track{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slide */
.hero-fader .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease-in-out;
}

/* Background layer (zoom only image) */
.hero-fader .hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.10);
  transition: transform 4s ease;
  will-change: transform;
}

/* Active slide */
.hero-fader .hero-slide.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.hero-fader .hero-slide.is-visible::before{
  transform: scale(1);
}

/* Overlay */
.hero-fader .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.50) 55%,
    rgba(0,0,0,0.80) 85%,
    rgba(0,0,0,0.75) 100%
  );
}

/* Content wrapper */
.hero-fader .hero-inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 80px;
}

/* Title */
.hero-fader .hero-title{
  color: #fff;
  font-size: clamp(22px, 3.5vw, 60px);
  line-height: 1.1;
  max-width: 1000px;
  margin: 0;
  font-weight: 700;
}

/* Link reset */
.hero-fader a{
  text-decoration: none;
}

/* =========================================
   NAV BUTTONS (NO border, NO circle, NO bg)
========================================= */
.hero-fader .hero-nav{
  position: absolute;
  top: 50%;
  z-index: 3;

  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  padding: 0 6px;
  cursor: pointer;

  color: #fff;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;

  transition: opacity .12s ease, transform .12s ease;
  transform: translateY(-50%);
}

.hero-fader .hero-nav:hover{ opacity: .75; }

.hero-fader .hero-nav:focus,
.hero-fader .hero-nav:active,
.hero-fader .hero-nav:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.hero-fader .hero-nav:active{
  transform: translateY(-50%) scale(.9);
}

/* Default positions (LTR) */
.hero-fader .hero-prev{ left:14px; right:auto; }
.hero-fader .hero-next{ right:14px; left:auto; }

/* ✅ RTL positions controlled by JS: slider gets .is-rtl */
.hero-fader.is-rtl .hero-prev{ right:14px; left:auto; }
.hero-fader.is-rtl .hero-next{ left:14px; right:auto; }

/* =========================================
   Responsive
========================================= */
@media (max-width: 992px){
  .hero-fader{
    height: min(70vh, 600px);
    min-height: 360px;
  }
  .hero-fader .hero-title{ font-size: 34px; }
  .hero-fader .hero-inner{ padding: 0 28px 55px; }
  .hero-fader .hero-nav{ font-size: 34px; }
}

@media (max-width: 520px){
  .hero-fader{
    height: min(60vh, 480px);
    min-height: 320px;
  }
  .hero-fader .hero-title{ font-size: 24px; }
  .hero-fader .hero-inner{ padding: 0 20px 45px; }
}

/* =========================================
   Reduced motion
========================================= */
@media (prefers-reduced-motion: reduce){
  .hero-fader .hero-slide{ transition: none; }
  .hero-fader .hero-slide::before{
    transition: none;
    transform: scale(1);
  }
  .hero-fader .hero-nav{ transition: none; }
}