/**
 * Горизонтальная лента со сцеплением.
 *
 * Листание делает браузер: scroll-snap. Сценарий нужен только для стрелок и
 * указателя положения. Колесо мыши не перехватывается намеренно — перехват
 * лишает человека возможности проскочить блок на длинной странице.
 */

:root {
  --sr-item: 46%;      /* доля ширины ленты на карточку */
  --sr-gap: 12px;
  --sr-pad: 12px;      /* отступ ленты и запас при сцеплении */
  --sr-radius: 12px;
  --sr-bar: #33404F;   /* полоса прокрутки */
  --sr-bar-track: transparent;
}

.sr-rail {
  display: flex;
  gap: var(--sr-gap);
  padding: var(--sr-pad);
  overflow-x: auto;
  overflow-y: hidden;

  /* лента встаёт ровно на кадре */
  scroll-snap-type: x mandatory;
  /* конец ленты не пролистывает страницу и не даёт жест «назад» */
  overscroll-behavior-inline: contain;
  /* карточка не прилипает к краю при остановке */
  scroll-padding-inline: var(--sr-pad);

  scrollbar-color: var(--sr-bar) var(--sr-bar-track);
  scrollbar-width: thin;
}

.sr-rail::-webkit-scrollbar { height: 8px; }
.sr-rail::-webkit-scrollbar-thumb { background: var(--sr-bar); border-radius: 4px; }
.sr-rail::-webkit-scrollbar-track { background: var(--sr-bar-track); }

.sr-item {
  /* ноль на сжатие и ноль на рост: иначе flex растянет карточки и
     сцепление потеряет смысл */
  flex: 0 0 var(--sr-item);
  min-width: 0;
  scroll-snap-align: center;
  /* не проскакивать несколько кадров одним взмахом */
  scroll-snap-stop: always;
  border-radius: var(--sr-radius);
  overflow: hidden;
}

/* Приблизительное сцепление: берётся, когда ширина карточек разная либо
   карточка шире области. Обязательное там начнёт дёргаться. */
.sr-rail.sr-proximity { scroll-snap-type: x proximity; }
.sr-rail.sr-start .sr-item { scroll-snap-align: start; }

.sr-rail:focus-visible { outline: 2.5px solid currentColor; outline-offset: 2px; }

/* ------------------------------------------------ стрелки и указатель */
.sr-controls { display: flex; align-items: center; gap: 10px; }
.sr-prev, .sr-next {
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid currentColor;
  border-radius: 8px; padding: 4px 10px; opacity: .9;
}
.sr-prev[disabled], .sr-next[disabled] { opacity: .35; cursor: default; }

.sr-dots { display: flex; gap: 6px; }
.sr-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; cursor: pointer;
}
.sr-dots button[aria-current="true"] { background: currentColor; }

/**
 * scroll-behavior: smooth влияет и на программную прокрутку, и на прокрутку
 * колесом, поэтому при просьбе уменьшить движение снимается. Сценарий
 * переключает behavior у scrollBy отдельно: значение в коде перекрывает CSS.
 */
.sr-rail { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .sr-rail { scroll-behavior: auto; }
}