/* Вопрос-ответ (views/constructor/faq.php). Виды: list (карточки-вопросы по центру/слева), columns (заголовок слева, вопросы справа).
   Аккордеон — <details>/<summary>; плавное раскрытие — только там, где есть ::details-content и interpolate-size. */
.cb-faq__list {display: grid; gap: 12px}

/* Список: карточки шириной ~860 px */
.cb-faq--list .cb-faq__list {max-width: 860px}
.cb-faq--list.cb-faq--center .cb-faq__list {margin-inline: auto}
.cb-faq--list .cb-faq__item {background: var(--cb-card-bg); border: 1px solid var(--cb-card-border); border-radius: var(--cb-radius); transition: border-color var(--cb-transition), box-shadow var(--cb-transition)}
.cb-faq--list .cb-faq__item:hover {border-color: var(--cb-accent)}
.cb-faq--list .cb-faq__item[open] {box-shadow: var(--cb-card-shadow)}
.cb-tone--dark .cb-faq--list .cb-faq__item[open] {border-color: rgba(255, 255, 255, .3)}
.cb-faq--list .cb-faq__summary {padding: 20px 24px}
.cb-faq--list .cb-faq__a {padding: 0 84px 24px 24px}

/* Вопрос */
.cb-faq__summary {display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; border-radius: var(--cb-radius); cursor: pointer; -webkit-tap-highlight-color: transparent}
.cb-faq__summary::-webkit-details-marker {display: none}
.cb-faq__summary::marker {content: ""}
.cb .cb-faq__q {flex: 1 1 auto; min-width: 0; margin: 0; color: var(--cb-heading); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; transition: color var(--cb-transition)}
.cb-faq__summary:hover .cb-faq__q {color: var(--cb-accent)}

/* Значок «+» / «−» */
.cb-faq__icon {position: relative; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--cb-card-border); border-radius: 50%; color: var(--cb-accent); transition: background var(--cb-transition), border-color var(--cb-transition), color var(--cb-transition)}
.cb-faq__icon::before, .cb-faq__icon::after {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: currentColor; transition: transform var(--cb-transition)}
.cb-faq__icon::after {transform: rotate(90deg)}
.cb-faq__summary:hover .cb-faq__icon {border-color: var(--cb-accent)}
.cb-faq__item[open] .cb-faq__icon {background: var(--cb-btn-bg); border-color: var(--cb-btn-bg); color: var(--cb-btn-fg)}
.cb-faq__item[open] .cb-faq__icon::after {transform: rotate(0deg)}

/* Ответ */
.cb-faq__a {color: var(--cb-fg); font-size: 16px; line-height: 1.7}
.cb-faq__a > :first-child {margin-top: 0}
.cb .cb-faq__a > * + p {margin-top: .8em}

/* Две колонки: заголовок, текст и кнопки слева (липкие), вопросы справа строками */
.cb-faq--columns {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start}
.cb-faq__intro {position: sticky; top: 110px}
.cb-faq--columns .cb-faq__head {margin-bottom: 0}
.cb .cb-faq__side-text {margin: 20px 0 0; color: var(--cb-fg); font-size: 16px; line-height: 1.65}
.cb-faq--columns .cb-faq__head + .cb-faq__actions {margin-top: 32px}
.cb-faq--columns .cb-faq__list {gap: 0; border-top: 1px solid var(--cb-line)}
.cb-faq--columns .cb-faq__item {border-bottom: 1px solid var(--cb-line)}
.cb-faq--columns .cb-faq__summary {padding: 22px 0; border-radius: 4px}
.cb-faq--columns .cb-faq__a {padding: 0 60px 24px 0}
.cb-faq__intro > :first-child {margin-top: 0}

/* «Две колонки» без вопросов: текст и кнопки под заголовком */
.cb-faq--list > .cb-faq__head:has(+ .cb-faq__side-text, + .cb-faq__actions) {margin-bottom: 0}
.cb-faq--list > .cb-faq__side-text {max-width: 680px}
.cb-faq--list.cb-faq--center > .cb-faq__side-text {margin-inline: auto; text-align: center}

/* Плавное раскрытие (прогрессивное улучшение; без анимации при «уменьшить движение») */
@media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        .cb-faq {interpolate-size: allow-keywords}
        .cb-faq__item::details-content {height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete}
        .cb-faq__item[open]::details-content {height: auto}
    }
}

@media (max-width: 991px) {
    .cb-faq--columns {grid-template-columns: minmax(0, 1fr); gap: 32px}
    .cb-faq__intro {position: static}
}
@media (max-width: 575px) {
    .cb .cb-faq__q {font-size: 16px}
    .cb-faq__summary {gap: 14px}
    .cb-faq__icon {width: 32px; height: 32px}
    .cb-faq__icon::before, .cb-faq__icon::after {width: 12px; margin-left: -6px}
    .cb-faq--list .cb-faq__summary {padding: 16px 16px 16px 18px}
    .cb-faq--list .cb-faq__a {padding: 0 18px 20px}
    .cb-faq--columns .cb-faq__summary {padding: 18px 0}
    .cb-faq--columns .cb-faq__a {padding-right: 0}
    .cb-faq__a {font-size: 15px}
}
@media print {
    .cb-faq__icon {display: none}
}