/* ============================================================================
 * FAQ — общий компонент аккордеона (.faq-section / .faq-item.active).
 *
 * Канонический паттерн для всех страниц: /subscriptions/, /webinar-package/,
 * /test-drive/, /corporate/ и любых будущих страниц с FAQ. Подключается
 * глобально (см. inc/enqueue.php → dk-faq).
 *
 * Разметка ожидается:
 *   <section class="faq-section">
 *     <div class="faq-accordion">
 *       <div class="faq-item active">           ← первый по умолчанию открыт
 *         <button class="faq-question" type="button" aria-expanded="true">
 *           <h5>Вопрос</h5>
 *           <img class="faq-arrow" src="…/FAQ_Arrow.svg" alt="" width="25" height="14">
 *         </button>
 *         <div class="faq-answer">
 *           <div class="faq-answer-content">
 *             <p class="text-p3">Ответ</p>
 *           </div>
 *         </div>
 *       </div>
 *       <div class="faq-item">…</div>
 *     </div>
 *   </section>
 *
 * Toggle поведение (см. assets/js/faq.js):
 *   - клик по .faq-question переключает .active на родительском .faq-item
 *   - aria-expanded обновляется параллельно
 *   - если ни один .faq-item не имеет .active при init — JS откроет первый
 *
 * Native <details>-вариант (single-mk_event, single article) — отдельный
 * компонент в dk-theme.css (.faq-item[open]), не пересекается с этим.
 * ========================================================================== */

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--color-white);
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    width: 100%;
    padding: 1.5rem 2rem;
    background: none;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    min-height: 64px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    position: relative;
    z-index: 1;
}

.faq-question h5 {
    margin: 0;
    color: var(--color-text-main);
}

.faq-arrow {
    width: 25px;
    height: 14px;
    flex-shrink: 0;
    transform: rotate(0deg);            /* в закрытом состоянии — вниз */
    transition: transform 0.3s ease;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);          /* в раскрытом — вверх */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;                 /* запас для длинных ответов */
}

.faq-answer-content {
    padding: 0 2rem 1.5rem;
}

.faq-answer-content p,
.faq-answer-content .text-p3,
.faq-answer-content > div {
    margin: 0;
    color: var(--color-text-secondary);
}


/* === АДАПТИВ FAQ ============================================================ */

@media screen and (max-width: 1024px) {
    .faq-accordion {
        position: relative;
        z-index: 10;                     /* над декоративными слоями */
    }
    .faq-item,
    .faq-question {
        position: relative;
        z-index: 10;
    }
}

@media screen and (max-width: 768px) {
    .faq-accordion { gap: 0.75rem; }
    .faq-item       { border-radius: 24px; }
    .faq-question   { padding: 1.25rem 1.5rem; min-height: 56px; }
    .faq-answer-content { padding: 0 1.5rem 1.25rem; }
    .faq-arrow      { width: 20px; height: 12px; }
}

@media screen and (max-width: 480px) {
    .faq-item       { border-radius: 16px; }
    .faq-question   { padding: 1rem 1.25rem; gap: 0.75rem; min-height: 52px; }
    .faq-answer-content { padding: 0 1.25rem 1rem; }
    .faq-arrow      { width: 18px; height: 10px; }
}