/* ============================================================
   tg-method — блок описания метода печати над списком продукции.
   Страницы /product/<метод>/ (typography/typography_list.html):
   тело описания из seo_text + слот галереи + заголовок каталога.
   Подключается через {block name="new_tab_css"} в typography_showproductlist.html.
   CSS вынесен в отдельный файл специально: инлайновый <style> в контенте CMS
   вырезается WYSIWYG-редактором при пересохранении страницы.

   Токены переиспользуют бренд (см. news-blog.css .tg-article-body,
   tg-sitemap.css .tg-sitemap__block h2) — ни одного нового hex/радиуса.
   ============================================================ */
.tg-method{
  --tg-yellow:#ffce00;
  --tg-yellow-2:#fed501;
  --tg-dark:#1c1f24;
  --tg-ink:#0a0a0a;
  --tg-charcoal:#363636;
  --tg-line:#e7e8ea;
  --tg-muted:#8a8f96;
  font-family:'Manrope',Arial,sans-serif;
  margin-top:8px;
}

/* ── 4.0 Лид-абзац (мост от H1) — опц. структурный элемент ── */
.tg-method-lead{
  font-family:'Inter',Arial,sans-serif;
  font-weight:300;font-size:18px;line-height:1.6;
  color:var(--tg-charcoal);
  max-width:720px;margin:20px 0 40px;
}

/* ── 4.1 «Что такое метод» — тело статьи (= .tg-article-body) ──
   Сюда попадает seo_text из CMS (H2/H3/p/ul/ol/strong от копирайтера). */
.tg-method-body{max-width:840px;overflow-wrap:break-word;word-break:break-word}
.tg-method-body>*:first-child{margin-top:0}
.tg-method-body p{
  font-family:'Inter',Arial,sans-serif;
  font-weight:300;font-size:16px;line-height:1.75;
  color:var(--tg-charcoal);margin:0 0 24px;max-width:780px;
}
.tg-method-body h2{
  font-family:'Manrope',Arial,sans-serif;
  font-weight:700;font-size:22px;line-height:1.3;
  color:var(--tg-ink);margin:48px 0 18px;overflow-wrap:break-word;
}
.tg-method-body h3{
  font-family:'Manrope',Arial,sans-serif;
  font-weight:700;font-size:17px;line-height:1.35;
  color:var(--tg-ink);margin:28px 0 10px;overflow-wrap:break-word;
}
.tg-method-body ul,.tg-method-body ol{margin:0 0 24px;padding-left:22px;max-width:780px}
.tg-method-body li{
  font-family:'Inter',Arial,sans-serif;
  font-weight:300;font-size:16px;line-height:1.6;
  color:var(--tg-charcoal);margin-bottom:10px;
}
.tg-method-body strong,.tg-method-body b{font-weight:600;color:var(--tg-ink)}
.tg-method-body a{
  color:var(--tg-ink);text-decoration:underline;
  text-decoration-color:var(--tg-yellow);text-decoration-thickness:2px;text-underline-offset:3px;
}
.tg-method-body a:hover,.tg-method-body a:focus-visible{text-decoration-color:var(--tg-yellow-2)}
.tg-method-body img{max-width:100%;height:auto;border-radius:8px}

/* ── 4.2 «Преимущества» — брендованный список (опц. структурный элемент).
   Разметка: <ul class="tg-method-list"><li><span class="tg-method-tick">…svg…</span>…</li></ul> ── */
.tg-method-list{
  list-style:none;display:grid;grid-template-columns:1fr;
  gap:16px 32px;margin:20px 0 0;padding:0;max-width:840px;
}
.tg-method-list li{
  position:relative;padding-left:36px;
  font-family:'Inter',Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.5;
  color:var(--tg-charcoal);
}
.tg-method-list strong,.tg-method-list b{font-weight:600;color:var(--tg-ink)}
.tg-method-tick{
  position:absolute;left:0;top:2px;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--tg-yellow);
}
.tg-method-tick svg{width:12px;height:12px;display:block}

/* ── 4.3 «Когда выбирать» — условия + якорь-CTA (опц. структурный элемент) ── */
.tg-method-when ul{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  margin:16px 0 0;padding:0;max-width:680px;
}
.tg-method-when li{
  position:relative;padding-left:26px;
  font-family:'Inter',Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.5;
  color:var(--tg-charcoal);
}
.tg-method-when li::before{
  content:"";position:absolute;left:2px;top:6px;
  width:8px;height:8px;border-top:2px solid var(--tg-muted);border-right:2px solid var(--tg-muted);
  transform:rotate(45deg);
}
.tg-method-jump{
  display:inline-flex;align-items:center;min-height:44px;margin-top:20px;
  padding:9px 18px;border:1px solid var(--tg-line);border-radius:999px;background:#fff;
  font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:14px;line-height:1.2;
  color:var(--tg-dark);text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease;
}
.tg-method-jump:hover,.tg-method-jump:focus-visible{
  background:var(--tg-yellow-2);border-color:var(--tg-yellow-2);outline:none;
}

/* ── Слот галереи внутри блока: полная ширина, не узкая колонка текста ── */
.tg-method__gallery{margin:32px 0 8px;max-width:none}

/* ── 4.4 Заголовок над списком продукции (= .tg-sitemap__block h2) ── */
.tg-method__catalog-title{
  position:relative;margin:48px 0 20px;padding:0 0 14px;
  font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:20px;line-height:1.25;
  letter-spacing:-.01em;color:var(--tg-dark);border-bottom:1px solid var(--tg-line);
}
.tg-method__catalog-title::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:44px;height:3px;border-radius:3px;background:var(--tg-yellow-2);
}

/* ── Адаптив: брейкпоинты 600/960 (в такт tg-sitemap на той же странице) ── */
@media(min-width:600px){
  .tg-method-list{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .tg-method-list{gap:18px 40px}
}
@media(max-width:599px){
  .tg-method-lead{font-size:18px;margin-bottom:32px}
  .tg-method-body h2{font-size:20px;margin-top:40px}
  .tg-method-list{gap:14px}
  .tg-method__gallery{margin-top:28px}
  .tg-method__catalog-title{font-size:18px;margin-top:40px}
}

/* ── 4.5 Фиксы для списков внутри .tg-method-body (seo_text из CMS) ──
   seo_text рендерится обёрнутым в .tg-method-body: базовые .tg-method-body ul/li
   (padding-left, margin-bottom) перебивали бы бренд-списки. Возвращаем контроль
   .tg-method-list / .tg-method-when. */
.tg-method-body .tg-method-list{padding-left:0;margin:20px 0 0;max-width:840px}
.tg-method-list li,.tg-method-when li{margin-bottom:0}