/**
 * Универсальная карусель (Stimulus controller: carousel).
 * Трек с scroll-snap, точки и опциональные стрелки.
 */

.carousel {
  --carousel-gap: 1rem;
  position: relative;
}

.carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--carousel-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pinch-zoom;
}

.carousel__track--dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none !important;
}

.carousel__track--dragging .carousel__slide {
  scroll-snap-align: none;
}

/* Не даём браузеру таскать картинку как файл — иначе ломается drag карусели */
.carousel__track img {
  -webkit-user-drag: none;
  user-select: none;
}

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

.carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 0;
}

/* Количество видимых слайдов (десктоп / планшет / мобильный) */
.carousel--slides-3 .carousel__slide {
  flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
}

@media (max-width: 992px) {
  .carousel--slides-3 .carousel__slide {
    flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .carousel--slides-3 .carousel__slide {
    flex: 0 0 100%;
  }
}

.carousel--slides-2 .carousel__slide {
  flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
}

@media (max-width: 600px) {
  .carousel--slides-2 .carousel__slide {
    flex: 0 0 100%;
  }
}

.carousel--slides-1 .carousel__slide {
  flex: 0 0 100%;
}

/* Точки навигации */
.carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 0;
  transition: background 0.2s;
}

.carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.carousel__dot--active {
  background: #fff;
}

.carousel__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}