/* ============================================================
   СЕКЦИЯ «faq» — вопросы и ответы, две колонки по три карточки.

   Две приметы макета:
   1) Рамка карточки неравномерная: сверху плашка 14, по трём
      сторонам волосок 1 (individualStrokeWeights в Figma).
      Обводка INSIDE — значит съедает внутренние отступы.
   2) Раскрытая карточка отличается не только цветом рамки:
      у неё меньше верхний отступ (32 против 38) и шире зазор
      между номером и вопросом (20 против 13).

   Отступы пересчитаны с cap-height на line-box: Figma меряет
   текст по прописным, браузер — по строке целиком. Поправка для
   Inter при line-height 1.2 = 0.23623em сверху и столько же снизу.
   ============================================================ */

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

  --faq-bd: var(--white-30);            /* рамка закрытой карточки */
  --faq-bd-open: var(--accent);         /* рамка раскрытой */
}

.faq__inner {
  /* 71 до прописных заголовка − 9.449 интерлиньяжа; низ 53 из макета */
  padding: calc(61.551 * var(--u)) 0 calc(53 * var(--u));
}

/* ---------- заголовок -------------------------------------- */

.faq__title {
  position: relative;
  z-index: 1;                            /* поверх декоративной сетки */
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(18px, calc(40 * var(--u)));   /* в макете 39.74 — снапнуто */
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grey-05);
  text-align: center;
}

/* ---------- две колонки ------------------------------------ */

/* Порядок в макете идёт по колонкам (01–03 слева, 04–06 справа),
   поэтому не грид со строками, а два отдельных столбца. */
.faq__cols {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--u));
  width: calc(1020 * var(--u));
  margin-top: calc(72.47 * var(--u));    /* 82 от прописных заголовка */
  margin-inline: auto;
}

.faq__col {
  display: flex;
  flex: 0 0 calc(500 * var(--u));
  flex-direction: column;
  gap: calc(20 * var(--u));
  /* колонки живут своей высотой: правая короче левой, как в макете */
  align-self: flex-start;
}

/* ---------- карточка --------------------------------------- */

/* Высота нигде не фиксируется: в макете 105/218 — следствие
   конкретных текстов, а не сетка. Отступы дают ту же высоту сами. */
.faq__item {
  border: 1px solid var(--faq-bd);
  border-top: calc(14 * var(--u)) solid var(--faq-bd);
  padding: calc(20.4565 * var(--u))
           calc(20 * var(--u) - 1px)
           calc(19.5 * var(--u) - 1px);
  transition: border-color var(--dur) var(--ease);
}

/* Наведение в макете не нарисовано — поднимаем рамку на полшага
   в той же палитре, новых цветов не вводим. */
.faq__item:not(.is-open):hover,
.faq__item:not(.is-open):focus-within {
  --faq-bd: var(--white-50);
}

/* Верхний отступ НЕ меняем, хотя в макете у раскрытой 32 вместо 38:
   по правке дизайнера (11.08.2026) номер и вопрос обязаны оставаться
   на месте, а не подпрыгивать на несколько пикселей. Низ подтягиваем. */
.faq__item.is-open {
  --faq-bd: var(--faq-bd-open);
  padding-bottom: calc(16.3 * var(--u) - 1px);
}

/* ---------- кнопка-вопрос ---------------------------------- */

.faq__q {
  font-weight: 400;
}

/* Сетка вместо вложенных флексов: номер занимает всю строку,
   ниже — вопрос и шеврон, между ними макетные 28. */
.faq__btn {
  display: grid;
  grid-template-columns: 1fr calc(23 * var(--u));
  column-gap: calc(28 * var(--u));
  row-gap: calc(9.04 * var(--u));        /* 13 между cap-боксами */
  width: 100%;
  padding: 0;
  text-align: left;
}

/* Зазор номер↔вопрос тоже держим постоянным (в макете у раскрытой 20):
   иначе вопрос уезжает вниз в момент раскрытия. */

.faq__num {
  grid-column: 1 / -1;
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--grey-25);
}

.faq__text {
  grid-column: 1;
  min-width: 0;                          /* даёт вопросу переноситься */
  /* 16 вместо макетных 20: по правке дизайнера (11.08.2026) каждый
     вопрос должен помещаться в одну строку. 17 уже ломает первый. */
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.2;
  min-height: 2.4em;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- шеврон ----------------------------------------- */

/* В макете это глиф «>», повёрнутый на 90°. Рисуем маской, чтобы
   не зависеть от метрик шрифта и красить через currentColor. */
.faq__chev {
  grid-column: 2;
  align-self: start;
  width: calc(23 * var(--u));
  height: calc(22 * var(--u));
  background: currentColor;
  -webkit-mask: var(--faq-chev) center / 100% 100% no-repeat;
  mask: var(--faq-chev) center / 100% 100% no-repeat;

  --faq-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 22'%3E%3Cpath d='M4.4 4.3 11.5 17.2 18.6 4.3' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* Шеврон держим на одном месте при раскрытии (правка дизайнера
   11.08.2026). В макете у раскрытой он прижат к верхней строке —
   от этого и уезжал на 4–8 px. */

/* ---------- ответ ------------------------------------------ */

.faq__a {
  margin-top: calc(11.42 * var(--u));    /* 19 между cap-боксами */
  animation: faq-reveal var(--dur) var(--ease) both;
}

/* Скрипт прячет блок атрибутом hidden — авторский стиль обязан
   его уважать, иначе ответ останется видимым. */
.faq__a[hidden] {
  display: none;
}

.faq__a p,
.faq__a li {
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--white-50);
}

/* paragraphSpacing = 10 у текстового узла ответа в Figma;
   пункты списка идут вплотную — там межабзацного отступа нет. */
.faq__a > * + * {
  margin-top: calc(10 * var(--u));
}

/* В макете маркер отступает от абзаца на 7–8, текст пункта на 21–22
   (замерено по рендеру на обоих брейкпоинтах). */
.faq__list {
  padding-left: calc(22 * var(--u));
  list-style: disc outside;
}

.faq__list--num {
  list-style: decimal outside;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__a { animation: none; }
}

/* ---------- мобилка (375) ---------------------------------- */

/* Заголовок в макете начинается ровно на границе секции (y=0),
   поэтому сверху отступа нет. Низ 60 — буфера в макете нет,
   там граница фрейма «грязная». */
@media (max-width: 599px) {
  /* Низ 22: в обновлённом макете (09.08.2026) шесть карточек,
     контейнер Frame 116 кончается на 1253 при фрейме 1275. */
  .faq__inner {
    padding: 0 0 calc(22 * var(--u));
  }

  .faq__title {
    width: calc(289 * var(--u));          /* ширина из макета: даёт 2 строки */
    margin-inline: auto;
    font-size: max(14px, calc(24 * var(--u)));
  }

  /* Один столбец: в макете мобилки нарисованы только 3 карточки,
     но прятать остальные значило бы терять содержание. */
  /* 335 = поля 20/20 по правке дизайнера (11.08.2026);
     в макете карточки 328 при полях 24/23. */
  .faq__cols {
    flex-direction: column;
    gap: calc(23 * var(--u));
    width: calc(335 * var(--u));
    margin-top: calc(24.33 * var(--u));   /* 30 от прописных заголовка */
  }

  .faq__col {
    flex: 0 0 auto;
    width: 100%;
    gap: calc(23 * var(--u));
  }

  /* В макете бокс вопроса 238 + шеврон 23 + зазор 28 = 289 при
     контейнере 288, то есть заявленные 28 туда физически не влезают
     (реально нарисовано 27). Берём 26 — тогда переносы строк
     совпадают с макетом и коллизии с шевроном нет. */
  .faq__btn {
    column-gap: calc(26 * var(--u));
  }
}

/* МОБИЛКА: здесь остаются макетные 20 px (дизайнер сам поднял кегль
   с 17 в правке 09.08.2026). В одну строку вопросы тут не помещаются
   ни при каком читаемом кегле — колонка всего 246 px под текст. */
@media (max-width: 599px) {
  .faq__text {
    font-size: max(12px, calc(20 * var(--u)));
    line-height: 1.2;
  }

}