/* ═══════════════════════════════════════════════════════════════════════
   Вопросы и ответы
   ────────────────
   Карточки во всю ширину, раскрываются по нажатию.

   ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА.

   Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы
   над разными блоками можно было работать одновременно и правки не
   затирали друг друга.

   ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ:

   1. Пиши сюда только то, что относится к этому блоку. Общее - карточки,
      тени, ритм между блоками, заголовки разделов - в 00_obshchee.css.
   2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает
      их при равной силе селектора. Но эталонные стили (css/etalon/*)
      написаны через [data-h] и [data-b] - против них пиши той же формы
      селектор или сильнее, иначе правило молча проиграет.
   3. Каждой правке - комментарий: что меняем, по чьей команде, и строка
      «Откат: …», чтобы можно было вернуть как было.
   4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них
      ссылается манифест контрольных сумм.
   5. Проверять замером на живой странице, а не на глаз.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Телефон: кегль и шаг карточек (диктовка Павла 18.08.2026) ────────

   Дословно: «Текст сделать меньше процентов на двадцать, и расстояние
   между блоками тоже меньше, как в остальных».

   Замер до правки, окно 375x812: раздел #faq - 1150 px, карточка вопроса
   89 px (вопрос ложился в три строки), кегль вопроса 15 px, ответа
   13,5 px, шаг между карточками 18 px, поля карточки 14/16 px.

   Что сделано:
     · вопрос 15 -> 12 px (минус 20 %, как и сказано), ответ 13,5 -> 12 px;
     · шаг между карточками 18 -> 10 px;
     · поля карточки 14/16 -> 10/14 px, скругление 16 -> 12 px;
     · шеврон справа 20 -> 16 px, чтобы не перевешивал мелкий вопрос.

   Ответ у нас 12 px, а не 10,8 (то есть не ровно минус 20 %): 12 px -
   нижняя граница читаемого текста на телефоне, а ответ читают целым
   абзацем, в отличие от вопроса-строки.

   ПРО СИЛУ СЕЛЕКТОРА. Мобильные размеры карточки заданы в glavnaya.css
   правилом `body.mob #faq .q[data-b]`; одного `#faq .q[data-b]` мало -
   правило молча проиграет. Поэтому у каждого правила два селектора:
   с `body.mob` (телефон, класс вешает js/etalon/auto_mob.js на ширине до
   640) и без него (окно 641-760 px, где класса ещё нет).

   Компьютерный вид не затронут: всё стоит в @media (max-width: 760px).

   Откат: удалить раздел 1 целиком - телефон вернётся к 1150 px. */
@media (max-width: 760px) {

  /* 1.1. Карточка вопроса: поля и шаг между карточками.
     Откат: вернуть padding 14px 16px, margin-bottom 18px, радиус 16px. */
  #faq .q[data-b],
  body.mob #faq .q[data-b] {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  /* 1.2. Вопрос: 15 -> 12 px. Откат: вернуть font-size 15px. */
  #faq .q[data-b] > summary[data-b],
  body.mob #faq .q[data-b] > summary[data-b] {
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
  }

  /* 1.3. Шеврон справа: 20 -> 16 px. Откат: вернуть 20px. */
  #faq .q[data-b] > summary[data-b]::after,
  body.mob #faq .q[data-b] > summary[data-b]::after {
    width: 16px;
    height: 16px;
  }

  /* 1.4. Ответ: 13,5 -> 12 px, отбивка от вопроса 10 -> 8 px.
     Откат: вернуть font-size 13,5px и margin-top 10px. */
  #faq .q[data-b] p[data-b],
  body.mob #faq .q[data-b] p[data-b] {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
  }
}


/* ── Кегль 13: вопросы и ответы (диктовка Павла 20.08.2026) ───────────────

   Правка из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании»:
   и вопрос, и ответ. Было 12px, стало 13px.
   Число кегля - переменная --kegl-melkij, задана в
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css

   Селекторы те же, что в разделе выше по файлу (там 12px внутри
   @media (max-width: 760px)), - правило ниже по файлу перебивает их
   порядком, !important не нужен.

   Откат: удалить раздел - вопросы и ответы вернутся к 12px.
   ─────────────────────────────────────────────────────────────────────── */
body.mob #faq .q[data-b] > summary[data-b],
body.mob #faq .q[data-b] p[data-b] {
  font-size: var(--kegl-melkij);
}