/*
 * Карусель материалов (24.09.2026) - блок `articles_carousel.html.twig`.
 *
 * Вид взят с примера Заказчика (главная azan.info). Первая версия (карточка
 * почти во весь экран, видно только край соседней) Заказчику не подошла -
 * попросил слайдер, где на мобильной сразу видно ДВЕ полные карточки и кусок
 * третьей (уточнение 25.09.2026, скриншот боевого сайта: «2 кадра влезают,
 * один только часть»). Внутри ячейки лежит общая карточка сайта (`.it-card`),
 * её оформление здесь не трогаем - только ширина ячейки и прокрутка.
 *
 * Локальный сброс обязателен: блок живёт на страницах старой вёрстки, где
 * общий base.css не подключён.
 */

.it-carousel,
.it-carousel * {
    box-sizing: border-box;
}

.it-carousel {
    font-family: var(--font-main);
}

.it-carousel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
}

.it-carousel__title {
    margin: 0;
    color: var(--c-text);
    font-size: var(--fs-18);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* Ссылка «Все» - тот же приём, что у «Вопрос-ответ» и «Историй»:
   стрелка углом из border, без отдельной картинки. */
.it-carousel__all {
    flex-shrink: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-14);
    text-decoration: none;
    white-space: nowrap;
}

.it-carousel__all::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--sp-8);
    border-top: 1px solid currentcolor;
    border-right: 1px solid currentcolor;
    content: '';
    transform: rotate(45deg) translate(-1px, 1px);
}

.it-carousel__viewport {
    position: relative;
}

.it-carousel__list {
    display: flex;
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Полосу прокрутки прячем: под карточками она выглядит как часть блока,
       а листание и так понятно по видимому краю третьей карточки. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.it-carousel__list::-webkit-scrollbar {
    display: none;
}

/* 🛑 Ширина ячейки подобрана так, чтобы влезали ДВЕ полные карточки плюс
   кусок третьей (просьба Заказчика 25.09.2026, скриншот с боевого сайта) -
   не «почти во весь экран» (было `calc(100% - 56px)`, влезала одна).
   `50% - 36px`: третья карточка начинается на отметке `2 * (ширина + отступ)`,
   35px от неё оставляем видимыми ради подсказки «тут можно листать» (отступ
   между карточками 16px, дважды - до второй и до третьей карточки):
   width = (100% - 2*16px - 40px) / 2 = 50% - 36px.

   🛑 Формула ОДНА на все ширины, фиксированного `260px` на десктопе больше
   нет. У блока разные контейнеры - узкая боковая колонка (~380px) и широкая
   страница сонника без правой колонки (~855px), и с фиксированной шириной
   в узкой колонке влезала одна карточка вместо двух (тот же скрин 25.09.2026,
   но уже с десктопа: «Самое читаемое» показывало 1 кадр и кусок второго).
   Формула в процентах решает это для любого контейнера сама. */
.it-carousel__item {
    flex: 0 0 auto;
    width: calc(50% - 36px);
    scroll-snap-align: start;
}

/* ---------- Стрелки (появляются после запуска скрипта) ---------- */

.it-carousel__nav {
    display: none;
}

@media (min-width: 1000px) {
    /* По центру картинки, а не всей карточки: высота карточки зависит от
       длины заголовка, и по её центру кнопка попадала бы на текст. Ширина
       ячейки теперь своя у каждого контейнера (`calc(50% - 36px)`), поэтому
       и высота картинки (16:9) своя - фиксированного числа тут больше нет,
       половину высоты первой картинки считает и подставляет переменной
       `--nav-top` скрипт (`articles-carousel.js`). 73px - запасное значение
       на случай, если скрипт почему-то не успел посчитать. */
    .it-carousel.is-ready .it-carousel__nav {
        position: absolute;
        top: var(--nav-top, 73px);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--c-line);
        border-radius: 50%;
        background: var(--c-white);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .it-carousel.is-ready .it-carousel__nav:hover {
        border-color: var(--c-accent);
    }

    /* Доехали до края - кнопка не пропадает, а гаснет: пропадающая кнопка
       дёргает соседнюю карточку под курсором. */
    .it-carousel.is-ready .it-carousel__nav[disabled] {
        opacity: .35;
        cursor: default;
    }

    .it-carousel__nav--prev {
        left: -18px;
    }

    .it-carousel__nav--next {
        right: -18px;
    }

    /* Сама стрелка - угол из двух границ, как у ссылки «Все». */
    .it-carousel.is-ready .it-carousel__nav::before {
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--c-text);
        border-right: 2px solid var(--c-text);
        content: '';
    }

    .it-carousel__nav--prev::before {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .it-carousel__nav--next::before {
        transform: rotate(45deg) translate(-1px, 1px);
    }
}