/* Страница «Вопросы и ответы» (/faq/).
   Отдельный файл, а НЕ custom.css: у custom.css параметр ?mver= привязан к
   hash_jscss (имя каталога собранных ассетов), менять его нельзя, и правки не
   доезжают до браузеров с закэшированным файлом. Здесь версия ставится по
   времени изменения файла — см. faq/index.php. */

/* ── Шапка страницы ────────────────────────────────────────────────────────
   Общего класса внутренней страницы в проекте нет: .section-title не задаёт
   padding вовсе. Значения свои, с запасом воздуха. */
.faq-page__head { padding: 16rem 0 0; }

.faq-page__head .breadcrumbs,
.faq-page__head .title,
.faq-page__head .faq-page__intro { text-align: center; }

.faq-page__intro { max-width: 68rem; margin: 2.4rem auto 0; }

.faq-page__intro p + p { margin-top: 1.6rem; }

.faq-page__head .title { margin-top: 2.4rem; }

.faq-page__head .breadcrumbs a { color: var(--color-orange-dark); }
.faq-page__head .breadcrumbs a:hover { color: var(--color-orange-primary); }
.faq-page__head .breadcrumbs [aria-current="page"] { color: var(--color-grey-medium); }

/* Размер заголовка НЕ переопределяем. На сайте h1 задан один раз — 10rem, без
   медиазапросов, а масштаб держит плавающий корневой размер: именно поэтому на
   юридических страницах заголовок выглядит крупно и правильно. Своя «мобильная»
   величина делала его мельче остального сайта.
   Единственное, что нужно, — запретить перенос посреди слова: «Вопросы и ответы»
   ломалось как «ВОПРОС / Ы И / ОТВЕТЫ». */
.faq-page__head .title {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

@media (max-width: 767px) {
    .faq-page__head { padding: 11rem 0 0; }
}

/* ── Табы категорий ────────────────────────────────────────────────────────
   Внешний вид НЕ переопределяем: .news__tabs-tab уже задаёт квадратную рамку,
   капс и оранжевую границу активного. Правим только то, что ломается на семи
   табах вместо двух. */
.faq-page__tabs {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.6rem;
    row-gap: 1.2rem;
    margin: 4rem auto 5.6rem;
}

/* Явные стили таба. Штатные .news__tabs-tab заданы в двух вариантах — обычном
   и «иконка-пилюля» для мобильных, и какой из них победит, зависит от порядка
   файлов. Задаём нужный вид прямо: квадратная рамка, как на /news/. */
.faq-page__tabs .news__tabs-tab {
    cursor: pointer;
    width: auto;
    flex: 0 0 auto;
    height: 3.2rem;
    padding: 0 2.8rem;
    background: none;
    border: 1px solid var(--color-beige-primary);
    border-radius: 0;
    color: var(--color-black-primary);
    letter-spacing: .1rem;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 2.4rem;
    white-space: nowrap;
    margin: 0;
    transition: border-color .4s cubic-bezier(.16, 1, .3, 1),
                color .4s cubic-bezier(.16, 1, .3, 1);
}

.faq-page__tabs .news__tabs-tab:hover { border-color: var(--color-orange-primary); }

.faq-page__tabs .news__tabs-tab_active {
    border-color: var(--color-orange-primary);
    color: var(--color-orange-dark);
}

@media (max-width: 700px) {
    /* На мобильных штатный таб превращается в иконку-пилюлю (width:2.2rem,
       прозрачная рамка, текст скрыт) — это для табов с картинкой. У наших
       табов картинки нет, только текст, поэтому возвращаем обычный вид. */
    .faq-page__tabs {
        background: none;
        border-radius: 0;
        padding: 0;
        column-gap: 0.8rem;
        row-gap: 0.8rem;
        margin: 3rem auto 3.6rem;
    }

    .faq-page__tabs .news__tabs-tab { padding: 0 1.6rem; }
}

/* ── Список вопросов ───────────────────────────────────────────────────────
   Штатный .questions — грид на две колонки: список и вводный блок (элемент
   с TYPE=TITLE). Вводного блока у нас нет, вторая колонка пустует и список
   уезжает влево. Схлопываем в одну колонку и центрируем.
   Раскрытие ответа НЕ переопределяем: компонент делает это сам по классу
   `-show` и переменной --height, которую выставляет скрипт шаблона. */
.faq-page__questions .questions {
    display: block;
    max-width: 84rem;
    margin: 0 auto;
}

.faq-page__questions .questions__list { width: 100%; margin-top: 0; }

.faq-page__questions .questions__item-heading { cursor: pointer; }

/* ── Раскрытие ответа ──────────────────────────────────────────────────────
   СВОИХ ПРАВИЛ ЗДЕСЬ НЕТ, и это осознанно. Компонент умеет раскрывать сам:
     .questions__item-body            { opacity: 0; max-height: 0 }
     .questions__item.-show .questions__item-body {
         opacity: 1; max-height: calc(var(--height) + 2.2rem) }
   От нас нужна только переменная --height — её выставляет скрипт шаблона.

   ⚠️ Ранее здесь лежало «страховочное» правило закрытого состояния
   `.faq-page__questions .questions__item .questions__item-body`. У него ТА ЖЕ
   специфичность (0,3,0), что у штатного правила раскрытия, а faq.css грузится
   ПОСЛЕ certificates.css — поэтому побеждало моё, и ответ раскрывался пустым:
   заголовок краснел, стрелка поворачивалась, а тело оставалось схлопнутым.
   Не возвращать. Если понадобится вмешаться — специфичность обязана быть ВЫШЕ
   штатной, а не равной. */

/* Нейтрализация старых правил, застрявших в закэшированном custom.css.
   В ранней версии там лежало `.faq-page__questions .questions__item-content
   { opacity: 0 }`, а раскрывалось оно классом `is-open`, которого нынешний
   шаблон не ставит. У кого custom.css в кэше — тело раскрывается, а текст
   внутри остаётся прозрачным. Сбросить кэш custom.css нечем: его ?mver=
   привязан к hash_jscss, а тот именует каталог ассетов и трогать его нельзя.
   Поэтому перекрываем явно и с большей специфичностью (0,3,0 против 0,2,0). */
.faq-page__questions .questions__item .questions__item-content {
    opacity: 1;
    transform: none;
}

.faq-page__questions .questions__item[hidden] { display: none; }

/* ── Скелетоны на переключении категории ───────────────────────────────────*/
.faq-page__skeletons { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem 0; }

/* Атрибут hidden обязан побеждать: класс с display:flex перебивает браузерное
   [hidden]{display:none}, и скелетоны висят на странице постоянно. */
.faq-page__skeletons[hidden] { display: none; }

.faq-page__skeleton {
    height: 6.4rem;
    border-bottom: 1px solid var(--color-milk-primary);
    background: linear-gradient(90deg,
        var(--color-milk-light) 25%,
        var(--color-milk-medium) 37%,
        var(--color-milk-light) 63%);
    background-size: 400% 100%;
    animation: faqShimmer 1.4s ease-in-out infinite;
}

.faq-page__skeleton:nth-child(2) { width: 94%; }
.faq-page__skeleton:nth-child(3) { width: 98%; }
.faq-page__skeleton:nth-child(4) { width: 90%; }

@keyframes faqShimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* Появление отфильтрованных пунктов лесенкой */
.faq-page__questions .questions__list.is-revealed .questions__item {
    animation: faqReveal .42s cubic-bezier(.23, 1, .32, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(0.8rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-page__skeleton { animation: none; }
    .faq-page__questions .questions__list.is-revealed .questions__item { animation: none; }
}

.faq-page__empty { margin: 3.2rem 0; text-align: center; color: var(--color-grey-medium); }