/* ============================================================
 * Profmed swipers — стили, которые нужны нашему vanilla-инициализатору.
 * Базовая разметка .swiper / .swiper-slide / .swiper-wrapper стилизуется
 * в core-CSS Swiper'а (подключается рядом). Здесь — только кастомная
 * навигация .slider-nav профмед-разметки.
 * ============================================================ */

/* Защита от «вылетающих» слайдов: если CSS Swiper'а грузится частично
 * или ещё не отработал на момент рендера, соседние slide'ы видны
 * справа от hero. Принудительный overflow гарантирует, что вылета
 * не будет ни при каком состоянии инициализации. */
.swiper {
    overflow: hidden !important;
    position: relative;
    /* contain:paint создаёт новый контекст отрисовки — всё что выходит
     * за границы элемента обрезается на уровне GPU-рендеринга,
     * это надёжнее чем overflow:hidden когда базовый CSS использует !important */
    contain: paint;
}
/* Доп. подстраховка глобально — горизонтальный скролл всей страницы не должен
 * появляться (иногда вылазит из-за длинных пунктов меню или сторонних виджетов). */
html, body { overflow-x: hidden; }

/* Секция intro (hero-слайдер) — явное ограничение ширины и отсечение.
 * Перекрывает любые правила базового CSS Битрикса по ширине контейнера. */
section.intro,
.intro { max-width: 100vw; overflow: hidden; }

.slider-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.slider-nav__arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 14px 6px;          /* визуально иконка маленькая, тап-таргет 44×44 */
    cursor: pointer;
    border-radius: 8px;
    transition: opacity .15s ease, background-color .15s ease, transform .1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Сброс стилей <button> */
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slider-nav__arrow path { transition: fill .15s ease; }

.slider-nav__arrow:hover {
    background-color: rgba(30, 135, 250, .08);
}
.slider-nav__arrow:active {
    transform: translateY(1px);
}
.slider-nav__arrow:focus { outline: none; }
.slider-nav__arrow:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 2px;
}

/* Состояние "стрелка ведёт в пустоту" — например, мы уже на первом слайде.
   Swiper навешивает .swiper-button-disabled, при этом allowSlideNext/Prev
   становятся false. Делаем визуально неактивно. */
.slider-nav__arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* Фракционная пагинация N / M */
.slider-nav__pagination {
    display: inline-flex;
    align-items: baseline;
    min-width: 64px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #102e5d;
    font-variant-numeric: tabular-nums;  /* стабильная ширина цифр при перелистывании */
    user-select: none;
}
.slider-nav__pagination .current {
    color: #1e87fa;
}
.slider-nav__pagination .total {
    color: #8a99b3;
}
.slider-nav__sep {
    margin: 0 4px;
    color: #c5cee0;
}

/* Если в слайдере один слайд / всё влезает — Swiper повесит
   .swiper-watch-overflow (если опция включена) и навигация прячется. */
.swiper.swiper-watch-overflow ~ .slider-nav,
.swiper.swiper-watch-overflow .slider-nav {
    display: none;
}

/* На мобильном кастомная nav иногда не нужна — некоторые слайдеры
   в оригинале управляются свайпом. Скрываем nav.desktop на узких экранах
   только если это явно desktop-only вариант. */
.slider-nav.desktop {
    display: flex; /* фоллбэк, если профмед-CSS не подгрузился */
}
@media (max-width: 767px) {
    .slider-nav.desktop {
        display: none;
    }
}

/* Reduced motion — отключаем анимации стрелок */
@media (prefers-reduced-motion: reduce) {
    .slider-nav__arrow,
    .slider-nav__arrow path {
        transition: none !important;
    }
    .slider-nav__arrow:active { transform: none !important; }
}