/* ===================================================================
   FAQ внизу сторінки (реєстр «FAQ» → Partials/Faq/_PageFaq.cshtml).

   Файл підключається глобально в _Layout, бо блок рендериться на кожній
   сторінці одним місцем — одразу після SEO-тексту. Тому:
     • усі класи в неймспейсі .faq / .faq__*, щоб нічого не перетнути;
     • токени — з tokens.generated.css (ДС) та var-companies.css; обидва
       _Layout підключає на кожній сторінці, тому запасних значень у
       var(…) тут немає.

   Раніше ці правила лежали двічі: у company-overview.css (лендінги каталогу) і
   в company-details/details/faq.css (деталь компанії/ФОП) — кожен файл
   підключався лише на своїх сторінках. Після переїзду рендера в _Layout
   власником стилю став цей файл, а ті дві копії прибрані.
   =================================================================== */

.faq {
    margin: var(--container-pad);
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--sp-40);
    padding: var(--sp-40);
    border-radius: var(--r-2xl);
    background: linear-gradient(135deg, #EFEAFF 0%, #F7F5FF 40%, #FFFFFF 70%);
    border: 1px solid var(--color-primary-200);
}

.faq__intro-icon {
    color: var(--text-active);
    display: inline-flex;
    margin-bottom: var(--sp-16);
}

.faq__title {
    margin: 0 0 var(--sp-16);
    color: var(--text-default);
    font-size: 29px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.faq__lead {
    margin: 0;
    color: var(--text-subtle);
    font-size: 14px;
    line-height: 1.5;
}

.faq__list {
    display: flex;
    flex-direction: column;
}

.faq__item {
    border-bottom: 1px solid var(--divider);
}

.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-20) 0;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-default);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.faq__q svg {
    flex: none;
    color: var(--icon-subtle);
    transition: transform 0.2s ease;
}

.faq__item.is-open .faq__q svg {
    transform: rotate(180deg);
    color: var(--text-active);
}

/* Анімація розкриття — grid-template-rows 0fr ↔ 1fr (керує company-overview.js
   через [data-faq], клас .is-open на .faq__item). */
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.faq__item.is-open .faq__a {
    grid-template-rows: 1fr;
}

.faq__a > div {
    overflow: hidden;
}

.faq__a p {
    margin: 0;
    padding-bottom: var(--sp-20);
    color: var(--text-subtle);
    font-size: 14px;
    line-height: 1.6;
}

/* ≤1100 — межа, на якій дві колонки перестають вміщатися (та сама, на якій
   .two-col на деталі схлопується в одну). */
@media (max-width: 1100px) {
    .faq {
        display: block;
        padding: var(--sp-20);
    }

    .faq__list {
        margin-top: var(--sp-24);
    }
}

@media (max-width: 1024px) {
    .faq {
        margin: var(--container-pad-1024);
    }
}

@media (max-width: 768px) {
    .faq {
        margin: var(--container-pad-768);
    }
}