/* Страницы программ: "Часто спрашивают". Макет - секции V4cOuc (десктоп
   1440) и e97Tqt (телефон 390), дамп - tools/qa/мерки/дошкольники-*.

   Заголовок (кикер+h2, колонка 400px) и список вопросов стоят в одну
   строку flex (на телефоне - колонкой, gap 20). Карточка вопроса -
   родные <details>/<summary>, своя разметка - pg-faq-item.tpl. Линия под
   карточкой - box-shadow, а не border: в макете обводка не входит в
   высоту карточки (авто-высота в Figma стрok не учитывает), border
   прибавил бы лишний 1px на каждую карточку. */

.pg-faq {
  background: var(--white);
  padding-block: 100px;   /* дамп: padding [100,56], бок - .wrap */
}

.pg-faq__wrap {
  display: flex;
  align-items: flex-start;
  gap: 64px;   /* дамп: gap "Заголовок" (m7uEZh) 64 */
}

/* ─── Заголовок (кикер + h2) ─────────────────────────────────── */

.pg-faq__head {
  flex: 0 0 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;   /* дамп: gap "Копия" 14 */
}

.pg-faq__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--kicker);       /* 12 */
  line-height: 15px;              /* 12 x 1.21 (метрика Inter) */
  letter-spacing: var(--kicker-ls);
  color: var(--magenta);
}

.pg-faq__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2-sm);        /* 48 */
  line-height: 55px;              /* 48 x 1.14 */
  letter-spacing: var(--h2-sm-ls); /* -1.6px */
  color: var(--ink);
}

/* ─── Список вопросов ────────────────────────────────────────── */

.pg-faq__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Карточка - <details>, display остаётся "block" (родной, не трогаем):
   Chrome и Firefox прячут содержимое закрытой карточки (всё, что не
   <summary>) только при родном рендеринге details - стоит поставить сюда
   display:flex/grid, и скрытие перестаёт работать, ответ остаётся в
   потоке с нулевой высотой текста, но учтённым gap'ом (проверено прогоном:
   закрытая карточка держала 98px вместо 80, диф "дошкольники" - 1440 и
   390 - разошёлся из-за этого на лишние 54px по низу секции). Поэтому
   отступ между строкой вопроса и ответом - margin-top на самом ответе, а
   не gap родителя. */
.pg-faq__item {
  padding-block: 26px;   /* дамп: padding "Вопрос" [26,0] */
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent);   /* дамп: stroke #16233D14, низ */
}

.pg-faq__row {
  display: flex;
  align-items: center;
  gap: 24px;   /* дамп: gap "Строка" 24 */
  width: 100%;
  cursor: pointer;
  list-style: none;
}

.pg-faq__row::-webkit-details-marker { display: none; }
.pg-faq__row::marker { content: ""; }

.pg-faq__q {
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 28px;    /* 20 x 1.4 */
  letter-spacing: -0.4px;
  color: var(--ink);
}

/* Значок плюс/минус - два бруска псевдоэлементами (как у lucide
   plus/minus), а не svg: суб-чанк вопроса не заводит свой ассет, сайтовый
   спрайт icons.tpl - общий файл, его трогать нельзя. Открытая карточка
   прячет вертикальный брусок - остаётся "минус". */
.pg-faq__icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.pg-faq__icon::before,
.pg-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--magenta);
  border-radius: 1px;
}

.pg-faq__icon::before {   /* горизонтальный брусок - всегда виден */
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
}

.pg-faq__icon::after {    /* вертикальный брусок - виден только закрытой */
  width: 2px;
  height: 12px;
  margin: -6px 0 0 -1px;
  transition: opacity .15s ease, transform .15s ease;
}

.pg-faq__item[open] .pg-faq__icon::after {
  opacity: 0;
  transform: scale(0.4);
}

/* Ответ раскрывается плавно, а не прыгает. ::details-content - это весь
   внутренний блок <details>, кроме строки вопроса; его высоту и анимируем.
   interpolate-size: allow-keywords разрешает браузеру считать переход к
   высоте auto - без него анимировать нечего, высота меняется скачком.
   Свойство поставлено на сам блок вопросов, а не на корень страницы:
   пусть разрешение действует там, где оно нужно. Браузер, который его не
   знает, раскрывает ответ мгновенно, как раньше - ничего не ломается. */
.pg-faq {
  interpolate-size: allow-keywords;
}

.pg-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
}

.pg-faq__item[open]::details-content {
  block-size: auto;
}

.pg-faq__a {
  margin-top: 18px;   /* дамп: gap карточки "Вопрос" (открытой) 18 */
  padding-right: 120px;   /* дамп: padding "Ответ" [0,120,0,0] */
}

.pg-faq__a-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);   /* 16 */
  line-height: 28px;        /* 16 x 1.75 */
  color: var(--muted);
}

@media (max-width: 860px) {
  .pg-faq {
    padding-block: var(--section-y-m);   /* 52 */
  }

  .pg-faq__wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;   /* дамп мобильный: gap "Заголовок" 20 */
  }

  .pg-faq__head {
    flex: none;
    width: 100%;
  }

  .pg-faq__kicker {
    /* 11/ls3 - дамп, не совпадает с --m-kicker (11/ls2.4), тот же случай,
       что в hm-vozrast.css */
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 */
    letter-spacing: 3px;
  }

  .pg-faq__h2 {
    font-size: 30px;
    letter-spacing: -0.9px;
    line-height: 34px;   /* 30 x 1.14 = 34,2 */
  }

  .pg-faq__q {
    font-size: 18px;
    line-height: 25px;   /* 18 x 1.4 = 25,2 - высота строк в дампе (25 и 50) требует 25 */
    letter-spacing: -0.3px;
  }

  .pg-faq__a {
    padding-right: 0;
  }

  .pg-faq__a-text {
    font-size: 15px;
    line-height: 26px;   /* 15 x 1.75 = 26,25 - высота "Ответ" в дампе (130 = 5 x 26) требует 26 */
  }
}