/* ============================================================
   СПБ Переезд — FAQ (2 колонки на ПК, аккордеоны)
   ============================================================ */

.sp-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;max-width:960px;margin:0 auto}
.sp-faq__col{display:flex;flex-direction:column;gap:12px}

.sp-faq__item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sp-faq__item:hover{border-color:var(--brand-lt)}
.sp-faq__item[open]{border-color:var(--brand);box-shadow:0 4px 20px rgba(31,95,240,.08)}

.sp-faq__item summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;
  list-style:none;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.4}
.sp-faq__item summary::-webkit-details-marker{display:none}
.sp-faq__q{flex:1}

/* иконка-стрелка в кружке */
.sp-faq__ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--brand);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.sp-faq__ic svg{width:16px;height:16px}
.sp-faq__item[open] .sp-faq__ic{transform:rotate(180deg);background:var(--brand);color:#fff}

/* ответ */
.sp-faq__answer{padding:0 20px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.sp-faq__answer p{margin:0 0 10px}
.sp-faq__answer p:last-child{margin-bottom:0}
.sp-faq__answer a{color:var(--brand);font-weight:600}

/* плавное раскрытие (для браузеров с поддержкой) */
@supports (interpolate-size: allow-keywords){
  .sp-faq__item{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
  details.sp-faq__item::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--dur) var(--ease),content-visibility var(--dur) var(--ease) allow-discrete}
  details.sp-faq__item[open]::details-content{block-size:auto}
}

/* --- планшет/мобильный: одна колонка --- */
@media(max-width:720px){
  .sp-faq{grid-template-columns:1fr;gap:12px;max-width:640px}
  .sp-faq__item summary{padding:16px 17px;font-size:15px;gap:12px}
  .sp-faq__answer{padding:0 17px 16px}
}