.faq {}


.faq__list {}

.faq__item {
    border-top: 1px solid var(--list-item-marker);
    gap: 0;
    transition: all 0.3s ease;
}

.faq__item.is-active {
    gap: .9rem;
    padding-bottom: var(--space-5);
}

.faq__question {
    padding: var(--space-5) 0;
    width: 100%;
    border: none;
    background: none;
    display: flex;
    flex-direction: row-reverse;
    text-align: start;
    justify-content: start;
    align-items: center;
    font-size: 1rem;
    gap: calc(var(--space-7) - var(--space-3));
    font-weight: 500;
    color: var(--text)
}

.faq__item.is-active .faq__question {
    padding: var(--space-5) 0 0 0;

}

.faq__question:hover {}

.faq__icon {
    width: 1.8rem;
    height: 1.8rem;
    background: var(--brand);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-muted);
    transition: all 0.3s ease;

}

.faq__question-text {
    max-width: calc(100% - 4rem);
}

.faq__icon svg {
    transition: all 0.3s ease;
    transform: rotateX(180deg);
}

.faq__icon svg path {
    transition: all 0.3s ease;
    fill: var(--text);
}

.faq__item.is-active .faq__icon {
    background: var(--brand);

}

.faq__item.is-active .faq__icon svg {
    transform: rotateX(0);
}


.faq__item.is-active .faq__icon svg path {
    fill: var(--bg-white);
}

/* Магия плавного аккордеона через CSS Grid */
.faq__answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
    padding-left: .9rem;
}

.faq__item.is-active .faq__answer-wrapper {
    grid-template-rows: 1fr;
}

.faq__answer-inner {
    overflow: hidden;
    border-left: 1px solid var(--brand);
    padding-left: .9rem;
}

.faq__answer {}




.faq--fullscreen .faq__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: var(--space-5) 0;
}

.faq--fullscreen .faq__question {
    padding: 0;
}

.faq--fullscreen .faq__answer-inner {
    border: none;
    padding: 0;
}

.faq--fullscreen .faq__item.is-active .faq__question {
    padding: 0;
    color: var(--brand);
}

.faq--fullscreen .faq__answer-wrapper {
    padding: 0;
}


@media (max-width: 1024px) {
    .faq--fullscreen .faq__item {
        grid-template-columns: 1fr;
    }

    .faq--fullscreen .faq__answer-inner {
        border-left: 1px solid var(--brand);
        padding-left: .9rem;
    }

    .faq--fullscreen .faq__answer-wrapper {
        padding-left: .9rem;
    }
}