/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.0-faq.css — страница «Частые вопросы» (/faq/).
 *
 * Стиль = стиль ГЛАВНОЙ. Каждый раздел — двухколоночный блок (.kp-faq-grid:
 * слева .kp-faq-side с .kp-sec-kicker/.kp-sec-title/.kp-sec-bar, справа Q&A).
 * Типографику аккордеона и сетку даёт класс .kp-sec-faq (patch-5.6/5.9) +
 * база main.css:489-501. Здесь — только чередование фона блоков, контраст
 * карточек на тёмном бэнде, plus/minus-глиф тоггла, sticky-чипы и хедер/CTA.
 * Скоуп — body.kp-body .kp-faqp / .kp-faqp-band. Без !important.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Хедер страницы (стиль секции главной) ────────────────────────────────── */
body.kp-body .kp-faqp-hero { padding: 40px 0 14px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-lead {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2, #4a4a4a);
    margin: 18px 0 0;
}

/* ── Sticky-навигация по разделам (чипы-якоря) ────────────────────────────────
 * top = высота липкой шапки .kp-snav-wrap (57px, desktop+mobile); точный офсет
 * кликов считается в JS (header+nav). Чипы — компонент .kp-cat-chip категории.
 */
body.kp-body .kp-faqp-nav {
    position: sticky;
    top: 57px;
    z-index: 40;
    background: var(--paper, #fff);
    border-bottom: 1px solid var(--line, #ececec);
    padding: 12px 0;
}
body.kp-body .kp-faqp-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Блоки разделов: чередование фона ─────────────────────────────────────────
 * .kp-sec даёт padding 80px и белый фон; ужимаем и красим каждый второй в fog.
 * scroll-margin-top — чтобы заголовок не уезжал под sticky-чипы при переходе.
 */
body.kp-body .kp-faqp-band { padding: 56px 0; scroll-margin-top: 130px; }
body.kp-body .kp-faqp-band--alt { background: var(--fog, #f7f7f7); }

/* Контраст карточек аккордеона: на fog-бэнде карточки делаем белыми
 * (иначе fog-карточка на fog-фоне сливается), тоггл-кружок — fog.
 * Открытая карточка остаётся жёлтой на обоих бэндах (выше специфичность). */
body.kp-body .kp-faqp-band--alt .kp-faq-item { background: var(--paper, #fff); }
body.kp-body .kp-faqp-band--alt .kp-faq-item.is-open { background: var(--yellow-soft, #fff7d6); }
body.kp-body .kp-faqp-band--alt .kp-faq-toggle { background: var(--fog, #f7f7f7); }

/* ── Ответ: отступы (база .kp-faq-a без паддинга) ─────────────────────────── */
body.kp-body .kp-faqp .kp-faq-a {
    padding: 0 24px 22px 66px;   /* левый = под текст вопроса, мимо номера */
    margin: 0;
}

/* ── Глиф тоггла — plus → minus, без иконки внутри (база main.css даёт круг) ── */
body.kp-body .kp-faqp .kp-faq-toggle { position: relative; }
body.kp-body .kp-faqp .kp-faq-toggle::before,
body.kp-body .kp-faqp .kp-faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink, #0a0a0a);
    border-radius: 2px;
}
body.kp-body .kp-faqp .kp-faq-toggle::before { width: 12px; height: 2px; }
body.kp-body .kp-faqp .kp-faq-toggle::after  { width: 2px; height: 12px; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::after  { display: none; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::before { background: var(--yellow, #FECE15); }

/* ── Нижний CTA ───────────────────────────────────────────────────────────── */
body.kp-body .kp-faqp-cta { padding: 8px 0 64px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--fog, #f7f7f7);
    border-radius: var(--radius, 16px);
    padding: 32px 36px;
}
body.kp-body .kp-faqp-cta-title { font-size: 24px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 6px 0 8px; }
body.kp-body .kp-faqp-cta-sub   { font-size: 16px; line-height: 1.5; color: var(--ink-2, #4a4a4a); margin: 0; max-width: 46ch; }
body.kp-body .kp-faqp-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-faqp-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    text-decoration: none;
}
body.kp-body .kp-faqp-cta-phone svg { stroke: var(--yellow, #FECE15); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-faqp-nav { padding: 10px 0; }
    /* На узком — горизонтальный скролл чипов вместо переноса в много рядов. */
    body.kp-body .kp-faqp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.kp-body .kp-faqp-chips::-webkit-scrollbar { display: none; }
    body.kp-body .kp-faqp-band { padding: 40px 0; }
    body.kp-body .kp-faqp .kp-faq-a { padding: 0 16px 18px 16px; }
    body.kp-body .kp-faqp-cta-inner { padding: 24px 20px; }
}