/* ═══════════════════════════════════════════════════════════
   Blog / Article pages — оформление статей

   ЧТО ЗДЕСЬ БЫЛО И ПОЧЕМУ ИЗМЕНИЛОСЬ
   Файл держал собственную копию палитры и собственные правила компонентов
   (.tip, .warning, .cta, table, footer), но подключали его лишь 12 страниц из
   267 — остальные брали blog-vars.css. Получилось два расходящихся оформления
   на один корпус статей, и дефект «светлый текст на прибитом светлом фоне»
   жил именно в шве: `.warning { background: #fffbeb !important }` задавал фон,
   а цвет текста приходил из темы страницы и в графите становился светлым.

   Теперь палитра и поверхности одни на все страницы — в blog-vars.css. Здесь остаётся только то, что уникально для статей:
   мобильная адаптация под их инлайновые десктопные размеры.
   ═══════════════════════════════════════════════════════════ */

/* Палитра и поверхности — в blog-vars.css. Страницы, подключающие этот файл,
   обязаны подключать и его: @import здесь не годится, он добавляет второй
   круг загрузки и правила успевают примениться позже первой отрисовки.
   Сторож ссылок (scripts/check-static-refs.mjs) проверяет, что оба доехали. */
/* ─────────────────────────────────────────────
   Mobile adaptation (≤ 640px)
   Articles embed their own inline <style> with fixed desktop sizes
   (h1 32px, container padding 40px 24px, tables that overflow, etc.).
   These overrides use !important to win over the inline rules.
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .header { padding: 12px 16px !important; gap: 8px !important; }
  .header a { font-size: 16px !important; }
  .header span { font-size: 12px !important; }
  .container { padding: 24px 16px 48px !important; max-width: 100% !important; }
  h1 { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 12px !important; }
  .lead { font-size: 16px !important; margin-bottom: 24px !important; line-height: 1.55 !important; }
  h2 { font-size: 19px !important; margin: 28px 0 12px !important; line-height: 1.3 !important; }
  h3 { font-size: 16px !important; margin: 20px 0 8px !important; line-height: 1.35 !important; }
  p, li { font-size: 15px !important; line-height: 1.6 !important; }
  table { font-size: 13px !important; display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table th, table td { padding: 8px 10px !important; }
  .tip, .warning { padding: 14px !important; margin: 16px 0 !important; font-size: 14px !important; }
  .cta { padding: 24px 18px !important; margin: 32px 0 !important; }
  .cta h3 { font-size: 18px !important; }
  .cta p { font-size: 14px !important; }
  .cta a { padding: 12px 18px !important; font-size: 14px !important; display: inline-block !important; }
  .nav-links { gap: 8px !important; flex-wrap: wrap !important; }
  .nav-links a { padding: 10px 14px !important; font-size: 13px !important; }
  footer { padding: 20px 16px !important; font-size: 12px !important; }
  footer > div { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
  ul, ol { padding-left: 22px !important; }
  blockquote { padding: 12px 16px !important; font-size: 14px !important; margin: 16px 0 !important; }
  img, svg { max-width: 100% !important; height: auto !important; }
}