/* ==========================================================================
   Секция 13 — «Вопросы и ответы»
   --------------------------------------------------------------------------
   Два режима из одной разметки.

   БАЗОВЫЙ (он же без JS, он же весь мобильный диапазон): обычный список —
   карточка-вопрос, под ней ответ. Все семь ответов видны. Это то, что
   отдаётся в HTML.

   РЕЖИМ ВКЛАДОК (класс .faq--tabs вешает js/sections/13-faq.js): вопросы
   уходят в левую колонку, ответ выбранного вопроса — в панель справа.
   Условие одно на CSS и на скрипт: (min-width: 901px) and (min-height: 600px).
   Высота в условии не украшение — разбор в «Адаптиве».

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

.faq {
  /* Втяжка ответа под вопросом в базовом режиме: значок + зазор + левое поле
     карточки. Раньше переменная объявлялась только внутри @media 640
     и на 641-900 не имела значения вовсе — ответ прижимался к краю. */
  --faq-indent: calc(48px + var(--s-4) + var(--s-5));
}

/* ---------- Шапка ----------
   Ритм общий для всех секций: бейдж → 40 → H2 → 24 → лид. */

.faq__head { margin-bottom: var(--s-7); }

/* Своего интерлиньяжа у заголовка нет — держит общий --lh-tight.
   Здесь стояло 1.15 с объяснением «у двух слов 1.22 висит слишком свободно»,
   но объяснение не проверялось замером: «ВОПРОСЫ И ОТВЕТЫ» ложится в ОДНУ
   строку на всех ширинах от 320 до 1920 (проверено), а на одной строке
   интерлиньяж просвета между строками не создаёт — он меняет только высоту
   коробки, то есть отодвигает лид на 4px против всех остальных секций.
   Итог: видимого выигрыша ноль, а у роли «заголовок секции» появлялось
   третье значение интерлиньяжа при заявленном одном. */
.faq__title { margin-top: calc(var(--s-6) + var(--s-2)); }

/* Подсказка живёт только в режиме вкладок: без него нажимать не на что. */
.faq__hint {
  display: none;
  margin-top: var(--s-5);
}

/* ---------- Список ---------- */

.faq__list {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq__q { margin: 0; }

/* Вопрос — карточка-строка. Материал общий с карточками ниш на экране 5:
   .card + .card--interactive из base.css, радиус --r-md, поля 16/24.
   Тень --sh-card, как у всех карточек этого уровня на сайте. */
.faq__q-link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  /* Кроме подъёма и тени из .card--interactive плавно меняется заливка:
     выбранный вопрос загорается брендовым тоном, а не переключается рывком.
     Ступень --t-fast на всех трёх свойствах — это отклик самой строки
     на руку человека; ответ справа появляется по своей ступени, --t-base
     (правило в base.css, раздел «Движение»). Разведение как раз и делает
     переключение понятным: сначала отзывается то, что нажали, потом
     меняется то, что оно показывает. */
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

/* Списочный режим (скрипт вешает .faq--list): нажимать не на что, ответ
   уже под вопросом. Курсор-рука на строке, которая ничего не делает, —
   такое же обещание, как шеврон, который заказчик снял. Сам href скрипт
   к этому моменту уже снял, .card--interactive тоже; здесь остаётся курсор
   и подстраховка от подъёма, если класс почему-то останется. */
.faq--list .faq__q-link {
  cursor: default;
  transform: none;
}

/* base.css красит ссылки в брендовый и меняет цвет по наведению — здесь
   ссылка работает как карточка, и текст обязан остаться текстом.
   Медиазапрос тот же, что у правила в base.css, которое это гасит:
   без него на телефоне цвет остался бы переопределённым впустую. */
@media (hover: hover) {
  .faq__q-link:hover { color: var(--ink); }
}

.faq__q-text {
  min-width: 0;
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
}

/* Значок берётся ступенью --sm из base.css (48/22, на телефоне 40/18).
   Здесь только переход, чтобы он загорался вместе с карточкой. */
.faq__icon {
  transition: background var(--t-fast), box-shadow var(--t-fast),
              border-color var(--t-fast), color var(--t-fast);
}

/* Отклик на наведение: кружок загорается фирменным переливом — тот же приём,
   что у .icon-badge--accent, только по наведению.
   Медиазапрос — общее правило сайта, разбор в base.css: без него на телефоне
   тапнутый вопрос оставался бы с горящим кружком, то есть выглядел бы
   выбранным наравне с настоящим выбранным.
   :not(.faq--list) — потому что в списочном режиме строка ничего
   не переключает: загорающийся кружок обещал бы выбор, которого нет. */
@media (hover: hover) {
  .faq:not(.faq--list) .faq__q-link:hover .faq__icon {
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: var(--glow-brand);
    color: #fff;
  }
}

/* ---------- Ответ в базовом режиме ----------
   Ответ не карточка, а текст на общем фоне страницы: иначе на семь вопросов
   пришлось бы четырнадцать плашек подряд, а «слишком много вот этих
   плашечек» заказчик уже снимал. Втяжка выравнивает ответ по тексту
   вопроса — строка читается как продолжение своей карточки. */

.faq__a {
  margin-top: var(--s-3);
  padding-left: var(--faq-indent);
  max-width: calc(var(--measure) + var(--faq-indent));
  color: var(--muted);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  /* Порог переноса поднят с общего 8 4 3, как у .lead в base.css и ровно
     по той же причине. Ответ здесь — абзац в две-четыре строки, а не
     полоса текста: разрыв на общем пороге приходился на обычные
     восьмибуквенные слова и читался браком. Замер (tools/d-tap.js):
     «исправляем» на 320, «собираем» на 360, «пошагово» на 430 —
     по одному переносу на секцию, ни один из них не спасал строку
     от переполнения. При 12 6 4 слова короче двенадцати букв не рвутся,
     а запас на «действующего» и «нормального» остаётся.
     Совсем гасить перенос нельзя: на 320 колонка ответа 272px, и это
     единственная защита от переполнения, если контент когда-нибудь
     пополнится длинным словом. */
  hyphenate-limit-chars: 12 6 4;
}

/* Крупный значок и надпись «Ответ» нужны только панели справа. В списке
   значок стоял бы вторым таким же на ту же строку, а «Ответ» — семь раз
   подряд перед и без того очевидным текстом. */
.faq__a-icon,
.faq__a-label { display: none; }

/* ---------- Про снятое выделение седьмой строки ----------

   ПРАВКА ЗАКАЗЧИКА, идёт И НА ДЕСКТОП: «сами вопросы и ответы оформлены
   классно. Почему-то последний вопрос у тебя выделен, ответ на него жирным
   шрифтом, и по-моему у него больше отступ, чем у других вопросов — какие-то
   странные увеличивающиеся».

   Так и было, три правила подряд на класс .faq__item--sum:
     margin-top: var(--s-4)          — лишние 16px перед седьмой парой
                                       поверх обычного зазора списка;
     .faq__item--sum .faq__a color   — ответ темнее остальных (--ink-2);
     .faq__item--sum .faq__a weight  — и жирнее (500 против 400).
   Плюс тот же лишний отступ отдельно для режима вкладок
   (.faq--tabs .faq__item--sum .faq__q).

   Задумано это было как «разрыв ритма перед выводом», но по факту читалось
   ровно так, как сказал заказчик: одна строка из семи набрана иначе без
   видимой причины. Снято целиком, вместе с самим классом в разметке —
   седьмая пара теперь ничем не отличается от первых шести ни на телефоне,
   ни на планшете, ни на десктопе. */

/* ==========================================================================
   Режим вкладок: вопросы слева, ответ справа
   --------------------------------------------------------------------------
   Раскладка держится на display: contents у <li>: пара «вопрос + ответ»
   остаётся в разметке рядом (это нужно без скрипта), а в сетке заголовки
   выстраиваются в левую колонку, панели ответов — одна поверх другой
   в правой. Никакого переноса узлов скриптом: он меняет только атрибуты
   и классы.
   ========================================================================== */

@media (min-width: 901px) and (min-height: 600px) {

  .faq--tabs .faq__hint { display: block; }

  /* Строки заданы явно семью: отрицательный номер линии (grid-row: 1 / -1)
     считается по ЯВНОЙ сетке, на неявной он схлопнулся бы в одну строку
     и панель ответа была бы высотой в один вопрос. Появится восьмой вопрос —
     число правится здесь. */
  .faq--tabs .faq__list {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
    column-gap: clamp(var(--s-6), 3vw, var(--s-8));
    row-gap: var(--s-3);
  }

  .faq--tabs .faq__item { display: contents; }

  .faq--tabs .faq__q { grid-column: 1; }

  /* Выбранный вопрос. Сигнал двойной — заливка карточки уходит в брендовый
     перелив и загорается значок: одного значка мало, взглядом по семи
     строкам активную не найти. Приём и значения общие с экраном 5. */
  .faq__q-link[aria-selected="true"] {
    background: var(--grad-soft);
    box-shadow: 0 0 0 1px rgba(124, 59, 246, .22),
                0 2px 6px rgba(27, 22, 51, .05),
                0 16px 40px rgba(124, 59, 246, .16);
  }

  .faq__q-link[aria-selected="true"] .faq__icon {
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: var(--glow-brand);
    color: #fff;
  }

  /* ---------- Панель ответа ----------

     Все семь панелей лежат в одной области сетки (колонка 2, строки 1…-1)
     одна поверх другой, поэтому переключение не двигает ни строку, ни
     страницу.

     Панель приподнята сильнее строк (--sh-lift против --sh-card) намеренно:
     правило «тени у соседей одинаковые» про блоки одного уровня, а это
     не сосед строк, а объект, которым они управляют. Ровно так же разведены
     карточки ниш и окно переписки на экране 5.

     Панель занимает колонку по центру, а не растянута на всю её высоту.
     Растянутая (проверено снимком) — это карточка в 640px, где живут четыре
     строки текста: белое поле в пол-экрана читается как незаполненный блок.
     Пустота вокруг карточки такой проблемы не создаёт: там общий фон
     страницы со своей подсветкой, ему пустовать можно.

     min-height задан с запасом на самый длинный ответ, поэтому при смене
     вопроса рамка не меняет размера и не прыгает. */
  .faq--tabs .faq__a {
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(300px, 30vw, 480px);
    margin: 0;
    padding: clamp(var(--s-6), 2.6vw, var(--s-8));
    max-width: none;
    border-radius: var(--r-xl);
    /* Перелив, а не плоская заливка: тот же приём, что в шапке окна
       переписки на экране 5. */
    background:
      linear-gradient(150deg, rgba(124, 59, 246, .07) 0%, rgba(124, 59, 246, 0) 52%),
      var(--surface);
    box-shadow: var(--sh-lift);
    font-size: inherit;
    line-height: inherit;
  }

  /* Скрытая панель занимает место, но не видна и не читается скринридером.
     display: none нельзя: тогда область сетки схлопывалась бы. */
  .faq--tabs .faq__a--off { visibility: hidden; }

  /* Значок выбранного вопроса, повторённый крупно и в брендовой заливке.
     Он держит связь «нажатая строка → эта панель» лучше любой стрелки:
     тот же символ, тот же цвет, только на две ступени больше. Заодно
     у панели появляется верх — без него в ней стоял бы один абзац. */
  .faq--tabs .faq__a-icon {
    display: inline-flex;
    margin-bottom: var(--s-5);
  }

  .faq--tabs .faq__a-label {
    display: block;
    margin-bottom: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--fz-caption);
    font-weight: 600;
    letter-spacing: var(--ls-caps-sm);
    line-height: 1;
    text-transform: uppercase;
    /* Капс не переносится: свод, «Переносы». */
    -webkit-hyphens: none;
    hyphens: none;
    color: var(--brand);
  }

  /* Ответ здесь не вторичный текст, а единственное содержимое панели:
     полный контраст и крупный кегль. Цвет объявлен на самом абзаце,
     а не унаследован: у .faq__a базового режима он приглушённый (--muted). */
  .faq--tabs .faq__a-text {
    max-width: 20em;
    color: var(--ink);
    /* Ступень подзаголовка: ответ — абзац, а не вывод секции. Было 29.5px
       на 1440 при выводе секции 33.8 — ответ на частный вопрос звучал почти
       так же громко, как итог экрана, и громче собственного вопроса. */
    font-size: var(--fz-lead);
    font-weight: 500;
    line-height: var(--lh-lead);
  }

  /* ---------- Смена ответа ----------

     Мигать нечему: рамки всех панелей совпадают до пикселя, поэтому подмена
     видимости глазом не читается — меняется только текст. Он и проявляется:
     короткий подъём на 8px с прозрачности. Анимируем содержимое, а не саму
     панель, иначе на время перехода белая карточка исчезала бы вместе
     с текстом и получалась бы вспышка.

     Начальное состояние живёт только в кадрах анимации: при выключенном
     движении текст рисуется как обычно, а не остаётся прозрачным. */
  .faq--tabs .faq__a--enter .faq__a-icon,
  .faq--tabs .faq__a--enter .faq__a-label,
  .faq--tabs .faq__a--enter .faq__a-text {
    /* --t-base — та же ступень появления содержимого, что у реплик ниш
       на экране 5 и у добавленных историй на экране 11. Было 280 мс:
       своё число ради своей секции, ровно тот разнобой, из-за которого
       одинаковые по роли переходы звучали по-разному. */
    animation: faq-answer-in var(--t-base) both;
  }

  .faq--tabs .faq__a--enter .faq__a-label { animation-delay: 40ms; }
  .faq--tabs .faq__a--enter .faq__a-text  { animation-delay: 80ms; }
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Глобальный блок в base.css это уже делает, но правило продублировано
   здесь намеренно: секцию могут вынуть из проекта вместе с этим файлом.

   Рецепт тот же, что в базе, и не `animation: none`: у появления ответа
   стоит fill-mode both, а свод (раздел «prefers-reduced-motion») прямо
   предупреждает, что снятая анимация оставит такой элемент в СТАРТОВОМ
   кадре — то есть прозрачным. Проигрываем таймлайн за 0.01 мс: движения
   нет, конечный кадр гарантирован. */
@media (prefers-reduced-motion: reduce) {
  .faq__a--enter .faq__a-icon,
  .faq__a--enter .faq__a-label,
  .faq__a--enter .faq__a-text {
    animation-duration: .01ms;
    animation-delay: 0s;
  }

  .faq__q-link,
  .faq__icon { transition-duration: .01ms; }
}

/* ==========================================================================
   Адаптив
   --------------------------------------------------------------------------
   Вкладки включаются при (min-width: 901px) and (min-height: 600px) —
   и то и другое обязательно. Ниже режима вкладок нет вовсе: скрипт его
   там не включает, и стили выше закрыты тем же медиазапросом.

   Почему в условии появилась ВЫСОТА. Замер до правки: на 932×430 (iPhone
   Pro Max лёжа) телефон получал десктопные вкладки — колонка вопросов
   429,5px и панель ответа 405,2×300 сбоку при высоте окна 430. Седьмой
   вопрос целиком показывался только при scrollY ≥ 18 541, и к этому моменту
   верх панели ответа стоял на 44px выше кромки окна: человек листает список
   и не видит того, чем список управляет. На 844×390 — тот же телефон моделью
   меньше — оставался список. Один аппарат в одном положении давал два разных
   интерфейса, и это ловилось не на редком устройстве, а на повороте экрана.

   Вкладкам нужна не ширина сама по себе, а место под панель: у неё
   min-height 300px плюс поля секции. 600px высоты окна — нижняя граница,
   при которой панель и колонка вопросов помещаются целиком. Дальше
   причины, по которым на телефоне вкладок нет в принципе:

   1. Двух колонок на телефоне не бывает. Ответ мог бы появляться только под
      вопросом, а это ровно тот аккордеон, который заказчик снял вместе
      с шевронами.
   2. Шевронов нет, значит нет и знака, что строку можно нажать. Спрятанный
      ответ без этого знака выглядит не свёрнутым, а отсутствующим.
   3. Экономия прокрутки мизерная: ответы по одной-две строки, все семь
      занимают меньше половины экрана телефона.
   4. Смысл затеи по заказчику — «чтобы концентрировались на вопросах
      и нажимали, если интересно». Это работает, когда ответ появляется
      РЯДОМ и список не двигается. На телефоне нажатие перекладывало бы
      строки под пальцем — эффект обратный.
   ========================================================================== */

/* Группировка пары «вопрос + ответ».

   В режиме вкладок (от 901) пару собирает раскладка: вопрос слева, ответ
   справа, спутать не с чем. В базовом режиме пара держится только
   расстоянием, и оно было почти одинаковым: от вопроса до своего ответа
   12px, от ответа до следующего вопроса 24 (на 641-900) и 16 (на ≤640).
   Проверка свода — «расстояние от подписи до своего заголовка заметно
   меньше, чем до соседнего блока» — на ≤640 не проходила вовсе: 12 против
   16 глаз не различает, и семь пар читаются как четырнадцать отдельных
   строк. Закон близости: что ближе, то и группа.

   Стало 8 внутри пары и 32 между парами — вчетверо. Разрыв 32 берётся
   из шкалы (--s-6) и остаётся заметно меньше межсекционных 80,
   так что три уровня («внутри пары» < «между парами» < «между секциями»)
   выстроены по возрастанию.

   Цена по высоте на 375: шесть межпарных зазоров +16 каждый, семь
   внутрипарных −4 каждый, итого +68px на секцию.

   Условие записано отрицанием вкладочного, а не своими числами: при
   «(max-width: 900px), (max-height: 599px)» окно высотой 599,6px не попало бы
   ни туда, ни сюда — раскладка списочная, а зазоры вкладочные. Отрицание
   целого условия смыкается с ним без зазора по определению. */
@media not all and (min-width: 901px) and (min-height: 600px) {
  .faq__list { gap: var(--s-6); }
  .faq__a { margin-top: var(--s-2); }
}

/* ---------- Планшет: пара «вопрос | ответ» в одну строку ----------

   Замер до правки на 768 / 834 / 900: карточка вопроса 704 / 770 / 836px,
   а текст вопроса в ней — 362px на всех трёх. То есть от 43 до 57% белой
   плашки пустовало, и это была не композиция, а телефонная раскладка,
   растянутая по ширине планшета. Секция при этом занимала 1495px —
   полтора экрана iPad в портрете на семь коротких вопросов.

   Здесь не сжатый десктоп и не растянутый телефон, а третья раскладка:
   пара встаёт в строку — карточка вопроса слева, ответ справа на общем
   фоне. Идея та же, что в принятом десктопе (ответ живёт СБОКУ от своего
   вопроса, а не под ним), только без вкладок: переключать нечего, все семь
   ответов видны сразу, как и на телефоне.

   Пропорция колонок 1.06 / 1 — та же, что у вкладок от 901px: вопрос
   набран капсом и требует чуть больше места, чем свой ответ. Один и тот же
   приём обязан иметь одни и те же пропорции, иначе экраны снова читаются
   собранными из разных наборов.

   Нижняя граница 700, а не 640: на 641-699 контейнер ещё узкий (653px
   максимум), две колонки дали бы вопросу 336px под 224px текста — тесно.
   700 совпадает с порогом, на котором двухколоночной становится секция
   цены и планшетная ступень кегля в tokens.css.

   ВЕРХНЕЙ границы по ширине нет, и это важнее, чем кажется. Условие висит
   на классе .faq--list, который скрипт вешает ровно тогда, когда вкладок
   НЕТ, — то есть дополнение к условию вкладок берётся у самого скрипта,
   а не переписывается числами. Если бы граница стояла на 900, из раскладки
   выпадал бы телефон в ландшафте: на 932x430 ширины 932 хватает, а высоты
   430 для вкладок нет, и секция возвращалась бы к столбику из карточек
   в 868px под 362px текста — 1495px высоты на окно в 430. Теперь тот же
   932x430 получает пару в строку и 989px.
   Заодно снимается спор о дробной высоте 599,6px, из-за которого в этом
   файле условие вкладок уже один раз записано отрицанием.

   Без скрипта класса нет, и страница остаётся с прежним столбиком —
   тем самым состоянием, в котором она полезна и без JS. */
@media (min-width: 700px) {
  .faq--list .faq__item {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: center;
  }

  /* Втяжка и верхнее поле были нужны, только пока ответ стоял ПОД вопросом:
     они собирали пару по вертикали. В строке пару собирает сама сетка. */
  .faq--list .faq__a {
    margin-top: 0;
    padding-left: 0;
    max-width: none;
  }

  /* Пара стоит в строке, значит расстояние между парами обязано быть
     заметно больше расстояния внутри пары — а внутри пары теперь работает
     column-gap 32. 48 держит закон близости: 32 внутри < 48 между парами
     < 96-128 между секциями. Разрыв перед итоговым вопросом остаётся
     крупнее межпарного (48 + 16 = 64). */
  .faq--list .faq__list { gap: var(--s-7); }
}

/* Телефон боком. Здесь шапка и так самая скромная на сайте (45% экрана
   против 77-83% у соседей), поэтому правка одна: отбивка шапки 48 → 32.
   Пары «вопрос | ответ» в этой ориентации уже стоят в строку — условие
   .faq--list от 700px ловит 852 и 932, разбор выше. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .badge + .faq__title { margin-block-start: var(--s-3); }
  .faq__head { margin-bottom: var(--s-6); }
}

@media (max-width: 640px) {
  /* Втяжка под текст вопроса тут стоила бы 68px из 335 — ответ ужимался
     до тридцати знаков в строке. Оставляем ровно левое поле карточки:
     ответ встаёт по левому краю значка, линия выравнивания есть,
     а ширина строки возвращается к норме. */
  .faq { --faq-indent: var(--s-4); }

  .faq__head { margin-bottom: var(--s-6); }
  .faq__q-link { gap: var(--s-3); padding: var(--s-3) var(--s-4); }
}