/* ════════════════════════════════════════════════════════════════════
   08 — FAQ. Заголовок слева (липкий на десктопе), аккордеон справа.

   Пиксели в этом файле — только геометрия значка «плюс/крестик»
   (диаметр кружка, длина и толщина штрихов) и толщина волоска-линии.
   Это рисунок, а не система отступов (исключение из п.1 контракта).
   ════════════════════════════════════════════════════════════════════ */

.s-faq .s-faq__halo {
  right: 0;
  top: 10%;
  width: min(620px, 80%);
  height: min(460px, 70%);
}

/* ── Раскладка ─────────────────────────────────────────────────────── */

.s-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-9);
}

/* Отступ шапки берёт на себя сетка. Селектор из двух классов — чтобы не
   зависеть от порядка подключения layout.css и этого файла. */
.s-faq .s-faq__head {
  gap: var(--sp-5);
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .s-faq__grid {
    grid-template-columns: minmax(0, clamp(260px, 26vw, 380px)) minmax(0, 1fr);
    gap: var(--grid-gap-lg);
    align-items: start;
  }
  /* Заголовок держится в кадре, пока читают ответы.
     scroll-padding-top у html — 96px, отступаем от него. */
  .s-faq .s-faq__head {
    position: sticky;
    top: var(--sp-12);
  }
}

/* ── Вопрос ────────────────────────────────────────────────────────── */

.s-faq__list {
  display: flex;
  flex-direction: column;
}

.s-faq__item {
  position: relative;
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--t-base) var(--ease-out);
}
.s-faq__item:last-child { border-bottom: 0; }
/* Раскрытый вопрос подсвечивает свою линию — видно, где ты находишься. */
.s-faq__item[open] { border-bottom-color: color-mix(in srgb, var(--c-accent) 32%, transparent); }

/* Блик, изредка пробегающий по линии между вопросами. Двигаем
   background-position, а не размеры: ни одного пересчёта раскладки. */
.s-faq__item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-accent-2), transparent);
  background-size: 38% 100%;
  background-repeat: no-repeat;
  animation: ms-faq-glint calc(9s * var(--motion)) linear infinite;
  pointer-events: none;
}
.s-faq__item:last-child::after { content: none; }
.s-faq__item:nth-child(2)::after { animation-delay: calc(4s * var(--motion)); }

@keyframes ms-faq-glint {
  0%        { background-position: -40% 0; }
  32%, 100% { background-position: 140% 0; }
}

.s-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  cursor: pointer;
  list-style: none; /* убираем стандартный треугольник */
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--c-text);
}
.s-faq__q::-webkit-details-marker { display: none; }
.s-faq__item:first-child .s-faq__q { padding-top: 0; }

/* Вопрос — <h3> внутри <summary>: так секция сохраняет иерархию
   заголовков (h2 → h3), и скринридер даёт по ним навигацию. Размер и
   начертание задаёт строка вопроса целиком, поэтому шрифт наследуем. */
.s-faq__q-text {
  margin: 0;
  font: inherit;
  text-wrap: balance;
  transition: transform var(--t-base) var(--ease-out);
}
.s-faq__q:hover .s-faq__q-text { transform: translateX(3px); }

/* ── Значок «плюс → крестик» ───────────────────────────────────────── */
/* Два штриха крест-накрест; при [open] поворачивается вся обойма на 135°.
   Только transform — ни размеров, ни позиций в анимации. */

.s-faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    background var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.s-faq__mark-bar {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: currentColor;
  transform: translateY(-50%);
}
.s-faq__mark-bar + .s-faq__mark-bar { transform: translateY(-50%) rotate(90deg); }

.s-faq__q:hover .s-faq__mark {
  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
  color: var(--c-accent);
}
.s-faq__item[open] .s-faq__mark {
  transform: rotate(135deg);
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  color: var(--c-accent);
}

/* ── Ответ ─────────────────────────────────────────────────────────── */
/* Сам <details> анимировать нельзя: высота содержимого неизвестна, а
   height: auto не интерполируется. Приём — сетка из одной строки:
   0fr → 1fr. Это интерполируемая величина, поэтому браузер плавно
   раскрывает блок, не зная его высоты заранее. Внутренней обёртке
   обязательны min-height: 0 и overflow: hidden, иначе строка не сожмётся
   ниже минимального размера содержимого и анимации не будет. */

.s-faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out);
}
.s-faq__item[open] .s-faq__body { grid-template-rows: 1fr; }

.s-faq__body-inner {
  min-height: 0;
  overflow: hidden;
}

/* Дополнение для браузеров с ::details-content: закрытый <details>
   прячет содержимое через content-visibility, и без allow-discrete
   переключение происходит мгновенно — закрытие «схлопывалось» бы
   рывком. С allow-discrete браузер ждёт конца анимации. Браузеры без
   поддержки правило игнорируют: открытие плавное в любом случае. */
.s-faq__item::details-content {
  transition: content-visibility var(--t-base) allow-discrete;
}

.s-faq__a {
  padding-bottom: var(--sp-6);
  max-width: 68ch;
  /* 17px макета, а не текучий --fs-lead: он доходит до 20 и делает
     ответы крупнее вопросов по ощущению. */
  font-size: var(--fs-ml);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
  text-wrap: pretty;
  /* Текст подтягивается следом за раскрытием, с небольшим опозданием. */
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.s-faq__item[open] .s-faq__a {
  opacity: 1;
  transform: none;
  transition-delay: var(--t-fast);
}