/* ============================================================
   SCROLL-SLIDER.CSS — Универсальный горизонтальный слайдер
   с scroll-snap и скролл-индикатором

   Используется на:
     — главной (schedule slider) — после миграции
     — страница актёра (галерея)
     — любой будущий горизонтальный слайдер

   Структура HTML:
     .scroll-slider
       .scroll-slider__track       (overflow-x: scroll, snap)
         .scroll-slider__items     (flex, width: max-content)
           [items]                 (flex: 0 0 <width>, snap-align)
       .scroll-slider__indicator
         .scroll-slider__indicator-track
           .scroll-slider__indicator-thumb

   JS-класс: window.ScrollSlider (scroll-slider.js)
   ============================================================ */


/* ══════════════════════════════════════════════════
   ТРЕК — нативный горизонтальный скролл со snap.
   Скроллбар скрыт, touch-скроллинг + scroll-snap.
   ══════════════════════════════════════════════════ */
.scroll-slider__track {
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

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


/* ══════════════════════════════════════════════════
   КОНТЕЙНЕР ЭЛЕМЕНТОВ — flex-ряд, ширина по содержимому.
   gap задаётся страничным CSS через переменную или напрямую.
   ══════════════════════════════════════════════════ */
.scroll-slider__items {
  display: flex;
  width: max-content;
}


/* ══════════════════════════════════════════════════
   ИНДИКАТОР — тонкая полоска с ползунком (thumb).
   Трек: 3px высотой, фон 10% чёрного.
   Ползунок: 3px, чёрный, позиция и ширина задаются JS.
   ══════════════════════════════════════════════════ */
.scroll-slider__indicator {
  padding: 0 10px;           /* боковые отступы как у контента */
}

.scroll-slider__indicator-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--color-black-soft-10);
  border-radius: 2px;
}

.scroll-slider__indicator-thumb {
  will-change: transform, width;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-black-soft);
  border-radius: 2px;
  /* Никакого transition — JS двигает напрямую без задержки
     для максимальной отзывчивости при скролле. */
}