/* Блог: список статей и страница статьи.

   Своя зона стиля, как у любого другого экрана сервиса. Цвета берутся из
   токенов `osnovy.css` (--ok, --stop, --vnimanie, --deystvie, --accent-ink):
   блог обязан выглядеть частью «Заверки», а не вставкой из чужого шаблона, и
   контраст в этих токенах уже подобран под человека, который сидит в тексте
   часами.

   Имена классов ТЕЛА статьи (vrezka, korotko, spisok-proverki, shagi,
   tablica-obertka, vopros) — контракт с авторами текстов
   (`blog/strategiya/struktura-statey.md`). Переименование класса здесь ломает
   вёрстку всех уже написанных статей разом, поэтому имена меняются только
   вместе с тем файлом. */

:root {
  /* Колонка чтения уже рабочего листа (--col: 1156px): строка длиной во весь
     экран теряется глазом на возврате к её началу. */
  --blog-kolonka: 720px;
  --blog-otstup-sm: 8px;
  --blog-otstup-md: 20px;
  --blog-otstup-lg: 32px;
  --blog-otstup-xl: 48px;
}

/* Шапка публичных страниц переехала 05.09.2026 в `publichnye.css`: она стоит
   не только на блоге (карта сайта — та же шапка), и ужимается при прокрутке. */

/* --- полоса прочитанного ----------------------------------------------- */

.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 30;
  pointer-events: none;
}

.blog-progress-lenta {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

/* --- хлебные крошки ---------------------------------------------------- */

.hlebnye-kroshki { padding: 8px 0 0; }

.hlebnye-kroshki-spisok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--fg-2);
}

.hlebnaya-kroshka a { color: var(--fg-2); text-decoration: none; }
.hlebnaya-kroshka a:hover { color: var(--ink); text-decoration: underline; }
.hlebnaya-kroshka + .hlebnaya-kroshka::before {
  content: "/";
  margin-right: 8px;
  color: var(--bd-2);
}
.hlebnaya-kroshka-tekushaya { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .hlebnye-kroshki { overflow-x: auto; }
  .hlebnye-kroshki-spisok { flex-wrap: nowrap; }
}

/* --- список статей ----------------------------------------------------- */

.blog-kartochki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--blog-otstup-md);
  margin-top: var(--blog-otstup-lg);
}

.blog-kartochka-ssylka {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  transition: border-color var(--t-pop) var(--e-out), box-shadow var(--t-pop) var(--e-out);
}

.blog-kartochka-ssylka:hover,
.blog-kartochka-ssylka:focus-visible {
  border-color: var(--accent-ring);
  box-shadow: var(--sh-2);
}

.blog-kartochka-oblozhka {
  display: block;
  width: 100%;
  /* `height: auto` обязательна: у `<img>` стоят атрибуты width/height (они
     резервируют место до загрузки и лечат прыжок вёрстки), и без сброса
     высоты соотношение сторон ниже не применяется вовсе. */
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  background: var(--sunken);
}

/* Заглушка на месте обложки: держит высоту карточки, пока картинки нет. */
.blog-kartochka-bez-oblozhki {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 40 / 21;
  background: var(--sunken);
  color: var(--bd-2);
  font-size: 44px;
  font-weight: 620;
}

.blog-kartochka-telo {
  display: flex;
  flex-direction: column;
  gap: var(--blog-otstup-sm);
  padding: var(--blog-otstup-md);
}

.blog-kartochka-zagolovok {
  font-size: 17px;
  font-weight: 620;
  line-height: 1.35;
  color: var(--ink);
}

.blog-kartochka-anons {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

.blog-kartochka-podpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-3);
}

/* --- страница статьи --------------------------------------------------- */

.blog-statya { max-width: 960px; }

.statya-shapka { margin: var(--blog-otstup-lg) 0 var(--blog-otstup-md); }

/* Обложка над оглавлением: та же картинка, что в карточке списка и в превью
   при репосте. Пропорция 40:21 задана явно, чтобы место под неё было
   зарезервировано до загрузки и текст не прыгал. */
.statya-oblozhka { margin: 0 0 var(--blog-otstup-md); }
.statya-oblozhka img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--sunken);
}

.statya-shapka h1 {
  max-width: var(--blog-kolonka);
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.2;
}

.statya-podpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
}

/* --- оглавление -------------------------------------------------------- */

.statya-soderzhanie {
  max-width: var(--blog-kolonka);
  background: var(--sunken);
  border-radius: var(--r-lg);
  padding: var(--blog-otstup-md);
  margin-bottom: var(--blog-otstup-lg);
}

.statya-soderzhanie-zagolovok {
  margin: 0 0 var(--blog-otstup-sm);
  font-size: 15px;
  font-weight: 620;
}

.statya-soderzhanie-spisok {
  margin: 0;
  padding-left: 20px;
  color: var(--fg-3);
}

.statya-soderzhanie-spisok li { padding: 4px 0; }

.statya-soderzhanie-spisok a {
  color: var(--fg-2);
  font-size: 14px;
  text-decoration: none;
  /* Подсветка активного раздела переезжает с пункта на пункт по мере чтения:
     без перехода она моргает на каждом заголовке. */
  transition: color var(--t-pop) var(--e-out);
}

.statya-soderzhanie-spisok a:hover { color: var(--ink); text-decoration: underline; }

/* Раздел, который человек читает прямо сейчас (ставит `blog.js`). Без
   скрипта оглавление остаётся обычным списком ссылок. */
.statya-soderzhanie-aktivnyy {
  color: var(--accent-ink);
  font-weight: 620;
}

/* --- тело статьи ------------------------------------------------------- */

.statya-telo {
  max-width: var(--blog-kolonka);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-1);
}

.statya-telo p { margin: 0 0 var(--blog-otstup-md); }

.statya-telo h2 {
  margin: var(--blog-otstup-xl) 0 var(--blog-otstup-md);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.25;
  /* Липкая шапка блога накрывает верх окна: без запаса переход по якорю
     оглавления приводил бы к заголовку, спрятанному под ней. Запас считается
     по УЖАТОЙ шапке — она ужимается ровно потому, что человек прокрутил вниз
     (44 px замером 05.09.2026) — плюс два слагаемых: 10 px собственного
     смещения заголовка, который в этот момент ещё появляется
     (`.poyav`, transform учитывается при переходе по якорю), 12 px самого
     сжатия (браузер считает цель перехода ДО того, как шапка ужалась) и
     просвет. Замеры 05.09.2026: низ шапки 44, верх заголовка 66 при переходе
     сверху и 78 при переходе с уже ужатой шапкой. */
  scroll-margin-top: 88px;
}

.statya-telo h3 {
  margin: var(--blog-otstup-lg) 0 12px;
  font-size: 18px;
  line-height: 1.3;
}

.statya-telo ul,
.statya-telo ol { margin: 0 0 var(--blog-otstup-md); padding-left: 24px; }
.statya-telo li { margin-bottom: 6px; }

.statya-telo figure { margin: var(--blog-otstup-lg) 0; }
.statya-telo figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.statya-telo figcaption { margin-top: 8px; font-size: 13px; color: var(--fg-3); }

/* Схема, нарисованная на холсте шире колонки чтения, внутри 720 px ужимается до
   0,75 и роняет подписи с 14 px до 10,5 — их уже не прочитать. На широком экране
   такой рисунок выходит за колонку симметрично, на узком ведёт себя как обычная
   картинка. Ширину холста берём из самого тега, отдельный класс не нужен. */
@media (1060px <= width < 1100px) {
  .statya-telo figure:has(img[width="960"]) {
    width: 960px;
    margin-left: calc((var(--blog-kolonka) - 960px) / 2);
  }
}

/* 720 px текста + 20 px просвета + минимум 240 px содержания + поля shell.
   Схемы в двух колонках остаются в пределах текста: расширение выше действует
   только ДО этого порога. Липкость нативная, без догоняющей анимации. */
@media (min-width: 1100px) {
  .blog-statya { max-width: var(--col); }

  .statya-chtenie {
    display: grid;
    grid-template-columns: var(--blog-kolonka) minmax(240px, 1fr);
    gap: var(--blog-otstup-md);
    align-items: start;
  }

  .statya-chtenie > .statya-telo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .statya-chtenie > .statya-soderzhanie {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 88px;
    max-height: calc(100dvh - 88px - 24px);
    overflow-y: auto;
    margin-bottom: 0;
    padding: var(--blog-otstup-sm);
  }
}

/* --- коротко (TL;DR) --------------------------------------------------- */

/* Прямой ответ на вопрос заголовка, до всего разбора. Его же первым цитируют
   ИИ-ответы поисковиков, поэтому блок стоит выше текста и написан
   самостоятельным куском. */
.korotko {
  background: var(--sunken);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--blog-otstup-md);
  margin: 0 0 var(--blog-otstup-lg);
}

.korotko > :first-child { margin-top: 0; }
.korotko > :last-child { margin-bottom: 0; }

.korotko p { margin-bottom: 12px; }

/* --- врезки ------------------------------------------------------------ */

/* Пять типов акцента с одной геометрией: цвет и подпись задаются двумя
   переменными на модификаторе, сам `.vrezka` их только использует. */
.vrezka {
  --vrezka-cvet: var(--accent-ink);
  position: relative;
  background: color-mix(in oklch, var(--vrezka-cvet) 7%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--vrezka-cvet) 22%, transparent);
  border-left: 3px solid var(--vrezka-cvet);
  border-radius: var(--r-md);
  padding: 14px 18px 14px 18px;
  margin: var(--blog-otstup-lg) 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Слово над врезкой даёт МОДИФИКАТОР ниже: без него `::before` не рисуется
   вовсе, и врезка без типа выглядит обычной рамкой, а не пустой подписью. */
.vrezka::before {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vrezka-cvet);
}

.vrezka > :first-child { margin-top: 0; }
.vrezka > :last-child { margin-bottom: 0; }
.vrezka p { margin-bottom: 10px; }
.vrezka ul, .vrezka ol { margin-bottom: 10px; padding-left: 20px; }

/* Подпись врезки ставится стилем, а не рукой автора: тип блока и слово над
   ним обязаны совпадать всегда. */
.vrezka-sovet { --vrezka-cvet: var(--ok); }
.vrezka-sovet::before { content: "Совет"; }

.vrezka-opasno { --vrezka-cvet: var(--stop); }
.vrezka-opasno::before { content: "Так нельзя"; }

.vrezka-vnimanie { --vrezka-cvet: var(--vnimanie); }
.vrezka-vnimanie::before { content: "Осторожно"; }

/* Пример и цитата уведены из оранжевой зоны намеренно: `--deystvie`,
   `--vnimanie` и `--accent-ink` в палитре сервиса стоят почти рядом (hue 62–68),
   и на экране «Осторожно», «Пример» и «Слова сметчика» читались одной краской —
   тип врезки переставал работать. Синий и графитовый ничего не значат в
   светофоре сервиса, поэтому тревогу они не имитируют. */
.vrezka-primer { --vrezka-cvet: oklch(0.50 0.08 250); }
.vrezka-primer::before { content: "Пример из практики"; }

.vrezka-citata { --vrezka-cvet: oklch(0.45 0.03 266); font-style: italic; }
.vrezka-citata::before { content: "Слова сметчика"; font-style: normal; }

/* --- список проверки --------------------------------------------------- */

.spisok-proverki { list-style: none; padding-left: 0; }

.spisok-proverki li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

.spisok-proverki li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* --- нумерованные шаги -------------------------------------------------- */

.shagi {
  list-style: none;
  counter-reset: shag;
  padding-left: 0;
}

.shagi > li {
  position: relative;
  counter-increment: shag;
  padding-left: 44px;
  margin-bottom: var(--blog-otstup-md);
}

.shagi > li::before {
  content: counter(shag);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 620;
}

/* --- таблицы ------------------------------------------------------------ */

/* Широкая таблица прокручивается внутри своей обёртки, а не растягивает
   страницу: у сметчика в таблице бывает шесть граф, а телефон узкий. */
.tablica-obertka {
  overflow-x: auto;
  margin: var(--blog-otstup-lg) 0;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
}

.tablica-obertka table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}

.tablica-obertka th,
.tablica-obertka td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  vertical-align: top;
}

.tablica-obertka thead th {
  background: var(--sunken);
  font-weight: 620;
  color: var(--ink);
}

.tablica-obertka tbody tr:last-child th,
.tablica-obertka tbody tr:last-child td { border-bottom: 0; }

.tablica-obertka tbody tr:nth-child(even) { background: var(--hover); }

@media (max-width: 720px) {
  /* На узком экране первая графа остаётся на месте: без неё при прокрутке
     вбок непонятно, к какой строке относится число. Первой ячейкой бывает и
     `th`, и `td` — правило берёт любую, иначе прилипание молча не работает на
     половине таблиц. Заливка обязана быть непрозрачной, иначе сквозь
     прилипшую ячейку проезжает соседняя. */
  .tablica-obertka tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
  }
  .tablica-obertka thead tr > :first-child {
    background: var(--sunken);
  }
}

/* --- вопрос-ответ ------------------------------------------------------- */

/* Чистый `<details>`: раскрывается без единой строчки скрипта и работает с
   клавиатуры из коробки. */
.vopros {
  border-bottom: 1px solid var(--bd);
}

.vopros:first-of-type { border-top: 1px solid var(--bd); }

.vopros > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}

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

.vopros > summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  color: var(--fg-3);
  transition: transform var(--t-pop) var(--e-out);
}

.vopros[open] > summary::after { transform: rotate(45deg); }

.vopros > summary {
  transition: color var(--t-pop) var(--e-out);
}

.vopros > summary:hover { color: var(--accent-ink); }

/* Ответ появляется, а не выскакивает. Анимация только у прозрачности и
   сдвига: высоту `<details>` браузер меняет сам, и трогать её значит спорить
   с ним о раскладке. Тому, кому анимация мешает, ответ открывается сразу —
   общее правило `prefers-reduced-motion` гасит длительность (`list.css`), а
   здесь анимация снимается целиком, чтобы не оставить первый кадр. */
@keyframes vopros-otvet {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.vopros[open] > :not(summary) { animation: vopros-otvet 180ms var(--e-out); }

@media (prefers-reduced-motion: reduce) {
  .vopros[open] > :not(summary) { animation: none; }
}

.vopros > :not(summary) { padding-bottom: 14px; color: var(--fg-2); }
.vopros p:last-child { margin-bottom: 0; }

/* --- призыв внутри статьи ---------------------------------------------- */

.statya-prizyv {
  max-width: var(--blog-kolonka);
  background: color-mix(in oklch, var(--accent) 8%, var(--bg));
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-lg);
  padding: var(--blog-otstup-md);
  margin: var(--blog-otstup-xl) 0 var(--blog-otstup-lg);
}

.statya-prizyv h2 { margin: 0 0 10px; font-size: 20px; }
.statya-prizyv p { margin: 0 0 var(--blog-otstup-md); color: var(--fg-2); }

.statya-prizyv-ogovorka {
  margin: 12px 0 0 !important;
  font-size: 13px;
  color: var(--fg-3);
}

/* --- подпись автора ---------------------------------------------------- */

.statya-avtor {
  display: flex;
  gap: var(--blog-otstup-md);
  max-width: var(--blog-kolonka);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  padding: var(--blog-otstup-md);
}

.statya-avtor-znak {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 620;
  letter-spacing: .04em;
}

.statya-avtor-tekst p { margin: 0 0 8px; font-size: 14px; color: var(--fg-2); }
.statya-avtor-tekst p:last-child { margin-bottom: 0; }
.statya-avtor-imya { font-size: 16px !important; font-weight: 620; color: var(--ink) !important; }
.statya-avtor-rol { color: var(--fg-3) !important; }

@media (max-width: 560px) {
  .statya-avtor { flex-direction: column; }
}

/* --- читайте также ----------------------------------------------------- */

.pohozhie-statyi {
  margin-top: var(--blog-otstup-xl);
  padding-top: var(--blog-otstup-lg);
  border-top: 1px solid var(--bd);
}

.pohozhie-statyi-zagolovok { margin: 0 0 var(--blog-otstup-md); font-size: 20px; }

.pohozhie-statyi-setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--blog-otstup-md);
}

.pohozhaya-statya {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-pop) var(--e-out), box-shadow var(--t-pop) var(--e-out);
}

.pohozhaya-statya:hover,
.pohozhaya-statya:focus-visible {
  border-color: var(--accent-ring);
  box-shadow: var(--sh-2);
}

.pohozhaya-statya-oblozhka {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  background: var(--sunken);
}

.pohozhaya-statya-telo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.pohozhaya-statya-zagolovok { font-size: 15px; font-weight: 620; line-height: 1.3; color: var(--ink); }
.pohozhaya-statya-opisanie { font-size: 13px; line-height: 1.45; color: var(--fg-3); }