/*
 * Промо-карточки первого экрана - узлы 0:325 и 0:329 мобильного макета 0:6
 * (16.09.2026). Картинка 170×100 со скруглением и стрелкой в правом нижнем
 * углу, под ней подпись в три-четыре строки.
 *
 * 🛑 Блок только мобильный: в десктопном макете его нет вовсе, поэтому
 * по умолчанию он скрыт и показывается лишь до 999px - иначе он влез бы в
 * правую колонку десктопа, где его никто не рисовал.
 *
 * Локальный сброс обязателен: блок живёт и на страницах старой вёрстки, где
 * общий base.css не подключён (то же правило, что у остальных блоков).
 */

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

.it-promo {
    display: none;
}

@media (max-width: 999px) {
    .it-promo {
        display: flex;
        flex-direction: column;
        gap: var(--sp-20);
        min-width: 0;
    }

    .it-promo__item {
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);
    }

    .it-promo__title {
        color: var(--c-text-black);
        font-family: var(--font-main);
        font-size: var(--fs-12);
        font-weight: var(--fw-regular);
        line-height: 1.25;
        text-decoration: none;
    }

    .it-promo__link {
        display: block;
        line-height: 0;
    }

    .it-promo__media {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--r-4);
        line-height: 0;
    }

    .it-promo__media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 17 / 10;
        object-fit: cover;
    }

    /* Маленький слайдер внутри карточки: в разметке лежат все материалы
       раздела, показан активный. Переключает `controllers/promo.js`. */
    .it-promo__link,
    .it-promo__title {
        display: none;
    }

    .it-promo__link.is-active {
        display: block;
    }

    .it-promo__title.is-active {
        display: block;
    }

    /* Заголовки материалов разной длины, и без запаса высоты карточка (а с
       ней и вся страница карусели) прыгала бы при каждом перелистывании.
       Четыре строки - столько же, сколько отведено под подпись в макете. */
    .it-promo__captions {
        min-height: 60px;
    }

    /* Стрелка: по узлу 0:325 она стоит по ЦЕНТРУ картинки по вертикали и в
       36px от правого края (картинка 170, стрелка 15, левый край 119). Раньше
       была в правом нижнем углу - расхождение с макетом.

       Цвет приходит из данных карточки (`--promo-arrow`): в макете он у каждой
       свой, подобранный под фотографию. Белый - запасной вариант, если у новой
       карточки цвет не указан. */
    .it-promo__next {
        position: absolute;
        top: 50%;
        /* Стрелка 15px и центр кнопки 44px: чтобы САМ ЗНАК стоял в 36px от
           края, как в макете, кнопку сдвигаем на её половину. Кнопка крупнее
           знака намеренно - в неё надо попадать пальцем. */
        right: calc(36px - (44px - 15px) / 2);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--promo-arrow, var(--c-white));
        transform: translateY(-50%);
        cursor: pointer;
    }

    .it-promo__arrow {
        display: block;
    }

    .it-promo__item:hover .it-promo__title {
        color: var(--c-accent);
    }
}