/* ===========================================
   FAQ — нативный <details>, без JS
   =========================================== */

.faq {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface-lowest);
}

.faq__item + .faq__item {
    border-top: 1px solid var(--frame-border);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary-container);
    transition: color var(--transition), background var(--transition);
}

/* Убираем дефолтный треугольник в Safari/Chrome — у нас своя стрелка */
.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover {
    color: var(--color-secondary);
    background: var(--color-surface-low);
}

.faq__chevron {
    width: 14px;
    height: 9px;
    flex: none;
    transition: transform var(--transition);
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__a {
    padding: 0 28px 24px;
    max-width: 62em;
}

@media (max-width: 599px) {
    .faq__q {
        padding: 18px 20px;
        font-size: 18px;
        gap: 16px;
    }

    .faq__a {
        padding: 0 20px 20px;
    }
}