/*
 * Slider used by the testimonial sections.
 *
 * Native scroll-snap does the sliding, so it works with touch, trackpad and
 * keyboard before any JavaScript runs; assets/js/testimonial-slider.js only
 * adds the arrow buttons, the dots and the disabled states on top.
 *
 * Markup: [data-kalaay-slider] > [data-slider-viewport] > [data-slider-track]
 *         > .kalaay-slide, plus optional [data-slider-prev/next/dots].
 */

.kalaay-slider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Hide the scrollbar — the arrows and dots are the affordance here. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kalaay-slider-viewport::-webkit-scrollbar {
  display: none;
}

.kalaay-slider-track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.kalaay-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .kalaay-slider-track {
    gap: 2rem;
  }

  /* Two per view on desktop, matching the grid this replaced. */
  .kalaay-slide {
    flex-basis: calc((100% - 2rem) / 2);
  }
}

.kalaay-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* Bottom margin matters: the testimonial section carries no bottom padding
     (that is how the original design renders), so without it the dots sit
     flush against the edge of the dark band. */
  margin: 2rem 0;
}

.kalaay-slider-dots:empty {
  display: none;
}

.kalaay-slider-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  /* currentColor so the dots read correctly on light and dark sections. */
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
  transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.kalaay-slider-dot:hover {
  opacity: 0.7;
}

.kalaay-slider-dot.is-active {
  width: 1.5rem;
  opacity: 1;
  background: #ffc001;
}

.kalaay-slider-dot:focus-visible,
[data-slider-prev]:focus-visible,
[data-slider-next]:focus-visible {
  outline: 2px solid #ffc001;
  outline-offset: 3px;
}

[data-slider-prev][disabled],
[data-slider-next][disabled] {
  opacity: 0.3;
  cursor: default;
}

/* One page of content — nothing to slide to. */
[data-kalaay-slider].is-static [data-slider-prev],
[data-kalaay-slider].is-static [data-slider-next] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .kalaay-slider-viewport {
    scroll-behavior: auto;
  }
}