/* Задача 49. Общий вид ленты-слайдера партнёров и наград (скрипт —
   modernization/slider.js). Отзывы пользуются тем же скриптом, но сохраняют
   свои классы (.reviews__control и т. д. в template_styles.css): их вид не
   менялся.

   Стрелки — тот же белый круг с тенью, что у отзывов (задачи 35, 41).
     ≥1340   по бокам блока, за краем контейнера — карточки полной ширины;
     641–1339 по бокам, в боковых полях ленты (поля появляются, только когда
              лента прокручивается) — стрелки не лежат на карточках;
     ≤640    под лентой, между ними счётчик «1 / 6», зоны 44×44.
   Без скрипта навигации нет (hidden в разметке), лента прокручивается
   пальцем, колесом, трекпадом; на компьютере видна тонкая полоса
   прокрутки. Со скриптом полоса скрыта — листают стрелками. */

.fda-slider {
  position: relative;
}

.fda-slider__track {
  display: flex;
  flex-wrap: nowrap;
  /* Неполный ряд — по центру; safe — пока лента не помещается, начало
     не уезжает за левый край. */
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.fda-slider__track > * {
  scroll-snap-align: start;
}

.fda-slider.is-enhanced .fda-slider__track {
  scrollbar-width: none;
}

.fda-slider.is-enhanced .fda-slider__track::-webkit-scrollbar {
  display: none;
}

.fda-slider__track:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 4px;
  border-radius: 4px;
}

.fda-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

@media (hover: hover) {
  .fda-slider__arrow:not(.is-disabled):hover {
    background: var(--color-text);
    color: var(--color-white);
  }
}

.fda-slider__arrow:focus-visible,
.reviews__control:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
}

/* В начале ленты левая стрелка неактивна, в конце — правая. Кнопка
   остаётся в фокусе (aria-disabled, а не disabled) — фокус не теряется. */
.fda-slider__arrow.is-disabled,
.reviews__control.is-disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.fda-slider__nav[hidden] {
  display: none;
}

.fda-slider__counter {
  display: none;
}

/* ≥1340: стрелки за краем контейнера, по центру ленты. */
.fda-slider__arrow--prev {
  left: -64px;
}

.fda-slider__arrow--next {
  right: -64px;
}

@media screen and (min-width: 641px) and (max-width: 1339px) {
  .fda-slider.is-scrollable {
    padding: 0 56px;
  }

  .fda-slider__arrow--prev {
    left: 0;
  }

  .fda-slider__arrow--next {
    right: 0;
  }
}

@media screen and (max-width: 640px) {
  .fda-slider__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: var(--space-item);
  }

  .fda-slider__arrow {
    position: static;
    flex: 0 0 44px;
    transform: none;
  }

  .fda-slider__counter {
    display: block;
    min-width: 64px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fda-slider__track,
  .reviews__track {
    scroll-behavior: auto;
  }
}

/* Отзывы: ряд навигации без скрипта или когда все отзывы на экране —
   скрыт (у .reviews__nav свой display: flex, он перебивал бы hidden). */
.reviews__nav[hidden] {
  display: none;
}

/* Без скрипта у отзывов тоже видна тонкая полоса прокрутки — иначе мышью
   без трекпада ленту не прокрутить. */
.reviews__body:not(.is-enhanced) .reviews__track {
  scrollbar-width: thin;
}