﻿.section-head p {
    color : var(--l-text-2)
}

.FAQ-quick-grid {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.FAQ-quick-card {
    position: relative;
    display: block;
    min-height: 132px;
    padding: var(--s-4) var(--s-7) var(--s-4) var(--s-4);
    border: 1px solid var(--l-border-2);
    border-radius: var(--r-lg);
    background: var(--l-bg);
    transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

    .FAQ-quick-card:hover {
        border-color: var(--pb-red);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(11, 11, 11, .08);
    }

    .FAQ-quick-card::after {
        content: "→";
        position: absolute;
        top: var(--s-4);
        right: var(--s-4);
        width: var(--s-5);
        height: var(--s-5);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--pb-red);
        color: var(--d-text);
        transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
    }

    .FAQ-quick-card:hover::after {
        transform: translateX(3px);
        background: var(--pb-red-hover);
    }

    .FAQ-quick-card strong {
        display: block;
        margin-bottom: var(--s-2);
        color: var(--l-text);
    }

    .FAQ-quick-card span {
        display: block;
        color: var(--l-text-2);
    }

.faq-list {
    border : none;
    display: flex;
    flex-direction : column;
    gap : var(--s-4)
}

.faq-item {
    border: 1px solid var(--l-border);
    border-radius : var(--r-lg);
    background : var(--l-surface);
    overflow : hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .faq-question:focus,
    .faq-question:active,
    .faq-question:focus-visible {
        outline: none;
        box-shadow: none;
    }

.faq-item h3 {
    margin : 0
}

.faq-question span:last-child {
    color: var(--d-text-3);
    transition: transform var(--d-fast);
}

.faq-answer {
    display: none;
    padding : 0 var(--s-5) var(--s-5) var(--s-5)
}

    .faq-answer p {
        margin: 0;
        max-width: 90ch;
        color: var(--l-text-2);
    }

.faq-item.is-open .faq-answer {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.faq-item.is-open .faq-question span:last-child {
    transform: rotate(180deg); 
}

.cta-band {
    background-color : inherit
}

.container.cta-box {
    padding : var(--s-3) var(--s-4);
    border-radius : var(--r-md);
    background-color : var(--pb-red)
}

.container.cta-box p{
    color : var(--l-surface)
}


@media (min-width: 761px) {
    .FAQ-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .FAQ-quick-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }

    .FAQ-quick-card {
        min-height: 112px;
        padding: var(--s-3) var(--s-6) var(--s-3) var(--s-3);
    }

        .FAQ-quick-card::after {
            top: var(--s-3);
            right: var(--s-3);
        }
}
