/* ============================================================
   tg-faq.css — редизайн встраиваемого FAQ-аккордеона {faq_block}.
   Разметка/поведение: sources/template/block/faq-embed.html.
   Заменяет в этом блоке legacy /site/css/faq.css (пунктирные ссылки +
   серый tooltip-«бабл», без иконки состояния). Токены — как в
   tg-price.css / tg-gallery.css: карточка 16px, бордер #e7e8ea, Manrope,
   ink #0a0a0a, muted #5b6068, hover-подложка #fafafa.
   Компонент общий на десятках страниц ({faq_block}) — правки вносятся
   ОДИН раз здесь + в шаблоне FAQ, не поштучно на каждой странице.
   Всё скоупится под .tg-faq-embed, чтобы не задеть /faq/ (там .faq_item).
   ============================================================ */

.tg-faq-embed .tg-faq{margin:0}

/* ── Заголовок блока (Manrope 700 22px = .tg-gallery__title, БЕЗ .side-title) ── */
.tg-faq-embed .tg-faq__title{
  font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.3;
  color:#0a0a0a;margin:0 0 18px;
}

/* ── Карточка-контейнер (= контейнер table.offsetprice) ── */
.tg-faq-embed .tg-faq__list{
  background:#ffffff;border:1px solid #e7e8ea;border-radius:16px;overflow:hidden;
}
.tg-faq-embed .tg-faq__item{border-top:1px solid #e7e8ea}
.tg-faq-embed .tg-faq__item:first-child{border-top:none}

/* ── Строка вопроса — кнопка-переключатель ── */
.tg-faq-embed .tg-faq__row{
  display:flex;align-items:center;gap:16px;width:100%;
  margin:0;padding:16px 20px;background:none;border:0;text-align:left;cursor:pointer;
  font-family:'Manrope',Arial,sans-serif;
  transition:background .18s ease;
}
.tg-faq-embed .tg-faq__row:hover{background:#fafafa}
.tg-faq-embed .tg-faq__row:focus-visible{outline:2px solid #0a0a0a;outline-offset:-2px;border-radius:6px}
.tg-faq-embed .tg-faq__q{
  flex:1;font-size:15px;font-weight:600;line-height:1.4;color:#0a0a0a;
}
.tg-faq-embed .tg-faq__icon{
  flex:0 0 18px;width:18px;height:18px;color:#5b6068;
  transition:transform .28s cubic-bezier(.4,0,.2,1),color .18s ease;
}
.tg-faq-embed .tg-faq__item.is-open .tg-faq__icon{transform:rotate(180deg);color:#0a0a0a}

/* ── Панель ответа — раскрытие через grid-template-rows 0fr → 1fr (без JS-расчёта высоты) ── */
.tg-faq-embed .tg-faq__panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1),opacity .22s ease;
}
.tg-faq-embed .tg-faq__item.is-open .tg-faq__panel{grid-template-rows:1fr;opacity:1}
.tg-faq-embed .tg-faq__panel-inner{overflow:hidden;min-height:0}
.tg-faq-embed .tg-faq__a{
  margin:0;padding:0 20px 18px 20px;font-size:14px;line-height:1.6;color:#5b6068;
  max-width:64ch;
}
.tg-faq-embed .tg-faq__a p{margin:0 0 10px}
.tg-faq-embed .tg-faq__a p:last-child{margin-bottom:0}
.tg-faq-embed .tg-faq__a a{color:#0a0a0a}

/* ── Мобильный ≤639px ── */
@media(max-width:639px){
  .tg-faq-embed .tg-faq__title{font-size:18px;margin-bottom:14px}
  .tg-faq-embed .tg-faq__row{padding:14px 16px;gap:12px}
  .tg-faq-embed .tg-faq__q{font-size:14.5px}
  .tg-faq-embed .tg-faq__a{padding:0 16px 16px 16px;font-size:13.5px}
  .tg-faq-embed .tg-faq__icon{flex-basis:16px;width:16px;height:16px}
}

/* ── Reduced motion — раскрытие мгновенное ── */
@media(prefers-reduced-motion:reduce){
  .tg-faq-embed .tg-faq__panel,
  .tg-faq-embed .tg-faq__icon{transition:none}
}

/* ============================================================
   2026-07-31 - Заголовок = .page-content h2 (32px) + текст (вопрос/ответ)
   в колонку 2/3 (--tg-prose-w, brand-system #12). Рамка .tg-faq__list -
   на всю ширину, шеврон прижат к правому краю.
   ============================================================ */
.tg-faq-embed .tg-faq__title{font-size:32px;line-height:1.2}
.tg-faq-embed .tg-faq__q{max-width:var(--tg-prose-w,780px)}
.tg-faq-embed .tg-faq__icon{margin-left:auto}
.tg-faq-embed .tg-faq__a{max-width:var(--tg-prose-w,780px)}
@media(max-width:639px){
  .tg-faq-embed .tg-faq__title{font-size:32px}
}

/* ============================================================
   2026-08-01 - единый шаг между секциями (--tg-section-gap).
   .tg-faq-embed = section.content (легаси padding:30px 0 70px, main.min.css).
   Стык #4 «текст/прайс -> FAQ»: FAQ лежит в ДРУГОМ родителе (body.internal),
   а .content.typography — в .body-content-wrapper, поэтому sibling/:has
   селекторы неприменимы. Целимся в элементы напрямую: убираем нижний
   padding у .content.typography, FAQ владеет своим верхним отступом (токен).
   Стык #5 «FAQ -> следующий блок»: обнуляем padding-bottom FAQ,
   низ работает через margin-top следующего блока (margin-top-only).
   Специфичность .content.tg-faq-embed (0,2,0) перебивает section.content (0,1,1).
   ============================================================ */
.content.tg-faq-embed{ padding-top:var(--tg-section-gap,64px); padding-bottom:0; }

/* ============================================================
   BLOG-SCOPED-WIDTH-2026-08-03 — FAQ-модуль внутри СТАТЬИ БЛОГА (.tg-article):
   весь блок наследует колонку текста статьи (--tg-prose-w, левый край),
   а не полную ширину секции. На /product/* .tg-article НЕТ —
   там поведение прежнее (список во всю ширину, Q/A-текст 2/3).
   ============================================================ */
.tg-article .tg-faq-embed{ padding-left:0; padding-right:0; }
.tg-article .tg-faq-embed > .container{ max-width:none; width:100%; margin:0; padding-left:0; padding-right:0; }
.tg-article .tg-faq-embed .tg-faq{ max-width:var(--tg-prose-w, 780px); margin-inline:0; }