/* ============================================================
   Slider / Carousel
   Shared by: carousel, featured_properties

   HTML:
   <div class="slider">
     <div class="slider-track">
       <article class="slide">...</article>
     </div>
     <nav class="slider-nav">
       <button class="prev">...</button>
       <button class="next">...</button>
     </nav>
   </div>

   JS: global/carousel.js
   ============================================================ */

/* --- Track --- */

.slider-track {
  display: flex;
  gap: var(--gap-block);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

/* --- Slide --- */

.slider-track .slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex-shrink: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.slider-track .slide.in-view {
  opacity: 1;
}

.slider-track .slide:hover {
  transform: translateY(-0.25rem);
}

/* --- Navigation (arrows + dots) --- */

.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
  padding-block: var(--space-4);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
}

.slider-nav .prev,
.slider-nav .next {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: pointer;
  color: var(--color-text);
  transition: border-color var(--transition), color var(--transition);
}

.slider-nav .prev:hover,
.slider-nav .next:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Dots (optional) */
.slider-nav [data-slide] {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition);
}

.slider-nav [data-slide] span {
  display: none;
}

.slider-nav [data-slide].active {
  background: var(--color-primary);
}