/*
 * Блок «Вопрос-ответ» - тёмная карточка со свежими и популярными вопросами.
 *
 * Снято с макета Figma (Fhm9rBfdGGsbSq9FIakt2v, узел 0:2844) 18.08.2026:
 *   подложка #1d1d1d, радиус 6, 422×420
 *   заголовок «Вопрос-ответ» 20px DemiBold белый
 *   «Все вопросы» справа - 14px #6f6f6f со стрелкой
 *   плашка «НОВЫЕ» - рамка белая, радиус 4, текст 10px с разрядкой 2px
 *   плашка «ПОПУЛЯРНЫЕ» - рамка и текст #ffe3b0, со звездой
 *   вопросы 16px белым, между ними линии; номер вопроса серый (#6f6f6f)
 *   в новых и песочный (#ffe3b0) в популярных
 *
 * ⚠️ Номеров вопросов («187.») в данных нет - в базе заголовки без нумерации.
 * Разметка под номер готова (.it-qa__num), выводится только если передан.
 *
 * 🛑 Локальный сброс обязателен: блок живёт на странице старой вёрстки.
 */

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

.it-qa {
    padding: var(--sp-15) var(--sp-20);
    border-radius: var(--r-6);
    background: var(--c-text);
    color: var(--c-white);
    font-family: var(--font-main);
}

/* ---------- Шапка ---------- */

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

.it-qa__title {
    margin: 0;
    color: var(--c-white);
    font-size: var(--fs-qa-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.it-qa__all {
    flex-shrink: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-qa-all);
    text-decoration: none;
    white-space: nowrap;
}

/* Стрелка у ссылки - уголком, чтобы не тащить картинку */
.it-qa__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-qa__all:hover {
    color: var(--c-white);
}

/* ---------- Плашки «НОВЫЕ» и «ПОПУЛЯРНЫЕ» ---------- */

/* Размеры плашек - из макета: 57×19 «НОВЫЕ», 116×19 «ПОПУЛЯРНЫЕ» (0:2861,
   0:2864). Высота задана явно, ширину даёт сам текст с разрядкой. */
.it-qa__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    height: 19px;
    margin-bottom: var(--sp-16);
    padding: 0 var(--sp-5);
    border: 1px solid currentcolor;
    border-radius: var(--r-4);
    color: var(--c-white);
    font-size: var(--fs-qa-label);
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
}

.it-qa__label--popular {
    color: var(--c-sand-bg);
}

/* Звезда у «ПОПУЛЯРНЫЕ» - как в макете */
.it-qa__star {
    font-size: 9px;
    line-height: 1;
}

/* ---------- Список вопросов ---------- */

/* До плашки «ПОПУЛЯРНЫЕ» в макете 27px от последнего вопроса: 16 даёт нижнее
   поле самого вопроса, остальное - этот отступ. */
.it-qa__list {
    margin: 0 0 var(--sp-12);
    padding: 0;
    list-style: none;
}

.it-qa__list:last-child {
    margin-bottom: 0;
}

.it-qa__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.it-qa__list > li::before {
    content: none;
}

.it-qa__list > li:last-child {
    border-bottom: 0;
}

/* Шаг между вопросами в макете 52px: строка 16px и поля по 16px сверху и снизу. */
.it-qa__item {
    display: block;
    padding: var(--sp-qa-item) 0;
    color: var(--c-white);
    font-size: var(--fs-qa-item);
    line-height: 1.3;
    text-decoration: none;
}

.it-qa__list > li:first-child .it-qa__item {
    padding-top: 0;
}

.it-qa__item:hover {
    color: var(--c-accent-amber);
}

.it-qa__num {
    color: var(--c-text-muted);
}

.it-qa__list--popular .it-qa__num {
    color: var(--c-sand-bg);
}

/* 🛑 Десктопного блока здесь больше нет: все кегли блока стали плавными
   (--fs-qa-*), ступенек на пороге десктопа не осталось. */

/* Отбивка блока от ленты над ним. Раньше стояла инлайном в шаблоне главной -
   вынесена в класс 20.08.2026: на мобильной расстояния между блоками задаёт
   общий gap раскладки, а инлайновый margin перебить нельзя ничем, кроме
   !important. */
.it-qa-wrap {
    margin-top: var(--sp-30);
}

/*
 * Мобильная: блок во всю ширину экрана (макет 0:107, 20.08.2026).
 *
 * В мобильном макете тёмная подложка идёт от края до края (x=0, ширина 390) и
 * без скругления - проверено по самому кадру, угловые пиксели залиты #1d1d1d.
 * Страница при этом лежит в `.container` с полями 20px, поэтому блок выводится
 * за них отрицательными полями ровно на ширину поля контейнера.
 *
 * 🛑 Через `100vw` так не растягивать: там, где есть полоса прокрутки, `100vw`
 * шире видимой области, и блок сам создаст горизонтальную прокрутку.
 *
 * Внутренние поля в макете 18px, здесь остаются 20px (--sp-20) - разница в
 * 2px не стоит своего токена, а текст встаёт по той же линии, что у соседних
 * блоков колонки.
 */
@media (max-width: 999px) {
    .it-qa-wrap {
        margin-right: calc(-1 * var(--container-pad));
        margin-left: calc(-1 * var(--container-pad));
    }

    .it-qa {
        border-radius: 0;
    }
}