/* ===============================================
   СТРАНИЦА «ЧАСТЫЕ ВОПРОСЫ»
   Файл: faq.css — подключается только из faq.php, после theme.css
   и main_css.css.

   Цветов и шрифтов здесь нет: всё через переменные темы (--th-*) из
   theme.css. Свои переменные у файла только три — --fq-rx, --fq-ry и
   --fq-tz: это углы наклона карточки под курсором и её подъём при
   раскрытии. Они складываются в один transform, потому что два разных
   transform на одном элементе стирают друг друга.

   Все классы начинаются с fq-, чтобы ничего не пересеклось с main_css.css.
   Шапки здесь нет: она у страницы вопросов такая же, как у остальных, и
   живёт в main_css.css под именем .page-hero.
   =============================================== */

.fq-main {
    font-weight: var(--th-body-weight);
}

.fq-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== СПИСОК ВОПРОСОВ ===== */
.fq-list { padding: 80px 0 40px; }

.fq-group { margin-bottom: 64px; }

.fq-group__title {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--th-font-head);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: var(--th-head-weight);
    letter-spacing: calc(var(--th-track) + 1px);
    text-transform: var(--th-case);
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--th-line);
}
.fq-group__num {
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--th-accent-soft);
}

.fq-cards {
    display: grid;
    gap: 14px;
    /* Точка схода для наклона карточек: без перспективы у родителя
       поворот выглядит плоским скосом, а не объёмом */
    perspective: 1200px;
}

.fq-card {
    background: var(--th-surface-2);
    border: 1px solid var(--th-line);
    border-radius: 4px;
    transform-style: preserve-3d;
    /* Наклон под курсором и подъём при раскрытии складываются в один
       transform через переменные — иначе одно состояние стирало бы другое */
    transform: rotateX(var(--fq-rx, 0deg)) rotateY(var(--fq-ry, 0deg)) translateZ(var(--fq-tz, 0px));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                background 0.45s ease;
}
.fq-card:hover { box-shadow: 0 14px 30px var(--th-shadow); }
.fq-card.is-open {
    border-color: var(--th-line-strong);
    box-shadow: 0 24px 48px var(--th-shadow-deep);
    --fq-tz: 28px;
}

.fq-card__heading { margin: 0; font-weight: inherit; }

.fq-card__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    /* 22 + 22 + строка ~26 = комфортно больше 44px по высоте */
    padding: 22px 24px;
    background: none;
    border: 0;
    color: inherit;
    font-family: var(--th-font-head);
    font-size: clamp(17px, 1.9vw, 19px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: calc(var(--th-track) * 0.2);
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}
.fq-card__trigger:hover { color: var(--th-accent-soft); }
.fq-card__trigger:focus-visible {
    outline: 2px solid var(--th-line-strong);
    outline-offset: -2px;
    border-radius: 4px;
}

.fq-card__q { flex: 1; }

/* Плюс превращается в минус поворотом — знак и сам показывает, что делает */
.fq-card__sign {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--th-line);
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.fq-card__sign svg { width: 16px; height: 16px; }
.fq-card.is-open .fq-card__sign {
    transform: rotate(135deg);
    background: var(--th-accent);
    border-color: var(--th-accent);
    color: var(--th-on-accent);
}

/* Раскрытие: grid-строка едет от 0fr к 1fr — высота анимируется
   без замеров в JS и без скачка при смене ширины экрана */
.fq-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fq-card.is-open .fq-card__panel { grid-template-rows: 1fr; }

.fq-card__panel-inner {
    overflow: hidden;
    /* Пока свёрнуто — прячем и от программ чтения экрана */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.45s, opacity 0.3s ease;
}
.fq-card.is-open .fq-card__panel-inner {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.4s ease 0.12s;
}
.fq-card__panel-inner p {
    padding: 0 24px 24px;
    max-width: 68ch;
    font-family: var(--th-font-body);
    font-size: 16.5px;
    font-weight: var(--th-body-weight);
    line-height: 1.75;
    color: var(--th-ink-soft);
}
/* Абзацы внутри ответа: первый уже отбит паддингом сверху, между
   остальными нужен воздух, иначе ответ читается сплошной простынёй. */
.fq-card__panel-inner p + p {
    padding-top: 0;
    margin-top: -8px;
}

/* ===== ЗАВЕРШАЮЩИЙ БЛОК ===== */
.fq-cta {
    padding: 90px 0 110px;
    text-align: center;
    background: var(--th-surface);
    border-top: 1px solid var(--th-line);
}
.fq-cta__title {
    font-family: var(--th-font-head);
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: var(--th-head-weight);
    letter-spacing: var(--th-track);
    text-transform: var(--th-case);
    margin-bottom: 14px;
    text-wrap: balance;
}
.fq-cta__lead {
    color: var(--th-ink-soft);
    font-weight: 300;
    margin-bottom: 32px;
}
.fq-cta__btn {
    display: inline-block;
    min-height: 48px;
    padding: 15px 42px;
    background: var(--th-accent);
    color: var(--th-on-accent);
    text-decoration: none;
    font-family: var(--th-font-head);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.fq-cta__btn:hover {
    background: var(--th-accent-soft);
    transform: translateY(-2px);
}

/* ===== ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ===== */
.fq-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fq-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== ПЛАНШЕТЫ И ТЕЛЕФОНЫ ===== */
@media (max-width: 768px) {
    .fq-container { padding: 0 20px; }
    .fq-list { padding-top: 56px; }
    .fq-group { margin-bottom: 48px; }
    .fq-card__trigger { padding: 20px 18px; gap: 14px; }
    .fq-card__panel-inner p { padding: 0 18px 20px; }

    /* На телефоне наклон карточки только мешает: палец её и так закрывает */
    .fq-card.is-open { --fq-tz: 0px; --fq-rx: 0deg; --fq-ry: 0deg; }
}

/* ===== УВАЖЕНИЕ К НАСТРОЙКЕ «МЕНЬШЕ ДВИЖЕНИЯ» ===== */
@media (prefers-reduced-motion: reduce) {
    .faq-page *,
    .faq-page *::before,
    .faq-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fq-reveal { opacity: 1; transform: none; }
    .fq-card.is-open { --fq-tz: 0px; --fq-rx: 0deg; --fq-ry: 0deg; }
    /* Панель всё равно должна открываться — иначе ответ не прочитать */
    .fq-card.is-open .fq-card__panel { grid-template-rows: 1fr; }
}