/* Blog (blog.html, blog-post.html) — shares landing.css's page shell
   (.landing-page/.landing-topbar/.landing-footer, theme tokens from
   style.css) since both are public, sidebar-less pages; this file only
   adds what's actually blog-specific: the split topbar variant (logo
   left, actions right — index.html's topbar is right-only, so that
   split needs its own modifier rather than changing the shared rule),
   the post list, and the article reading view. */

.landing-topbar-split { justify-content: space-between; }
.blog-logo-link { display: flex; align-items: center; }

.blog-main {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 40px 24px 60px; box-sizing: border-box;
}
.blog-page-title { font-size: 26px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; }
.blog-page-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0 0 32px; }

.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-card {
  display: block; padding: 20px; border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blog-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.blog-card-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; display: block; }
.blog-card-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 6px; }
.blog-card-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.blog-card-excerpt { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.blog-empty { font-size: 13px; color: var(--text-secondary); }

.blog-post-main { max-width: 640px; }
.blog-back-link { display: inline-block; font-size: 13px; color: var(--accent); text-decoration: none; margin-bottom: 24px; }
.blog-back-link:hover { text-decoration: underline; }
.blog-post-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 8px; }
.blog-post-title { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 0 0 24px; line-height: 1.3; }
.blog-post-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin: 0 0 24px; display: block; }
.blog-post-body { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.blog-post-body h2 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 28px 0 8px; }
.blog-post-body p { margin: 0 0 14px; }
.blog-post-body p:last-child { margin-bottom: 0; }
.blog-post-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0 14px; display: block; }

/* Mobile content scale-up — same reasoning as landing.css's block of the
   same name (second, considerably larger pass — a first modest version
   wasn't enough on a real device). Sizing text/spacing up directly rather
   than touching the viewport meta's initial-scale. */
@media (max-width: 480px) {
  .blog-main { padding: 32px 20px 48px; }
  .blog-page-title { font-size: 28px; }
  .blog-page-subtitle { font-size: 15px; }

  .blog-card { padding: 22px; }
  .blog-card-title { font-size: 20px; }
  .blog-card-excerpt { font-size: 15px; line-height: 1.55; }
  .blog-card-meta { font-size: 12px; }

  .blog-back-link { font-size: 14px; }
  .blog-post-title { font-size: 28px; }
  .blog-post-body { font-size: 17px; line-height: 1.65; }
  .blog-post-body h2 { font-size: 18px; }
}