/* FAQ accordion and CTA layout. */

/* FAQ tokens and layout */
:root {
    --faq-icon-size: 28px;
    --faq-line-length: 12px;
    --faq-line-thickness: 2px;
}

.faq-cta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    align-items: start;
    gap: var(--space-l);
}

.faq-button {
    position: relative;
    z-index: 2;
    justify-content: space-between;
    gap: var(--space-l);
    text-align: left;
}

/* Accordion controls */
.faq-icon {
    flex-shrink: 0;
    position: relative;
    width: var(--faq-icon-size);
    height: var(--faq-icon-size);
    border: 1px solid var(--purple-border);
    border-radius: var(--radius-s);
    background: var(--purple-light);
}

.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--faq-line-length);
    height: var(--faq-line-thickness);
    border-radius: var(--radius-pill);
    background: var(--purple-dark);
    transform: translate(-50%, -50%);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.faq-icon::after {
    width: var(--faq-line-thickness);
    height: var(--faq-line-length);
}

.faq-item {
    --faq-join-size: var(--radius-s);
    isolation: isolate;
    border-radius: var(--radius-s);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(17, 24, 39, var(--a-xs));
}

.faq-item.open .faq-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.cta-card {
    background: radial-gradient(circle at top right, rgba(var(--accent-rgb), var(--a-m)), transparent 34%), var(--surface-bg);
}

/* Accordion panel */
.faq-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr;
    margin-top: calc(-1 * var(--faq-join-size));
}

.js .faq-panel {
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows var(--transition-medium), margin-top var(--transition-medium);
}

.js .faq-item.open .faq-panel {
    grid-template-rows: 1fr;
    margin-top: calc(-1 * var(--faq-join-size));
}

.faq-panel-clip {
    min-height: 0;
    overflow: hidden;
}

/* Answer content */
.faq-answer {
    padding: calc(var(--space-l) + var(--faq-join-size)) var(--space-l) var(--space-l);
    border-inline: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    background: var(--surface);
    line-height: 1.4;
}

.faq-answer ul, .faq-answer ol {
    padding-inline-start: 1.4em;
}

.faq-answer a {
    font-weight: 750;
    color: var(--purple-dark);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

/* Interactive states */
@media (any-hover: hover) and (any-pointer: fine) {
    .faq-answer a:hover {
        color: var(--accent-dark);
    }
}

/* Responsive layout */
@media (max-width: 1099px) {
    .faq-cta-layout {
        grid-template-columns: 1fr;
    }
}