/* =========================================================
   saxonov-marketing.ru — Blog (дополнение к /style.css)
   Использует токены и компоненты из основного стиля.
   Только то, чего нет в style.css: типография поста,
   чипы категорий, breadcrumbs, related grid.
   ========================================================= */

/* ─── Hero ленты блога ───────────────────────────────────── */
.blog-hero {
  padding-block: var(--section-y-lg);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.blog-hero .eyebrow { display: inline-block; margin-bottom: var(--space-3); }

.blog-hero__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  max-width: 22ch;
  margin-inline: auto;
}

.blog-hero .lead {
  margin-inline: auto;
  max-width: 60ch;
}

/* Узкая полоса-баннер про Telegram между hero и лентой постов */
.blog-tg-strip {
  background: var(--surface-sunken);
  padding-block: var(--space-4);
  border-block: 1px solid var(--border);
  text-align: center;
}

.blog-tg-strip p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: none;
}

.blog-tg-strip a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 600;
}

.blog-tg-strip a:hover {
  color: var(--accent-hover);
}

/* ─── Чипы категорий под hero ────────────────────────────── */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-8);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition);
}

.chip:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}

.chip--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-dark);
}

.chip__count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  padding: 0 var(--space-2);
  border-radius: 999px;
  line-height: 1.4;
}

.chip--active .chip__count {
  color: var(--text);
  background: var(--text-on-dark);
}

/* ─── Карточка поста: расширение .blog-card под наш список ─ */
.blog-card__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.blog-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-card__cat:hover { color: var(--accent-hover); }

.blog-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

/* ─── Страница одного поста ──────────────────────────────── */
.post {
  padding-block: var(--section-y-lg);
}

/* Лонгрид-колонка 880px (договорённость от 13.05.2026). Узкий container--narrow
   из :root остаётся 720 для других мест сайта, здесь расширяем точечно. */
.post .container--narrow {
  max-width: 880px;
}

.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin-inline: var(--space-2); color: var(--text-faint); }

.post__head {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.post__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.post__cat {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--accent-subtle);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: background var(--transition);
}

.post__cat:hover {
  background: var(--accent);
  color: var(--text-on-dark);
}

.post__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.post__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.post__meta time { font-weight: 500; }
.post__author { color: var(--text); font-weight: 500; }

/* ─── Тело поста (типография) ────────────────────────────── */
.post__body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
}

.post__body > * + * { margin-block-start: var(--space-4); }
.post__body > h2 + *, .post__body > h3 + * { margin-block-start: var(--space-3); }

.post__body h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-start: var(--space-10);
  margin-block-end: var(--space-3);
}

.post__body h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-2);
}

.post__body p,
.post__body li { max-width: 70ch; }

.post__body strong { font-weight: 700; color: var(--text); }
.post__body em { font-style: italic; }

.post__body ul,
.post__body ol { padding-inline-start: var(--space-6); }

.post__body li + li { margin-block-start: var(--space-2); }

/* ─── Эмодзи-список (🟣🔧📊 в начале каждого пункта) ──── */
.post__body ul.post__bulleted {
  list-style: none;
  padding-inline-start: 0;
}
.post__body ul.post__bulleted li {
  padding-inline-start: var(--space-1);
}
.post__body ul.post__bulleted li + li {
  margin-block-start: var(--space-3);
}

/* Reading time в шапке поста */
.post__reading { color: var(--text-muted); }

.post__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.post__body a:hover { color: var(--accent-hover); }

.post__body blockquote {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text);
}

/* ─── Inline CTA после поста ─────────────────────────────── */
.post__cta {
  margin-block-start: var(--space-16);
  padding: var(--space-10) var(--space-8);
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
  text-align: center;
}

.post__cta h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.post__cta p {
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  max-width: 50ch;
  margin-inline: auto;
}

/* ─── Блок ссылок на каналы (после CTA, перед related) ───── */
.post__channels {
  margin-block-start: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.post__channels-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
  color: var(--text);
}

.post__channels-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.post__channels-list li {
  position: relative;
  padding-left: var(--space-5);
  max-width: none;
}

.post__channels-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.post__channels-list a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.post__channels-list a:hover { color: var(--accent-hover); }

/* ─── Похожее по теме ────────────────────────────────────── */
.related {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-10);
  border-top: 1px solid var(--border);
}

.related__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

.related__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.related__item {
  display: block;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.related__item:hover {
  border-color: var(--accent);
  background: var(--bg);
  color: var(--text);
}

.related__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.related__name {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* ─── Back-link ──────────────────────────────────────────── */
.blog-back {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.blog-back a { color: var(--text-muted); }
.blog-back a:hover { color: var(--accent); }

/* ─── Длинные SEO-статьи: TL;DR, таблицы, FAQ-аккордеон, author bio ── */

/* TL;DR-блок под шапкой статьи. Визуально выделяет главный ответ для
   AI-цитирования и для пользователей, которые сканируют. */
.post__tldr {
  margin-block-end: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: none;
}

.post__tldr strong { font-weight: 700; }

/* Таблицы в теле поста (через markdown |H|H| или сырой <table>) */
.post__body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
  font-size: var(--text-sm);
}

.post__body table th,
.post__body table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.post__body table th {
  background: var(--surface);
  font-weight: 700;
}

/* FAQ-аккордеон через <details><summary>...</summary><p>...</p></details> */
.post__body details {
  margin-block: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.post__body details[open] {
  background: var(--surface);
  border-color: var(--border-strong);
}

.post__body details > summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding-right: var(--space-8);
  position: relative;
}

.post__body details > summary::-webkit-details-marker { display: none; }

.post__body details > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--transition);
}

.post__body details[open] > summary::after { content: "−"; }

.post__body details > p {
  margin-block-start: var(--space-3);
  color: var(--text);
  max-width: none;
}

/* Author bio в конце длинных статей */
.post__author-bio {
  margin-block-start: var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.post__author-bio h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
}

.post__author-bio p { margin: 0; max-width: none; }

.post__author-bio .post__author-links {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.9;
}

.post__author-bio .post__author-links a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.post__author-bio .post__author-links a:hover { color: var(--accent-hover); }

.post__author-bio .post__author-sep {
  color: var(--text-muted);
  margin: 0 0.4em;
  user-select: none;
  display: inline-block;
}