/* LLMCASE v4 — статья журнала «Нейрокейсы» (12.10.2026). Подключается после v4.css.
   Разметку статьи даёт blog-render.js (классы blog-*), её не меняем: этот файл только одевает её в токены v4.
   Сборка страниц из готовых статей — design/v4/build-article.js. ⛔ Отступы только из шкалы --s-*, инлайн-стилей нет.
   Колонка чтения 720: 18 px текста при ~70 знаках в строке. */

.lc-art { padding: var(--s48) 0 var(--s96); }
.blog-wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gut); box-sizing: content-box; overflow-wrap: break-word; }   /* длинные ссылки и коды в тексте переносятся, а не вылезают за край телефона */

/* ── Шапка статьи ── */
.blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); margin-bottom: var(--s32); font-size: 14px; line-height: 1.4; color: var(--faint); }
.blog-breadcrumb a { color: var(--muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--acc); }
.blog-breadcrumb-sep { color: var(--line-strong); }
.blog-breadcrumb-current { color: var(--faint); }
.blog-rubric-row { display: flex; flex-wrap: wrap; gap: var(--s8); }
.case-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s12); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--acc); background: var(--acc-soft); text-decoration: none; }
.case-tag.green, .case-tag.teal { color: var(--pos); background: var(--pos-bg); }
.case-tag.orange, .case-tag.red { color: var(--warn); background: var(--warn-bg); }
.lc .blog-article-head h1 { margin-top: var(--s16); font-size: 44px; line-height: 1.15; font-weight: 500; letter-spacing: -.025em; color: var(--ink-2); text-wrap: balance; }
.blog-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); margin-top: var(--s16); font-size: 15px; color: var(--muted); }
.blog-article-meta-dot { color: var(--line-strong); }
.blog-cover, .blog-cover-news { display: block; width: 100%; height: auto; margin: var(--s32) 0; border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-cover { aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Короткий вывод и оглавление ── */
.blog-tldr { margin: 0 0 var(--s24); padding: var(--s24); border-radius: var(--r-card); background: var(--ground); font-size: 17px; line-height: 1.6; color: var(--ink); }
.blog-tldr-label, .blog-toc-label, .blog-meaning-label, .blog-cta-top-eyebrow { margin-bottom: var(--s8); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--acc); }
.blog-toc { margin: 0 0 var(--s48); padding: var(--s24); border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-toc-label { color: var(--muted); }
.lc .blog-toc ol { display: grid; gap: var(--s8); padding-left: var(--s24); list-style: decimal; color: var(--faint); }
.blog-toc a { font-size: 16px; line-height: 1.45; color: var(--ink-2); text-decoration: none; }
.blog-toc a:hover { color: var(--acc); }

/* ── Текст ── */
.blog-article { font-size: 18px; line-height: 1.7; color: var(--ink); }
.lc .blog-article p { margin: 0 0 var(--s24); }
.lc .blog-article h2 { max-width: none; margin: var(--s48) 0 var(--s16); font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; color: var(--ink-2); scroll-margin-top: calc(var(--head-h) + var(--s24)); }
.lc .blog-article h3 { margin: var(--s32) 0 var(--s12); font-size: 21px; line-height: 1.35; font-weight: 600; color: var(--ink-2); }
.lc .blog-article ul, .lc .blog-article ol:not([class]) { display: grid; gap: var(--s8); margin: 0 0 var(--s24); padding-left: var(--s24); }
.lc .blog-article ul { list-style: disc; }
.lc .blog-article ol:not([class]) { list-style: decimal; }
.blog-article li::marker { color: var(--acc); }
.blog-article strong { font-weight: 600; color: var(--ink-2); }
.blog-article a { color: var(--acc); text-decoration: underline; text-decoration-color: rgba(58, 61, 212, .3); text-underline-offset: 3px; }
.blog-article a:hover { text-decoration-color: var(--acc); }
.blog-article code { padding: 0 var(--s4); border-radius: var(--s4); background: var(--ground); font-size: .9em; }
.blog-article blockquote { margin: var(--s32) 0; padding: var(--s16) var(--s24); border-left: 3px solid var(--acc); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--ground); font-size: 17px; line-height: 1.6; }
.lc .blog-article blockquote p:last-child { margin-bottom: 0; }

/* ── Картинки ── */
.blog-figure { margin: var(--s32) 0; }
.blog-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-figure figcaption { margin-top: var(--s12); font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ── Блоки-инфографики (фенсы ::: stat / compare / steps / key / bars / meaning / promo / reviews) ── */
.blog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s16); margin: var(--s32) 0; }
.blog-stats .blog-stat-card { display: flex; flex-direction: column; gap: var(--s8); padding: var(--s24); border-radius: var(--r-card); background: var(--ground); }
.blog-stat-value, .blog-stat-val { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--acc); }
.blog-stat-label { font-size: 15px; line-height: 1.45; color: var(--ink); }
/* старая разметка статистики (до фенсов): карточки в столбик, цифра слева */
.blog-stat-row { display: grid; gap: var(--s16); margin: var(--s32) 0; }
.blog-stat-row .blog-stat-card { display: flex; align-items: flex-start; gap: var(--s24); padding: var(--s24); border-radius: var(--r-card); background: var(--ground); }
.blog-stat-row .blog-stat-val { flex: none; min-width: 120px; }
.blog-stat-body { display: grid; gap: var(--s4); }
.blog-stat-row .blog-stat-label { font-weight: 600; color: var(--ink-2); }
.blog-stat-source { font-size: 13px; color: var(--muted); }
.blog-article .blog-stat-source a { color: var(--muted); }

.blog-compare { margin: var(--s32) 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; font-size: 16px; line-height: 1.5; }
.blog-cmp-head, .blog-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.blog-cmp-head { background: var(--ground); font-size: 14px; font-weight: 600; color: var(--muted); }
.blog-cmp-head .blog-cmp-b { color: var(--acc); }
.blog-cmp-row { border-top: 1px solid var(--line-soft); }
.blog-cmp-a, .blog-cmp-b { padding: var(--s16) var(--s24); min-width: 0; }
.blog-cmp-a { color: var(--muted); }
.blog-cmp-b { color: var(--ink-2); }
.blog-cmp-row .blog-cmp-b { border-left: 1px solid var(--line-soft); }

.lc .blog-steps { display: grid; gap: var(--s12); margin: var(--s32) 0; padding: 0; list-style: none; }
.blog-step { display: flex; align-items: flex-start; gap: var(--s16); padding: var(--s16) var(--s24); border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-step-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acc-soft); font-size: 15px; font-weight: 600; color: var(--acc); }
.blog-step-body { display: grid; gap: var(--s4); padding-top: var(--s4); }
.blog-step-title { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
.blog-step-desc { font-size: 16px; line-height: 1.5; color: var(--muted); }

.blog-key { margin: var(--s32) 0; padding: var(--s24); border-radius: var(--r-card); background: var(--acc-soft); font-size: 19px; line-height: 1.55; font-weight: 500; color: var(--ink-2); }

.blog-bars { display: grid; gap: var(--s12); margin: var(--s32) 0; padding: var(--s24); border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-bar-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: var(--s16); font-size: 15px; line-height: 1.4; }
.blog-bar-label { color: var(--ink); }
.blog-bar-track { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.blog-bar-fill { height: 100%; border-radius: inherit; background: var(--acc); }
.blog-bar-val { font-weight: 600; white-space: nowrap; color: var(--ink-2); }

.blog-meaning, .blog-promo { margin: var(--s32) 0; padding: var(--s24); border-radius: var(--r-card); font-size: 17px; line-height: 1.6; }
.blog-meaning { background: var(--pos-bg); }
.blog-meaning .blog-meaning-label { color: var(--pos); }
.blog-promo { background: var(--ground); }
.lc .blog-meaning p:last-child, .lc .blog-promo p:last-child { margin-bottom: 0; }

.blog-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); margin: var(--s32) 0 var(--s16); }
.blog-review-card { display: flex; flex-direction: column; gap: var(--s12); margin: 0; padding: var(--s24); border: 1px solid var(--line); border-radius: var(--r-card); }
.blog-rev-stars { font-size: 16px; letter-spacing: 2px; color: #E8A317; }
.blog-rev-star-off { color: var(--line-strong); }
.blog-article .blog-rev-text { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 16px; line-height: 1.55; color: var(--ink); }
.blog-rev-author { margin-top: auto; font-size: 14px; line-height: 1.45; color: var(--muted); }
.blog-article .blog-rev-src { margin-left: var(--s4); color: var(--muted); }
.blog-article .blog-reviews-more { display: inline-flex; margin-bottom: var(--s32); font-size: 16px; font-weight: 600; text-decoration: none; }

/* ── Вопросы, автор, «читайте также» ── */
.blog-faq { margin: var(--s64) 0 var(--s48); }
.lc .blog-faq-title { margin-bottom: var(--s16); font-size: 30px; line-height: 1.25; font-weight: 500; color: var(--ink-2); }
.blog-faq-item { padding: var(--s24) 0; border-top: 1px solid var(--line); }
.blog-faq-item:last-child { border-bottom: 1px solid var(--line); }
.lc .blog-faq-q { margin-bottom: var(--s8); font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
.blog-faq-a { font-size: 16px; line-height: 1.6; color: var(--muted); }

.blog-author { display: flex; align-items: flex-start; gap: var(--s16); margin: var(--s48) 0; padding: var(--s24); border-radius: var(--r-lg); background: var(--ground); }
.blog-author-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--acc); font-size: 18px; font-weight: 600; color: #fff; }
.blog-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-author-avatar svg { width: 28px; height: 28px; }
.blog-author-body { display: grid; gap: var(--s4); }
.blog-author-name { display: flex; align-items: center; gap: var(--s4); font-size: 17px; font-weight: 600; color: var(--ink-2); }
.blog-author-name a { color: inherit; text-decoration: none; }
.pf-vcheck { display: inline-flex; color: var(--acc); }
.pf-vcheck svg { width: 16px; height: 16px; }
.blog-author-bio { font-size: 15px; line-height: 1.55; color: var(--muted); }
.blog-author-bio a { color: var(--acc); text-decoration: none; }

.blog-related { margin-top: var(--s48); }
.blog-related-title { margin-bottom: var(--s24); font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--ink-2); }
.blog-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
.blog-related-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.blog-related-card:hover { border-color: var(--acc); box-shadow: var(--sh); transform: translateY(-4px); }
.blog-related-thumb { display: block; aspect-ratio: 16 / 9; background: var(--ground); }
.blog-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-related-cbody { display: grid; gap: var(--s8); padding: var(--s16) var(--s24) var(--s24); }
.blog-related-ctag { font-size: 13px; font-weight: 600; color: var(--muted); }
.blog-related-ctitle { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }

/* старые CTA-блоки статьи (часть скрыта комментариями, но могут встретиться открытыми) */
.blog-cta, .blog-cta-top { margin: var(--s32) 0; padding: var(--s24); border-radius: var(--r-card); background: var(--ground); }
.blog-cta-title { margin-bottom: var(--s8); font-size: 20px; font-weight: 600; color: var(--ink-2); }
.blog-cta-text, .blog-cta-top-text { display: block; margin-bottom: var(--s16); font-size: 16px; line-height: 1.55; color: var(--muted); }
.blog-source { font-size: 14px; color: var(--muted); }

/* ── Рекламный блок внедрения внутри журнала: два входа, агент и ИИ-директор ── */
.lc-adv { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s24); margin: var(--s48) 0; padding: var(--s32); border-radius: var(--r-lg); background: var(--ink-2); color: #fff; }
.lc-adv__eye { font-size: 13px; font-weight: 600; color: var(--on-dark); }
.lc .lc-adv__t { margin-top: var(--s8); font-size: 24px; line-height: 1.3; font-weight: 500; color: #fff; }
.lc-adv__s { margin-top: var(--s8); font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.lc-adv__s a { color: #fff; }
.lc-adv__act { display: grid; gap: var(--s12); }
.lc a.lc-adv__line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.lc a.lc-adv__line:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

@media (max-width: 820px) {
  .lc-art { padding: var(--s24) 0 var(--s64); }
  .blog-breadcrumb { margin-bottom: var(--s24); }
  .lc .blog-article-head h1 { font-size: 30px; line-height: 1.2; }
  .blog-cover, .blog-cover-news { margin: var(--s24) 0; border-radius: var(--r-icon); }
  .blog-tldr, .blog-toc { padding: var(--s16); }
  .blog-toc { margin-bottom: var(--s32); }
  .blog-article { font-size: 17px; }
  .lc .blog-article h2, .lc .blog-faq-title { margin-top: var(--s32); font-size: 24px; }
  .lc .blog-article h3 { font-size: 19px; }
  .blog-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12); }
  .blog-stats .blog-stat-card, .blog-stat-row .blog-stat-card, .blog-key, .blog-meaning, .blog-promo, .blog-review-card, .blog-cta, .blog-cta-top { padding: var(--s16); }
  .blog-stat-value, .blog-stat-val { font-size: 26px; }
  .blog-stat-row .blog-stat-card { flex-direction: column; gap: var(--s8); }
  .blog-cmp-a, .blog-cmp-b { padding: var(--s12) var(--s16); font-size: 15px; }
  .blog-step { padding: var(--s16); }
  .blog-bars { padding: var(--s16); }
  .blog-bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab val" "bar bar"; gap: var(--s8) var(--s12); }
  .blog-bar-label { grid-area: lab; }
  .blog-bar-track { grid-area: bar; }
  .blog-bar-val { grid-area: val; }
  .blog-reviews, .blog-related-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s16); }
  .blog-author { margin: var(--s32) 0; padding: var(--s16); }
  .lc-adv { grid-template-columns: minmax(0, 1fr); margin: var(--s32) 0; padding: var(--s24) var(--s16); border-radius: var(--r-card); }
  .lc-adv .lc-btn { min-height: 52px; }
}
@media (max-width: 400px) { .blog-stats { grid-template-columns: minmax(0, 1fr); } }
.lc .blog-tldr p + p { margin-top: var(--s12); }

/* ── Новости: полоса выпуска (номера новостей выпуска) и переход «свежее / раньше» ── */
.dg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s16); margin: var(--s24) 0; padding: var(--s12) var(--s16); border: 1px solid var(--line); border-radius: var(--r-icon); font-size: 14px; color: var(--muted); }
.dg-strip a { text-decoration: none; }
.dg-sl a { font-weight: 600; color: var(--ink-2); }
.dg-dots { display: flex; flex-wrap: wrap; gap: var(--s4); }
.dg-dots a, .dg-dots span { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--s8); border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 13px; font-weight: 600; color: var(--muted); }
.dg-dots a:hover { border-color: var(--acc); color: var(--acc); }
.dg-dots .dg-cur { border-color: var(--acc); background: var(--acc); color: #fff; }
.dg-sall { margin-left: auto; color: var(--acc); white-space: nowrap; }
.dg-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); margin: var(--s48) 0; }
.dg-pn a { display: grid; gap: var(--s4); padding: var(--s16) var(--s24); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; transition: border-color .3s; }
.dg-pn a:hover { border-color: var(--acc); }
.dg-pn .dg-nx { grid-column: 2; text-align: right; }
.dg-pn .dg-dir { font-size: 13px; font-weight: 600; color: var(--muted); }
.dg-pn .dg-t { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
@media (max-width: 820px) {
  .dg-sall { margin-left: 0; }
  .dg-pn { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
  .dg-pn .dg-nx { grid-column: auto; text-align: left; }
}
/* четыре цифры — сеткой 2 × 2, а не 3 + 1 */
.blog-stats:has(> .blog-stat-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ══ Ритм колонки статьи — ОДНО правило на все соседства (13.10.2026, после замера: шапка→«Коротко» был 0,
   полоса выпуска→текст 24/48, текст→вопросы 64). Блоки сами себе внешних отступов больше не задают:
   зазор решает только пара «кто за кем». Внутри текста (.blog-article) ритм прежний: абзац 24, блок 32, перед h2 48/32. ══ */
:root { --art-sec: var(--s48); --art-head: var(--s32); --art-in: var(--s24); }
@media (max-width: 820px) { :root { --art-sec: var(--s32); --art-head: var(--s24); } }
.blog-wrap > * { margin-top: 0; margin-bottom: 0; }
.blog-wrap > * + * { margin-top: var(--art-sec); }                                  /* разделы страницы */
.blog-wrap > .blog-breadcrumb + * { margin-top: var(--art-head); }                     /* крошки → шапка */
.blog-wrap > .blog-article-head + * { margin-top: var(--art-head); }                   /* шапка → первый блок, есть обложка или нет */
.blog-wrap > :is(.blog-cover, .blog-cover-news, .blog-tldr, .blog-toc, .dg-strip) + :is(.blog-cover, .blog-cover-news, .blog-tldr, .blog-toc, .dg-strip) { margin-top: var(--art-in); }   /* вводная часть */
.blog-wrap > .blog-article + .blog-source { margin-top: var(--art-in); }               /* источник — подпись к тексту */
.blog-article > :first-child { margin-top: 0; }
.blog-article > :last-child { margin-bottom: 0; }
/* отзывы: ссылка «больше» на 16 под карточками, дальше обычные 32 до текста */
.blog-reviews { margin-bottom: var(--s32); }
.blog-article .blog-reviews-more { display: flex; width: fit-content; margin: calc(var(--s16) * -1) 0 var(--s32); }

/* строка «автор · дата · время»: разделитель — часть следующего пункта, не висит в конце строки */
.blog-article-meta { column-gap: var(--s8); row-gap: var(--s4); }
.blog-article-meta-dot { display: none; }
.blog-article-meta > span:not(.blog-article-meta-dot) { white-space: nowrap; }
.blog-article-meta > span:not(.blog-article-meta-dot) ~ span:not(.blog-article-meta-dot)::before { content: '·'; margin-right: var(--s8); color: var(--line-strong); }
@media (max-width: 820px) { .blog-article-meta { font-size: 14px; } }
/* телефон: «автор · дата · время» в 343 px не помещается — автор отдельной строкой, «дата · время» второй, без висящей точки */
@media (max-width: 820px) {
  .blog-article-meta > span:first-child { flex-basis: 100%; }
  .blog-article-meta > span:first-child + .blog-article-meta-dot + span::before,
  .blog-article-meta > span:first-child + span:not(.blog-article-meta-dot)::before { content: none; }
}
/* Автор под заголовком — ссылка на «Об авторе» (13.10.2026): цвет строки, акцент при наведении */
.blog-article-meta a.blog-article-author { color: inherit; text-decoration: none; }
.blog-article-meta a.blog-article-author:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }