/*
 * Sliders (vanilla scroll-snap)
 *
 * Developed by: Rhyll Neri
 */

.slider {
  position: relative;
}

.slider__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-2) 2px var(--space-6);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar { display: none; }

.slider__slide {
  flex: 0 0 calc(33.333% - var(--space-5));
  scroll-snap-align: start;
  min-width: 0;
}

@media (max-width: 1024px) { .slider__slide { flex-basis: calc(50% - var(--space-5)); } }
@media (max-width: 600px)  { .slider__slide { flex-basis: 85%; } }

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.slider__dots {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider__dot {
  width: 24px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background var(--dur-200), width var(--dur-200);
  cursor: pointer;
}

.slider__dot.is-active {
  background: var(--color-primary);
  width: 40px;
}

.slider__nav {
  display: flex;
  gap: var(--space-2);
}

.slider__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-200), color var(--dur-200), border-color var(--dur-200);
}

.slider__btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.slider__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider__btn--prev .icon { transform: rotate(180deg); }