/* ==========================================================================
   Листалка для телефона: общая механика для «Цифровизации», «Что нас отличает»
   и карточек площадок. Цвет стрелок и точек наследуется от секции
   (currentColor), поэтому один и тот же блок управления работает и на светлом,
   и на тёмном фоне.
   ========================================================================== */

@media (max-width: 680px) {
  [data-slider] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* карточки выходят в поля экрана, но первая встаёт по линии текста */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [data-slider]::-webkit-scrollbar { display: none; }

  [data-slider] > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .slider-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .slider-nav__arrow {
    flex: none;
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.55;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  /* Шеврон рисуем рамкой — не нужен отдельный файл, и цвет наследуется */
  .slider-nav__arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5625rem;
    height: 0.5625rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .slider-nav__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
  .slider-nav__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }

  .slider-nav__arrow:disabled { opacity: 0.2; }

  /* Счётчик вместо точек, когда карточек больше шести */
  .slider-nav__count {
    flex: 1 1 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    line-height: 2.75rem;
    opacity: 0.6;
  }

  .slider-nav__dots {
    display: flex;
    flex: 1 1 auto;
    gap: 0.375rem;
    justify-content: center;
  }

  /* Видимая точка маленькая, но сама кнопка высотой в палец */
  .slider-nav__dot {
    position: relative;
    width: 1.5rem;
    height: 2.75rem;
  }

  .slider-nav__dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    margin: -0.21875rem 0 0 -0.21875rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  .slider-nav__dot[aria-current='true']::before {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* Выше телефона управления нет вовсе: блоки возвращаются к своим сеткам */
@media (min-width: 681px) {
  .slider-nav { display: none; }
}