/* Стили блога. Подключаются вторым файлом после legal.css, а не вместо него:
   шапка, футер, типографика документа и токены цветов у правовых страниц и
   у статей одни и те же, и дублировать их значило бы однажды поправить
   отступ в одном месте и не поправить в другом.

   Здесь только то, чего у правовых страниц нет: список статей, подпись под
   заголовком, блоки кода и врезка с призывом в конце статьи.
   Второй файл вместо @import намеренно — @import выстраивает загрузку в
   цепочку, а два <link> браузер тянет параллельно. */

/* Только для скринридера. На лендинге такой класс объявлен инлайново, в
   legal.css его нет, а таблицам в статьях нужен caption: без него читающий
   с экрана попадает в таблицу, не зная, о чём она. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── список статей ─────────────────────────────────────────── */
.posts { margin-top: 32px; display: grid; gap: 16px; }
.post {
  display: block; padding: 22px 24px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  color: var(--fg);
}
.post:hover { text-decoration: none; border-color: var(--accent); }
.post h2 { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: -.015em; }
.post p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.post__tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}

/* ── статья ────────────────────────────────────────────────── */
/* Подпись под заголовком: дата и время чтения. Дата обязательна — статья
   про номера блоков конструктора устаревает вместе с конструктором, и
   читателю важно видеть, насколько текст свежий. */
.art__meta {
  margin-top: 14px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.art__lead { font-size: 18px; line-height: 1.6; margin-top: 24px; }

/* Код. Горизонтальная прокрутка вместо переноса: в строке подключения
   виджета перенос читается как две команды, а не как одна длинная. */
.doc pre {
  margin: 18px 0 0; padding: 16px 18px; overflow-x: auto;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.doc pre code { background: none; padding: 0; font-size: inherit; }
.doc code {
  font: .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--line-soft); padding: 1px 5px; border-radius: 4px;
}

/* Нумерованные шаги */
.steps { margin-top: 24px; padding-left: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative; margin-top: 20px; padding-left: 42px; counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent);
  font-size: 14px; font-weight: 700;
}
.steps h3 { margin: 0; font-size: 16px; }

/* ── призыв в конце статьи ─────────────────────────────────── */
.cta-box {
  margin-top: 48px; padding: 26px 28px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
}
.cta-box h2 { margin: 0; font-size: 19px; }
.cta-box p { margin-top: 10px; font-size: 15px; }
.cta-box .btn {
  display: inline-block; margin-top: 18px; padding: 11px 20px;
  background: var(--accent); color: var(--accent-fg);
  border-radius: 9px; font-size: 15px; font-weight: 600;
}
.cta-box .btn:hover { text-decoration: none; opacity: .9; }

/* Соседняя статья внизу */
.next { margin-top: 32px; font-size: 15px; color: var(--muted); }

@media print {
  .cta-box, .next { display: none; }
}