/* Стили только общего блога; основная дизайн-система — styles.css. */
.blog-shell { padding-top: 24px; padding-bottom: 56px; }
.blog-heading, .blog-note, .blog-feed, .blog-article { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-heading h1 { margin: 8px 0 20px; font: var(--font-h1); }
.blog-kicker { color: var(--color-text-2); font-size: .875rem; margin: 0 0 8px; }
.blog-lead { font-size: 1.125rem; line-height: 1.65; margin: 0 0 24px; }
.blog-note { padding: 16px 20px; background: var(--color-surface); border-left: 3px solid var(--color-border); margin-top: 0; margin-bottom: 32px; }
.blog-preview { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 28px 0; }
.blog-preview h2 { font: var(--font-h2); margin: 8px 0 16px; }
.blog-preview h2 a { text-decoration: none; }
.blog-read { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.blog-toc { padding: 24px; border: 1px solid var(--color-border); margin: 0 0 40px; }
.blog-toc h2 { font: var(--font-h3); margin: 0 0 12px; }
.blog-toc ol { margin: 0; padding-left: 24px; }
.blog-toc a { display: inline-block; padding: 8px 0; }
.blog-prose { line-height: 1.75; overflow-wrap: anywhere; }
.blog-prose section { margin: 0 0 40px; }
.blog-prose h2 { font: var(--font-h2); margin: 0 0 20px; scroll-margin-top: 150px; }
.blog-prose h3 { font: var(--font-h3); margin: 28px 0 12px; }
.blog-prose p { margin: 0 0 20px; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin: 0 0 24px; }
.blog-prose li { padding-left: 4px; margin-bottom: 10px; }
.blog-callout { padding: 20px 24px; border-left: 3px solid var(--color-accent); background: var(--color-surface); margin: 28px 0; }
.blog-callout p { margin: 8px 0 0; }
.blog-callout--muted { background: transparent; border-color: var(--color-border); }
.blog-table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.blog-table { border-collapse: collapse; width: 100%; font-size: .9375rem; line-height: 1.55; }
.blog-table caption { text-align: left; color: var(--color-text-2); padding: 0 0 12px; font-size: .875rem; }
.blog-table th, .blog-table td { text-align: left; vertical-align: top; padding: 14px 16px; border: 1px solid var(--color-border); min-width: 130px; }
.blog-table thead { background: var(--color-surface); }
.blog-table tbody th { font-weight: 600; }
.blog-prose blockquote { margin: 28px 0; padding: 8px 0 8px 24px; border-left: 3px solid var(--color-accent); }
.blog-prose blockquote p { font-family: var(--font-serif); font-size: 1.125rem; margin-bottom: 12px; }
.blog-prose blockquote footer { color: var(--color-text-2); font-size: .875rem; }
.blog-choose { padding: 24px; background: var(--color-surface); }
.blog-category-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.blog-category-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--color-bg); border: 1px solid var(--color-border); text-decoration: none; min-height: 44px; }
.blog-category-links a:hover { border-color: var(--color-accent); text-decoration: underline; }
.blog-faq details { border-top: 1px solid var(--color-border); padding: 8px 0; }
.blog-faq details:last-child { border-bottom: 1px solid var(--color-border); }
.blog-faq summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: 600; }
.blog-faq details p { margin: 8px 0 16px; }
.blog-sources { color: var(--color-text-2); font-size: .875rem; }
.blog-sources h2 { color: var(--color-text); }
.blog-back { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--color-border); }
.blog-back a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { .blog-heading h1 { font-size: 2.5rem; } }
@media (max-width: 600px) {
  .blog-shell { padding-top: 16px; padding-bottom: 32px; }
  .blog-toc, .blog-note, .blog-callout, .blog-choose { padding: 16px; }
  .blog-category-links { grid-template-columns: 1fr; }
  .blog-prose section { margin-bottom: 32px; }
}

.blog-cover { margin: 0 0 32px; }
.blog-cover picture { display: block; }
.blog-cover__image { display: block; width: 100%; height: auto; aspect-ratio: 19 / 5; object-fit: cover; background: var(--color-surface); border: 0; }
@media (max-width: 600px) { .blog-cover__image { aspect-ratio: 19 / 8; } }