/* Блог slotbord.ru (выпуск 6.41 «Блог 1»). Контракт: docs/otchet-6-41/kontrakt-bloga.md,
   разделы 4–6; ТЗ блога — marketing/ux-ui/tz-blog-11-10-2026, разделы 5.1–5.3, 6.
   Подключается последним и только на /blog/**: tokens.css → site.css → pages.css → blog.css.
   Строки статей .blog-links и блок ниш .blog-niche — в pages.css (блок «6.41»): они нужны и на
   нишах, а ниши этот файл не подключают.
   Язык — главной 6.40-Л: ровный фон, белые блоки с линией 1 px без тени, цвета только --home-*
   (тёмная тема приходит сама из site.css; своё под тёмную — только смена снимков, 5.6).
   Нет: пятен свечения, стекла, размытия, ореолов, теней у карточек и снимков, полосы слева у
   заметки и цитаты, карточки в карточке, значков в цветных квадратах, анимации появления.
   Переломы: 767 px — телефон; 1024 px — только колонка содержания и сетка статьи (ТЗ блога 5.1
   п. 7, контракт 15 п. 19). Значения — токены (сторож declaration-strict-value). */

/* ── Свои размеры блога ───────────────────────────────────────────── */
.blog {
  /* ТЗ блога 5.1 п. 3: заголовок статьи — от 30 до 46 px; в шкале --home-fs-* такого нет */
  --blog-fs-h1: clamp(30px, 3.6vw, 46px);
}

/* ── Главная блога и рубрики, контракт 4.1–4.3 ───────────────────── */
/* Вкладки рубрик: ряд ссылок, переносится; текущая — чертой снизу */
.blog-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--home-sp-24); margin: var(--home-sp-32) 0; font-size: var(--home-fs-15); }
.blog .blog-tabs a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--home-text-2); font-weight: 500; text-decoration: none; }
.blog .blog-tabs a:hover { color: var(--home-ink); text-decoration: none; }
.blog .blog-tabs a[aria-current] { color: var(--home-ink); border-bottom-color: var(--home-ink); font-weight: 600; }

/* Статья вверху: одна ссылка на всю карточку; обложка 16:9 слева */
.blog-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--home-sp-32); align-items: center; margin-bottom: var(--home-sp-40); color: var(--home-text); }
.blog-top:hover { text-decoration: none; }
.blog-top:hover .blog-top__t { text-decoration: underline; text-underline-offset: 3px; }
.blog-top__img { display: block; width: 100%; height: auto; border: 1px solid var(--home-line); border-radius: var(--home-r-16); }
.blog-top__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--home-sp-10); min-width: 0; }
.blog-top__rub { font-size: var(--home-fs-13); color: var(--home-muted); }
.blog-top__t { font-family: var(--font); font-size: var(--home-fs-26); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--home-ink); text-wrap: balance; }
.blog-top__p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--home-fs-16); line-height: 1.5; color: var(--home-text); }
.blog-top__time { font-size: var(--home-fs-14); color: var(--home-muted); }

/* Строки списка: линия сверху, у последней — и снизу; обложка 160 × 90 */
.blog-rows { margin: 0; padding: 0; list-style: none; }
.blog-row { border-top: 1px solid var(--home-line-2); }
.blog-row:last-child { border-bottom: 1px solid var(--home-line-2); }
.blog-row__a { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--home-sp-24); align-items: start; padding: var(--home-sp-20) 0; color: var(--home-text); }
.blog-row__a:hover { text-decoration: none; }
.blog-row__a:hover .blog-row__t { text-decoration: underline; text-underline-offset: 3px; }
.blog-row__img { display: block; width: 100%; height: auto; border: 1px solid var(--home-line); border-radius: var(--home-r-10); }
.blog-row__body { display: flex; flex-direction: column; gap: var(--home-sp-4); min-width: 0; }
.blog-row__rub { font-size: var(--home-fs-13); color: var(--home-muted); }
.blog-row__t { font-family: var(--font); font-size: var(--home-fs-19); font-weight: 600; line-height: 1.3; color: var(--home-ink); }
.blog-row__p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--home-fs-15); line-height: 1.45; color: var(--home-text); }
.blog-row__time { font-size: var(--home-fs-13); color: var(--home-muted); }

/* Пагинация и лента */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--home-sp-12); margin-top: var(--home-sp-32); }
.blog .blog-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--home-sp-18); border: 1px solid var(--home-control-line); border-radius: var(--home-r-10); background: var(--home-surface); color: var(--home-ink); font-size: var(--home-fs-15); font-weight: 600; text-decoration: none; }
.blog .blog-pager a:hover { border-color: var(--home-ink); color: var(--home-ink); }
.blog .blog-pager a[rel="next"] { margin-left: auto; }
.blog-rss { margin-top: var(--home-sp-32); font-size: var(--home-fs-14); color: var(--home-muted); }
.blog-rss a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Статья: шапка, контракт 4.4 и 6.3 ───────────────────────────── */
.blog-art__head { max-width: 920px; }
.blog-art__meta { margin-bottom: var(--home-sp-12); font-size: var(--home-fs-14); color: var(--home-muted); }
.blog-art__h1 { font-family: var(--font-cover); font-weight: 600; font-size: var(--blog-fs-h1); line-height: 1.1; letter-spacing: -.02em; color: var(--home-ink); text-wrap: balance; }
.blog-lede { max-width: 68ch; margin-top: var(--home-sp-20); font-size: var(--home-fs-19); line-height: 1.5; color: var(--home-text); }
.blog-art__date { margin-top: var(--home-sp-16); font-size: var(--home-fs-14); color: var(--home-muted); }

/* Сетка статьи: одна колонка; с 1024 — содержание 240 слева (ниже) */
.blog-art__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--home-sp-32); }
/* Колонка текста и сам текст — 68 знаков в строке одного кегля (17), чтобы края совпадали */
.blog-art__main { min-width: 0; max-width: 68ch; font-size: var(--home-fs-17); }
.blog-cover { margin: 0 0 var(--home-sp-24); }
.blog-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--home-line); border-radius: var(--home-r-16); }

/* Содержание: колонка (≥ 1024) и свёрнутый блок над текстом (< 1024) — оба ссылками, без JS */
.blog-toc { display: none; }
.blog-toc__h { margin-bottom: var(--home-sp-12); font-size: var(--home-fs-14); font-weight: 600; color: var(--home-ink); }
.blog-toc__list { display: grid; gap: var(--home-sp-2); margin: 0; padding: 0; list-style: none; }
.blog .blog-toc__list a { display: block; padding: var(--home-sp-6) 0; font-size: var(--home-fs-14); line-height: 1.4; color: var(--home-muted); text-decoration: none; }
.blog .blog-toc__list a:hover { color: var(--home-ink); text-decoration: underline; text-underline-offset: 2px; }
.blog .blog-toc__list a[aria-current] { color: var(--home-ink); font-weight: 600; }
.blog-toc-m { margin: 0 0 var(--home-sp-8); border-top: 1px solid var(--home-line-2); border-bottom: 1px solid var(--home-line-2); }
.blog-toc-m > summary { display: flex; align-items: center; gap: var(--home-sp-12); min-height: 44px; padding: var(--home-sp-10) 0; list-style: none; cursor: pointer; font-size: var(--home-fs-15); font-weight: 600; color: var(--home-ink); }
.blog-toc-m > summary::-webkit-details-marker { display: none; }
/* Знак — как у вопросов главной (home-qa__sign) */
.blog-toc-m > summary::after { content: "+"; margin-left: auto; font-size: var(--home-fs-22); font-weight: 400; line-height: 1; color: var(--home-muted); }
.blog-toc-m[open] > summary::after { content: "−"; }
.blog-toc-m .blog-toc__list { padding-bottom: var(--home-sp-12); }
.blog-toc-m .blog-toc__list a { display: flex; align-items: center; min-height: 44px; padding: var(--home-sp-4) 0; }

/* ── Текст статьи, контракт 5 ─────────────────────────────────────── */
/* .doc из pages.css (справка) — h2, h3, списки, код; блог крупнее: 17 / 1.65 */
.blog-doc { max-width: 68ch; font-size: var(--home-fs-17); line-height: 1.65; }
/* .doc a подчёркивает ссылки текста; кнопки в карточке и финале — без черты */
.blog-doc .home-btn, .blog-doc .home-btn:hover { text-decoration: none; }

/* 5.1 Таблица: листается внутри своей области */
.blog-table { overflow-x: auto; margin: 0 0 var(--home-sp-16); }
/* Области с прокруткой вбок получают фокус с клавиатуры (таблица — tabindex, код — сам браузер) */
.blog-table:focus-visible, .blog-doc .doc__code:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 2px; }
.blog-table table { min-width: 100%; border-collapse: collapse; font-size: var(--home-fs-15); line-height: 1.45; }
.blog-table th, .blog-table td { padding: var(--home-sp-10) var(--home-sp-12); border: 1px solid var(--home-line-2); text-align: left; vertical-align: top; }
.blog-table th { font-weight: 600; color: var(--home-ink); }
.blog-doc .blog-table__hint { display: none; margin: calc(var(--home-sp-8) - var(--home-sp-16)) 0 var(--home-sp-16); font-size: var(--home-fs-13); color: var(--home-muted); }

/* 5.2 Шаги: номер — счётчик в круге 28 px */
.blog-doc .blog-steps { display: grid; gap: var(--home-sp-12); padding-left: 0; list-style: none; counter-reset: blog-step; }
.blog-steps > li { position: relative; min-height: 28px; padding-left: var(--home-sp-40); counter-increment: blog-step; }
.blog-steps > li::before {
  content: counter(blog-step); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; box-sizing: border-box; display: grid; place-items: center;
  border: 1px solid var(--home-line); border-radius: var(--r-pill); background: var(--home-control);
  font-size: var(--home-fs-14); font-weight: 600; line-height: 1; color: var(--home-ink); font-variant-numeric: tabular-nums;
}

/* 5.3 Чек-лист: строка ≥ 44 px, флажок 20 × 20 */
.blog-check { margin: 0 0 var(--home-sp-16); }
.blog-doc .blog-check__list { display: grid; gap: 0; margin: 0; padding-left: 0; list-style: none; }
.blog-check__i { display: flex; align-items: flex-start; gap: var(--home-sp-12); min-height: 44px; padding: var(--home-sp-8) 0; cursor: pointer; }
.blog-check__box { flex: none; width: 20px; height: 20px; margin: var(--home-sp-4) 0 0; accent-color: var(--home-ink); cursor: pointer; }
.blog-check__box:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 2px; }
.blog-check__i > span { min-width: 0; }
.blog-check__act, .blog-tpl__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--home-sp-12); margin-top: var(--home-sp-12); }
.blog-status { font-size: var(--home-fs-14); line-height: 1.4; color: var(--home-text-2); }

/* 5.4 Шаблон текста: белый блок с линией */
.blog-tpl { margin: 0 0 var(--home-sp-16); padding: var(--home-sp-16) var(--home-sp-20); border: 1px solid var(--home-line); border-radius: var(--home-r-12); background: var(--home-surface); }
.blog-doc .blog-tpl__t { margin: 0 0 var(--home-sp-8); font-weight: 600; color: var(--home-ink); }
.blog-tpl__body > :last-child { margin-bottom: 0; }

/* 5.5 Заметка: фон --home-control, значок 16 px в начале первой строки, без полосы слева */
.blog-note { display: flex; align-items: flex-start; gap: var(--home-sp-10); margin: 0 0 var(--home-sp-16); padding: var(--home-sp-14) var(--home-sp-16); border-radius: var(--home-r-10); background: var(--home-control); }
.blog-note__i { margin-top: var(--home-sp-6); color: var(--home-muted); }
.blog-note__t { flex: 1; min-width: 0; }
.blog-note__t > :last-child { margin-bottom: 0; }

/* 5.6 Снимок с метками: рамка без тени; метка 28 px, поле нажатия 44 px */
.blog-shot { margin: var(--home-sp-8) 0 var(--home-sp-24); }
.blog-shot__frame { position: relative; border: 1px solid var(--home-line); border-radius: var(--home-r-12); overflow: hidden; }
.blog-shot__img { display: block; width: 100%; height: auto; }
/* Тема сайта — атрибут data-theme, а не системная: медиа-запрос её не видит (15 п. 8) */
:root[data-theme="dark"] .blog-shot__img--light, :root:not([data-theme="dark"]) .blog-shot__img--dark { display: none; }
/* Обложки парами (светлая и тёмная): статья, статья вверху, строки списка — так же, как снимки */
:root[data-theme="dark"] .blog-img--light, :root:not([data-theme="dark"]) .blog-img--dark { display: none; }
.blog-shot__mark {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1;
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: var(--home-ink); color: var(--home-bg);
  font-family: var(--font); font-size: var(--home-fs-13); font-weight: 600; line-height: 1; cursor: pointer;
}
.blog-shot__mark::before { content: ""; position: absolute; inset: calc(-1 * var(--home-sp-8)); }
.site .blog-shot__mark:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 2px; }
.blog-shot__tip { position: absolute; z-index: 2; width: max-content; max-width: min(280px, calc(100% - 16px)); padding: var(--home-sp-8) var(--home-sp-12); border: 1px solid var(--home-line); border-radius: var(--home-r-10); background: var(--home-surface); font-size: var(--home-fs-14); line-height: 1.4; color: var(--home-ink); }
.blog-doc .blog-shot__list { display: grid; gap: var(--home-sp-4); margin: var(--home-sp-12) 0 0; padding-left: 0; list-style: none; font-size: var(--home-fs-15); line-height: 1.45; }
.blog-shot__cap { margin-top: var(--home-sp-8); font-size: var(--home-fs-13); line-height: 1.4; color: var(--home-muted); }

/* 5.7 Цитата источника: без полосы слева */
.blog-quote { margin: 0 0 var(--home-sp-16); }
.blog-quote blockquote { margin: 0; }
.blog-doc .blog-quote blockquote p { margin: 0; font-size: var(--home-fs-19); line-height: 1.5; color: var(--home-ink); }
.blog-quote figcaption { margin-top: var(--home-sp-8); font-size: var(--home-fs-14); color: var(--home-muted); }

/* 4.5 Карточка ниши в тексте: снимок слева, текст справа */
/* Снимок — половина карточки: в колонке 280 px подписи кадра сжимались до 5 px (проверка 6.41) */
.blog-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--home-sp-24); align-items: center; margin: var(--home-sp-24) 0 var(--home-sp-32); padding: var(--home-sp-24); border: 1px solid var(--home-line); border-radius: var(--home-r-16); background: var(--home-surface); }
.blog-card__fig { min-width: 0; }
/* Рамка снимка — радиус 12, как у снимка в тексте (ТЗ страниц 6.3) */
.blog-card__fig .blog-shot__img { border: 1px solid var(--home-line); border-radius: var(--home-r-12); }
/* Ссылка на крупный кадр вокруг картинок (ставит сборщик): без черты, фокус виден */
.blog-doc .blog-card__zoom { display: block; padding: 0; border-radius: var(--home-r-12); text-decoration: none; cursor: zoom-in; }
.blog-doc .blog-card__zoom:hover { text-decoration: none; }
.blog-doc .blog-card__zoom:hover .blog-shot__img { border-color: var(--home-control-line); }
.site .blog-card__zoom:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 2px; }
.blog-card__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.blog-doc .blog-card__t { margin: 0 0 var(--home-sp-8); font-family: var(--font); font-size: var(--home-fs-20); font-weight: 700; line-height: 1.3; color: var(--home-ink); }
.blog-doc .blog-card__p { margin: 0 0 var(--home-sp-16); font-size: var(--home-fs-16); line-height: 1.55; }

/* 4.4 Вопросы — как на главной (home-qa), ширина — колонка текста */
.blog-doc .home-qa .home-qa__a { margin: 0 0 var(--home-sp-20); }
.blog-doc .home-qa .home-qa__a > :last-child { margin-bottom: 0; }

/* 4.6 Финальный блок: белый, радиус 20, кнопки в ряд */
.blog-final { margin-top: var(--home-sp-40); padding: var(--home-sp-32); border: 1px solid var(--home-line); border-radius: var(--home-r-20); background: var(--home-surface); }
.blog-doc .blog-final > h2 { margin-top: 0; }
.blog-final__cta { display: flex; flex-wrap: wrap; gap: var(--home-sp-12); margin: var(--home-sp-24) 0 var(--home-sp-16); }
.blog-doc .home-fine { max-width: none; }
.blog-doc .home-fine p { margin: 0; }

/* 4.7–4.8 «Читайте дальше» и автор */
.blog-next { margin-top: var(--home-sp-48); }
.blog-next > h2 { margin-bottom: var(--home-sp-12); font-family: var(--font); font-size: var(--home-fs-22); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--home-ink); }
.blog-next__niche { margin-top: var(--home-sp-16); font-size: var(--home-fs-16); color: var(--home-text); }
.blog-next__niche a, .blog-author a { text-decoration: underline; text-underline-offset: 2px; }
.blog-author { margin-top: var(--home-sp-32); font-size: var(--home-fs-14); color: var(--home-muted); }

/* ── Компьютер: колонка содержания и сетка статьи (ТЗ блога 5.1 п. 7) ── */
@media (min-width: 1024px) {
  .blog-art__grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--home-sp-48); }
  .blog-toc { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
  .blog-toc-m { display: none; }
}

/* ── Телефон ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .blog-tabs { margin: var(--home-sp-24) 0; }
  .blog-top { grid-template-columns: minmax(0, 1fr); gap: var(--home-sp-16); margin-bottom: var(--home-sp-32); }
  .blog-top__t { font-size: var(--home-fs-22); }
  .blog-row__a { grid-template-columns: minmax(0, 1fr); gap: var(--home-sp-12); }
  .blog-lede { font-size: var(--home-fs-18); }
  /* Таблица уже экрана листается: ячейке своя ширина, иначе текст ломается по слову в строку.
     Первая колонка (часто «№» или короткая подпись) — по содержимому, не растягивается. */
  .blog-table th:not(:first-child), .blog-table td:not(:first-child) { min-width: 9em; }
  .blog-doc .blog-table__hint { display: block; }
  .blog-doc .blog-table[data-blog-fit] + .blog-table__hint { display: none; }
  .blog-card { grid-template-columns: minmax(0, 1fr); gap: var(--home-sp-16); }
  .blog-final { padding: var(--home-sp-24); }
  .blog-final__cta { flex-direction: column; }
  .blog-final__cta .home-btn { width: 100%; }
}

/* ── Печать, контракт 6.6 ─────────────────────────────────────────── */
@media print {
  .home-top, .footer, .home-mbar, .skip, .cookie-note, .blog-toc, .blog-toc-m, .blog-card, .blog-final__cta, .blog-next,
  [data-blog-copy], button[data-blog-print], .blog-check__act, .blog-tpl__act, .blog-shot__mark, .blog-shot__tip { display: none !important; }
  .blog .sec { padding: 0; }
  .blog .shell { max-width: none; padding: 0; }
  .blog-art__grid { display: block; }
  .blog-art__main, .blog-doc { max-width: none; }
  .blog-table { overflow: visible; }
  .blog-doc .blog-table__hint { display: none; }
  /* «Распечатать» у чек-листа: только заголовок статьи и этот чек-лист */
  :root[data-blog-printing] .blog-art__head > :not(.blog-art__h1),
  :root[data-blog-printing] .blog-art__main > :not(.blog-doc), :root[data-blog-printing] .blog-author,
  :root[data-blog-printing] .blog-doc > :not(.blog-check[data-blog-print]) { display: none !important; }
  :root[data-blog-printing] .blog-check[data-blog-print] { margin-top: var(--home-sp-24); }
}