/* =========================================================
   noumy.ai — блок 6 «Вопросы и ответы» (FAQ)

   Размеры сняты с макета (Figma, секция 45:5258):
     45:5259  «1440 (+hover на строку)» — десктоп 1440
     45:5305  «1440-1200»               — от 1200 до 1440
     45:5352  «1200-900»                — от 900 до 1200
     45:5399  «900-760»                 — от 760 до 900
     45:5446  «760-360»                 — мобильный
   Раскрытая строка — фреймы «opened» справа от каждого
   разрешения (45:5487, 45:5494, 45:5501, 45:5508, 45:5515).

   ЧТО ЗДЕСЬ ПРОИСХОДИТ
   Список из шести строк, каждая с линией сверху. Строка —
   это <button> (номер + вопрос + «+») и следующая за ней
   панель с ответом. Три состояния из макета:

     default  — фон прозрачный, вопрос #353535, номер #6D6A66
     hover    — вся строка заливается синим, текст белеет
     opened   — то же синее состояние + раскрытый ответ

   Цвета трёх состояний заведены на переменные .faq__item
   (--faq-bg / --faq-fg / --faq-num), поэтому hover и opened
   отличаются одним объявлением на три строки, а не копией
   всех правил.

   АНИМАЦИЯ (две, обе чисто на CSS)
   1. «+» → «—»: вертикальная перекладина поворачивается на
      90° и ложится на горизонтальную. Горизонтальная стоит
      на месте — получается ровно тот минус, что в макете.
   2. Раскрытие: панель ответа — грид с одной строкой,
      которая едет 0fr → 1fr. Так высота анимируется без
      замеров в JS и без max-height «на глазок» — сколько
      бы текста ни было, доезд всегда точный.
   Открыт может быть только один вопрос: остальные закрывает
   claude/faq.js.

   ГЕОМЕТРИЯ СТРОКИ (десктоп)
   32 сверху + 35 (строка вопроса) + 32 снизу + 1 линия =
   100 — ровно высота строки из макета. В раскрытом виде
   между вопросом и ответом 48: 32 нижнего поля кнопки +
   16 верхнего поля панели.
   ========================================================= */

.faq {
  position: relative;
  background: var(--bg);

  /* Ширина боковых колонок (номер слева, «+» справа). В макете
     она меняется по брейкпоинтам: 91 на 1440, 71 на 1200,
     46 ниже. Между 1200 и 1440 тянем её плавно — 20px разницы
     на 240px ширины окна, отсюда делитель 12. */
  --faq-side: clamp(71px, calc(71px + (100vw - 1200px) / 12), 91px);

  /* Размер «плюса» из макета: перекладины 35×2 и 2×35,
     то есть крест 35×35 со штрихом 2px. */
  --faq-plus: 35px;
  --faq-stroke: 2px;

  /* Цвета раскрытой/наведённой строки */
  --faq-on-bg: var(--accent);
  --faq-on-num: #AFC0EA;
  --faq-on-text: var(--white);
  --faq-answer: #CDD1EF;

  /* Тайминги: заливка строки, поворот перекладины, раскрытие */
  --faq-fill: .75s;
  --faq-turn: .38s;
  --faq-open: .46s;
  --faq-ease: cubic-bezier(.4, .8, .35, 1);

  /* Заливка строки живёт по своей кривой, не по --faq-ease:
     та стартует резко и синий «вспыхивал» под курсором. Здесь
     кривая мягкая с обоих концов — цвет и трогается, и
     останавливается незаметно, без щелчка в начале.
     Правилась дважды 8 сентября 2026: .28s по --faq-ease →
     .5s по (.25, .46, .45, .94) → нынешние .75s. */
  --faq-fill-ease: cubic-bezier(.35, .1, .25, 1);

  /* Пауза перед заливкой при наведении. Нужна не ради красоты:
     без неё строки успевают моргнуть синим, когда курсор просто
     проезжает список насквозь. На уход паузы нет — из-под
     курсора цвет начинает сходить сразу. */
  --faq-fill-delay: 120ms;
}

.faq__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* отбивки блока — 80px сверху и снизу, поля 40px, как в соседях */
  padding: 80px 40px;
}

/* «/ Часто задаваемые вопросы» — Inter Regular 20/1.3,
   трекинг -0.4px, синий. До заголовка 32px, как в блоках 2–5. */
.faq__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Заголовок: Inter Medium 64px, интерлиньяж 1.0, трекинг -2.56px.
   До списка 48px. */
.faq__title {
  margin: 0 0 48px;
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ============================ СПИСОК ============================ */

.faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строка целиком: линия сверху и заливка. Нижней линии под
   последним вопросом в макете нет — список закрывается
   нижним полем блока. */
.faq__item {
  --faq-bg: transparent;
  --faq-fg: var(--ink);
  --faq-num: var(--muted);

  border-top: 1px solid var(--divider);
  background: var(--faq-bg);
  transition: background var(--faq-fill) var(--faq-fill-ease);
}

.faq__item.is-open {
  --faq-bg: var(--faq-on-bg);
  --faq-fg: var(--faq-on-text);
  --faq-num: var(--faq-on-num);
}

/* Наведение красит строку так же, как раскрытие. Только там,
   где есть настоящий курсор: на тач-экранах :hover залипает
   после тапа и строка оставалась бы синей. */
@media (hover: hover) {
  .faq__item:hover {
    --faq-bg: var(--faq-on-bg);
    --faq-fg: var(--faq-on-text);
    --faq-num: var(--faq-on-num);
  }

  /* Пауза ставится только на состоянии :hover, поэтому она
     работает на въезд и не работает на выезд. Раскрытая строка
     её не берёт — там цвет уже синий, ждать нечего. */
  .faq__item:hover,
  .faq__item:hover .faq__num,
  .faq__item:hover .faq__q,
  .faq__item:hover .faq__icon {
    transition-delay: var(--faq-fill-delay);
  }

  .faq__item.is-open:hover,
  .faq__item.is-open:hover .faq__num,
  .faq__item.is-open:hover .faq__q,
  .faq__item.is-open:hover .faq__icon {
    transition-delay: 0s;
  }
}

/* ============================ СТРОКА ВОПРОСА ============================
   Это <button> во всю ширину: клавиатура и скринридер получают
   кнопку бесплатно, а от браузерных стилей кнопки избавляемся
   вручную. */

.faq__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 32px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq__row:focus-visible {
  outline: 2px solid var(--faq-fg);
  outline-offset: -4px;
}

/* Номер: 16/35 по центру своей колонки. Интерлиньяж 35px не
   случайный — это высота строки вопроса (32 × 1.1), поэтому
   номер, вопрос и «+» стоят на одной линии. */
.faq__num {
  flex: 0 0 var(--faq-side);
  width: var(--faq-side);
  font-size: 16px;
  line-height: 35px;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--faq-num);
  transition: color var(--faq-fill) var(--faq-fill-ease);
}

/* Вопрос: Inter Regular 32/1.1, трекинг -1.6px */
.faq__q {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--faq-fg);
  transition: color var(--faq-fill) var(--faq-fill-ease);
}

/* ============================ «+» → «—» ============================
   Крест собран из двух псевдоэлементов по путям из макета:
   горизонталь 35×2, вертикаль 2×35, обе по центру колонки.
   Отдельного SVG-файла не заводим — это две полоски.

   При раскрытии вертикаль поворачивается вокруг центра на 90°
   и совпадает с горизонталью: остаётся ровно тот минус, что
   нарисован в макете (тот же путь 28→63 по x, 17→19 по y). */

.faq__icon {
  flex: 0 0 var(--faq-side);
  width: var(--faq-side);
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faq-fg);
  transition: color var(--faq-fill) var(--faq-fill-ease);
}

.faq__plus {
  position: relative;
  width: var(--faq-plus);
  height: var(--faq-plus);
}

.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}

/* горизонталь — стоит на месте в обоих состояниях */
.faq__plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: var(--faq-stroke);
  transform: translateY(-50%);
}

/* вертикаль — она и поворачивается */
.faq__plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--faq-stroke);
  transform: translateX(-50%) rotate(0deg);
  transition: transform var(--faq-turn) var(--faq-ease);
}

.faq__item.is-open .faq__plus::after {
  transform: translateX(-50%) rotate(90deg);
}

/* ============================ ОТВЕТ ============================
   Панель — грид в одну строку: 0fr в закрытом виде, 1fr в
   раскрытом. Внутренняя обёртка режет содержимое (overflow),
   пока строка не доехала. min-height: 0 обязателен — без него
   грид-элемент не даёт себя сжать ниже содержимого и панель
   не закроется. */

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--faq-open) var(--faq-ease);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
  min-height: 0;
}

/* Текст ответа: Inter Regular 20/1.3, трекинг -0.8px.
   Поля слева и справа — ширина боковой колонки плюс зазор 24,
   чтобы ответ встал ровно под вопросом и не залез под «+».
   Сверху 16 (в сумме с нижним полем кнопки — 48 из макета),
   снизу 32. */
.faq__a {
  padding: 16px calc(var(--faq-side) + 24px) 32px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--faq-answer);
  opacity: 0;
  transition: opacity calc(var(--faq-open) * .6) ease;
}

.faq__item.is-open .faq__a {
  opacity: 1;
  /* текст проявляется во второй половине раскрытия, когда
     панель уже разъехалась — иначе он «выползает» из-под края */
  transition-delay: calc(var(--faq-open) * .35);
}

.faq__a p { margin: 0; }

/* Абзацы разделены пустой строкой — так это набрано в макете
   (двойной перевод строки внутри одного текстового слоя). */
.faq__a p + p { margin-top: 1.3em; }

/* ======================================================================
   1200px — вторая ступень макета («1200-900»): вопрос 24/1.1,
   ответ 16/1.3, заголовок 48, боковые колонки по 46.
   ====================================================================== */

@media (max-width: 1199px) {
  .faq { --faq-side: 46px; }

  .faq__title { font-size: 48px; }

  .faq__q {
    font-size: 24px;
    letter-spacing: -0.03em;
  }

  .faq__a {
    font-size: 16px;
    letter-spacing: -0.04em;
  }
}

/* ======================================================================
   900px — третья ступень («900-760»): типографика та же, меняются
   только поля блока: 50 сверху и снизу, 16 по бокам.
   ====================================================================== */

@media (max-width: 899px) {
  .faq__inner { padding: 50px 16px; }
}

/* ======================================================================
   760px — мобильный макет («760-360»). Номеров строк нет вовсе,
   «+» уезжает вправо к вопросу, ответ идёт под ними во всю ширину.
   Поля строки 12 по бокам, между вопросом и «+» 16, между
   вопросом и ответом 32.
   ====================================================================== */

@media (max-width: 759px) {
  .faq__inner { padding: 50px 12px; }

  .faq__eyebrow {
    margin: 0 0 24px;
    font-size: 16px;
  }

  .faq__title {
    margin: 0 0 32px;
    font-size: 40px;
  }

  .faq__row {
    gap: 16px;
    padding: 32px 12px;
  }

  /* номер строки на мобильном не показываем */
  .faq__num { display: none; }

  .faq__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 30px;
  }

  .faq { --faq-plus: 30px; }

  /* На мобильном между вопросом и ответом 32 — это ровно нижнее
     поле кнопки, поэтому сверху у ответа поля нет (на десктопе
     там ещё 16, чтобы в сумме вышло 48 из макета). */
  .faq__a {
    padding: 0 12px 32px;
  }
}

/* ======================================================================
   Меньше движения — оставляем только мгновенную смену состояний:
   раскрытие происходит сразу, «плюс» меняется без поворота.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__num,
  .faq__q,
  .faq__icon,
  .faq__panel,
  .faq__plus::after,
  .faq__a {
    transition: none;
  }
}