/*
 * Лента: точки и стрелки.
 *
 * Общий на всю страницу компонент. Сама прокрутка остаётся нативной
 * (жест, колесо, зажатый курсор), здесь только управление поверх неё.
 *
 * Стрелка — не картинка, а маска: цвет берётся из currentColor, поэтому
 * одна и та же иконка работает и на фотографии, и на белом поле. Раньше
 * в проекте лежали два SVG с зашитой белой заливкой, из-за чего на светлой
 * подложке стрелки пропадали, а «назад» и «вперёд» смотрели в одну сторону.
 *
 * Плашки под стрелкой нет — так в макете; поверх фотографии уголок
 * утолщён обводкой, чтобы читался на кадре.
 */

.frk-slider {
  position: relative;

  /*
   * Без нулевого минимума лента считает свою ширину по самому длинному
   * слайду и растягивает всю секцию за край экрана: ширина слайда задана
   * в процентах от контейнера, и без ограничения выходит замкнутый круг.
   */
  min-width: 0;
}

.frk-slider__track {
  display: flex;
  min-width: 0;
  scroll-snap-type: x mandatory;
  border-radius: var(--frk-radius);
}

.frk-slider__controls {
  position: absolute;
  bottom: var(--frk-space-md);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--frk-space-md);
}

.frk-slider__dots {
  display: flex;
  gap: var(--frk-space-xs);
}

/*
 * Текущая точка залита, остальные — только обводка тем же цветом
 * (2396:1865, 2396:1883). Заливка — отдельный слой, чтобы её появление
 * анимировалось прозрачностью, а не цветом фона.
 */
.frk-slider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border: 0.5px solid currentColor;
  border-radius: 50%;
}

.frk-slider__dot::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-slider__dot[aria-current="true"]::before {
  opacity: 1;
}

/*
 * Стрелки — управление для мыши/трекпада. На тач-устройстве лента листается
 * жестом, стрелки там лишние (и нажать на них пальцем неудобно) — скрыты
 * по умолчанию, показываются только там, где есть наведение точным
 * указателем. Тот же приём, что у кнопки «В корзину» в product-card.css.
 */
.frk-slider__arrows {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .frk-slider__arrows {
    display: flex;
    gap: 2px;
  }
}

/* Лента целиком в кадре — листать нечего, управление прячет slider.js */
.frk-slider__controls[hidden],
.frk-slider__arrows[hidden] {
  display: none;
}

/* --- Стрелка -------------------------------------------------------------- */

.frk-slider__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

/*
 * Стрелка — тонкий уголок из макета (2396:1896), нарисованный дважды: в покое
 * копии лежат одна на другой, при наведении вторая выезжает на полширины
 * уголка, и стрелка становится ёлочкой «»».
 */
.frk-slider__chevron {
  position: relative;
  width: 30px;
  height: 30px;
}

.frk-slider__chevron::before,
.frk-slider__chevron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url(../images/icons/chevron-thin.svg) center / contain no-repeat;
  mask: url(../images/icons/chevron-thin.svg) center / contain no-repeat;
  transition: transform var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-slider__arrow:hover:not([disabled]) .frk-slider__chevron::after,
.frk-slider__arrow:focus-visible .frk-slider__chevron::after {
  transform: translateX(17%);
}

@media (prefers-reduced-motion: reduce) {
  .frk-slider__chevron::after,
  .frk-slider__dot::before,
  .frk-slider__arrow {
    transition: none;
  }
}

/* «Назад» — та же иконка, отражённая по горизонтали */
.frk-slider__arrow--prev .frk-slider__chevron {
  transform: scaleX(-1);
}

.frk-slider__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

/*
 * Поверх фотографии — белый уголок без плашки, с обводкой в 1px: так в макете
 * «Истории, которую носят» (2396:1862). Заказчик выбрал вид макета вместо
 * прежней тёмной плашки с кольцом.
 */
.frk-slider--on-photo .frk-slider__arrow,
.frk-slider__arrow--on-photo {
  color: var(--frk-color-paper);
}

.frk-slider--on-photo .frk-slider__chevron::before,
.frk-slider--on-photo .frk-slider__chevron::after,
.frk-slider__arrow--on-photo .frk-slider__chevron::before,
.frk-slider__arrow--on-photo .frk-slider__chevron::after {
  -webkit-mask-image: url(../images/icons/chevron-photo.svg);
  mask-image: url(../images/icons/chevron-photo.svg);
}

/* На светлом поле — тёмный тонкий уголок, тоже без плашки (2396:1887) */
.frk-slider--on-light .frk-slider__arrow {
  color: var(--frk-color-ink);
}

/*
 * Стрелки у заголовка секции («Разделяют ценности», «Выбор в деталях»,
 * «Журнал») — без плашки, голая стрелка цветом текста: в макете
 * (node 2396:1892) это просто иконка 48×48 без подложки. Стоят на обычном
 * фоне страницы, а не на фотографии, поэтому подложка выше здесь не нужна.
 */
.frk-slider__arrow--light {
  color: var(--frk-color-ink);
}

.frk-slider__arrow--light:hover:not([disabled]) {
  opacity: 0.6;
}

/*
 * Точки наследуют цвет от контекста ленты. Поверх фотографии они белые,
 * и на светлом кадре пропадали — поэтому вокруг каждой лежит тёмный ореол.
 */
.frk-slider--on-photo .frk-slider__dots {
  color: var(--frk-color-paper);
  filter: drop-shadow(0 0 2px rgb(19 18 18 / 75%));
}

.frk-slider--on-light .frk-slider__dots {
  color: var(--frk-color-ink);
}

/*
 * Стрелки в заголовке секции крупнее тех, что лежат на кадре: в макете
 * 48 против 40.
 */
.frk-slider__arrows--head .frk-slider__arrow {
  width: 48px;
  height: 48px;
}

.frk-slider__arrows--head .frk-slider__chevron {
  width: 36px;
  height: 36px;
}