/* ============================================================================
   css/blog.css — стили блога: страница статьи (/blog/<slug>/) и индекс (/blog/).
   Подключается ПОСЛЕ css/styles.css и ТОЛЬКО на страницах блога — использует
   токены и компоненты лендинга (.section, .card, .btn-primary, .btn-light).
   ?v= для этого файла генератор считает сам (md5 содержимого) — руками
   бампать не нужно; ?v= для styles.css/main.js берётся из index.html.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. КОЛОНКА ЧТЕНИЯ
   container--narrow (820px) широковат для лонгрида: на 17px строка выходит
   ~95 символов. 780px даёт комфортные ~85.
--------------------------------------------------------------------------- */
.container--reading { max-width: 780px; }

/* ---------------------------------------------------------------------------
   2. ХЛЕБНЫЕ КРОШКИ (Главная → Блог → Статья)
--------------------------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--space-8); font-size: 14px; }
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
}
/* Разделитель — псевдоэлемент, а не символ в HTML: скринридер его не читает */
.breadcrumbs li + li::before { content: '/'; color: var(--text-tertiary); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--accent-blue); }
.breadcrumbs [aria-current='page'] {
  color: var(--text-primary);
  /* Длинный заголовок статьи в одну строку не влезает — обрезаем с многоточием */
  max-width: 32ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   3. ШАПКА СТАТЬИ
--------------------------------------------------------------------------- */
.article-head { margin-bottom: var(--space-8); }
.article-title {
  font-size: 32px;
  line-height: 1.18;
}
.article-meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--text-tertiary);
}
/* Лид — description из фронтматтера, крупнее основного текста */
.article-lead {
  margin-top: var(--space-4);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   4. ТЕЛО СТАТЬИ (сгенерированный из markdown HTML)
   База сбрасывает у p/h* внешние отступы — поток статьи собирается здесь
   правилом «каждому следующему элементу — отступ сверху».
--------------------------------------------------------------------------- */
.article-body {
  font-size: 17px;
  line-height: 1.7;
}
.article-body > * + * { margin-top: var(--space-4); }
.article-body > h2 { margin-top: var(--space-12); }
.article-body > h3 { margin-top: var(--space-8); }

.article-body h2 { font-size: 25px; line-height: 1.25; }
.article-body h3 { font-size: 20px; line-height: 1.3; }

/* Ссылки в тексте — с подчёркиванием: в длинном тексте цвета мало */
.article-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-blue-soft);
  transition: text-decoration-color var(--dur) var(--ease);
}
.article-body a:hover { text-decoration-color: var(--accent-blue); }

.article-body ul,
.article-body ol {
  margin: 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.article-body li::marker { color: var(--accent-blue); }

.article-body blockquote {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-soft);
  color: var(--text-secondary);
}
.article-body blockquote p + p { margin-top: var(--space-3); }

/* Код: инлайновый — светлая плашка, блочный — тёмная панель (как футер) */
.article-body code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;
  font-size: 0.88em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
}
.article-body pre {
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.article-body pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-8);
}

/* Таблицы из markdown: на узких экранах скроллятся сами, страницу не распирают */
.article-body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}
.article-body th,
.article-body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.article-body th { font-weight: 600; }

/* Схема потока заявок в статье — инлайн-SVG прямо в markdown (python-markdown
   пропускает сырой HTML-блок как есть, пост-обработка генератора его не трогает).
   Визуальный язык — готовые классы .scheme-* из styles.css (схема в #how
   лендинга): чипы, узел «Единое окно», линии — те же токены, своих цветов нет.
   Здесь только обвязка: figure, переключение вариантов на 640px и наконечники
   стрелок (на лендинге направление показывают SMIL-точки, в статье схема
   статичная — направление дают стрелки цветом линий).
   Display — ТОЛЬКО на классах вариантов: «.article-scheme svg» задаёт лишь
   width/height, иначе его специфичность (0,1,1) молча перебила бы
   display: none варианта — та же ловушка, что .how-scheme svg (CLAUDE.md). */
.article-scheme { margin: var(--space-8) 0; }
.article-scheme svg { width: 100%; height: auto; }
.article-scheme-svg--mobile { display: block; max-width: 420px; margin: 0 auto; }
.article-scheme-svg--desktop { display: none; }   /* мобайл-первый, как на лендинге */
.scheme-arrow { fill: var(--scheme-line); }
/* Вторая строка в узле схемы (пояснение под заголовком узла) */
.scheme-node-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  fill: var(--text-secondary);
  text-anchor: middle;
}
/* Сравнительная схема «поиск против нейросети» (статья про упоминания):
   обе колонки на общей подложке — сравнение читается единой картинкой;
   приглушённые подписи «сайт N» — выдача, акцентные плашки — ответ ИИ. */
.scheme-panel { fill: var(--bg-soft); }
.scheme-chip--accent { fill: var(--accent-blue-soft); stroke: var(--accent-blue); }
.scheme-label--accent { fill: var(--accent-blue); }
.scheme-label--dim { fill: var(--text-secondary); font-weight: 500; }
/* Линейка этапов со сроками (статья про регистрацию бота в MAX):
   срок под названием этапа - мельче названия и вторичным цветом, по центру плашки */
.scheme-step-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--text-secondary);
  text-anchor: middle;
}
/* Воронка записи (статья «почему клиенты не записываются»): обычные потери -
   .scheme-label--dim, главная утечка - оранжевой парой иконок (тревожный
   акцент палитры): жирная подпись + её ступень тем же цветом; цель - синий
   .scheme-chip--accent */
.scheme-loss-main { font-weight: 700; fill: var(--icon-orange-fg); }
.scheme-chip--leak {
  fill: var(--icon-orange-bg);
  stroke: var(--icon-orange-fg);
  stroke-width: 1.5;
}
/* Подпись-идея под схемой (figcaption) — аналог .how-note лендинга */
.article-scheme-note {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
}
@media (min-width: 640px) {
  .article-scheme-svg--desktop { display: block; }
  .article-scheme-svg--mobile { display: none; }
}

/* ---------------------------------------------------------------------------
   5. CTA В КОНЦЕ СТАТЬИ — мини-версия .contact-cta, ведёт в /#contact
--------------------------------------------------------------------------- */
.article-cta {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  background: var(--gradient-blue);
  border-radius: var(--radius-lg);
  color: var(--accent-on);
}
.article-cta-title {
  font-size: 24px;
  color: var(--accent-on);
}
.article-cta p {
  color: var(--accent-on);
  opacity: 0.88;
  max-width: 44ch;
}
.article-cta .btn-light { margin-top: var(--space-3); }
.article-cta :focus-visible { outline-color: var(--accent-on); }

/* Назад к списку статей */
.article-back { margin-top: var(--space-8); }
.article-back a { color: var(--text-secondary); font-weight: 600; }
.article-back a:hover { color: var(--accent-blue); }

/* ---------------------------------------------------------------------------
   6. ИНДЕКС БЛОГА (/blog/) — карточки статей на базе .card
--------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Карточка целиком — ссылка <a class="card blog-card">: премиальный ховер
   (подъём + тень) наследуется от .card. Цвет текста возвращаем из акцентного —
   база красит все <a> в --accent-blue. */
.blog-card { color: var(--text-primary); }
.blog-card:hover { color: var(--text-primary); }

.blog-card-date { font-size: 13px; color: var(--text-tertiary); }
.blog-card-title { font-size: 20px; line-height: 1.3; }
.blog-card-text {
  color: var(--text-secondary);
  font-size: 16px;
  flex: 1 1 auto;   /* описание тянется — «Читать» у всех карточек на одной линии */
}
.blog-card-more {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 15px;
}
.blog-card:hover .blog-card-more { color: var(--accent-blue-dim); }

/* ---------------------------------------------------------------------------
   7. АДАПТИВ
--------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .article-title { font-size: 40px; }
  .article-body h2 { font-size: 27px; }
  .article-cta { padding: var(--space-12) var(--space-8); }
}