/* Лента-слайдер блока «Фотогалерея» (docs/60): фото в ряд с прокруткой и привязкой к началу карточки,
   стрелки — круглые кнопки по краям ленты. Без JS лента листается пальцем и скроллом мыши, стрелки скрыты. */

.op-slider {
  position: relative;
}

.op-slider__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.op-slider__item {
  flex: 0 0 80%;
  min-width: 0;
  scroll-snap-align: start;
}

.op-slider__item figure {
  margin: 0;
}

.op-slider__caption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
}

@media (min-width: 48rem) {
  .op-slider__item {
    flex-basis: 44%;
  }
}

@media (min-width: 64rem) {
  .op-slider__item {
    flex-basis: 26%;
  }
}

/* Стрелки поверх ленты, вертикально по центру фото; на краях ленты выключаются (скрипт) */
.op-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.op-slider__nav--prev {
  left: var(--space-2);
}

.op-slider__nav--next {
  right: var(--space-2);
}

/* Иконка-стрелка смотрит вправо; у кнопки «назад» — влево */
.op-slider__nav--prev .op-icon {
  transform: rotate(180deg);
}

.op-slider__nav:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Без JS стрелок нет: лента листается прокруткой (html:not(.op-js) сильнее позднего .op-button) */
html:not(.op-js) .op-slider__nav {
  display: none;
}