/* Blog pages. Builds on /assets/css/styles.css (same variables and components). */
.blog-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.blog-hero h1 { max-width: 22ch; }
.blog-meta { color: #b9c6df; margin-top: .9rem; font-size: .95rem; }

.blog-article { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.blog-wrap { max-width: 780px; }
.blog-figure { margin: 0 0 2rem; }
.blog-figure img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-md); }

.blog-body { font-size: 1.06rem; line-height: 1.75; }
.blog-body > :first-child { margin-top: 0; }
.blog-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.blog-body ul, .blog-body ol { padding-left: 1.3rem; }
.blog-body blockquote { border-left: 4px solid var(--red); margin: 1.6rem 0; padding: .3rem 0 .3rem 1.2rem; color: var(--ink); }
.blog-body .compare { display: block; overflow-x: auto; }
@media (min-width: 640px) { .blog-body .compare { display: table; } }
.blog-body .decision .row { grid-template-columns: minmax(150px, .9fr) auto minmax(0, 1.1fr); }
@media (max-width: 640px) { .blog-body .decision .row { grid-template-columns: 1fr; } .blog-body .decision .arrow { display: none; } }
.blog-author { margin-top: 2.5rem; }

.blog-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 1.4rem; }
.blog-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-card a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.blog-card img { width: 100%; height: 190px; object-fit: cover; }
.blog-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.blog-card__cat { color: var(--red); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.blog-card h3 { font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.blog-card p { color: #4a5568; font-size: .95rem; line-height: 1.5; flex: 1; }
.blog-card time { color: var(--gray-500); font-size: .85rem; }

.blog-preview-banner { background: #fff4d6; color: #5c4400; border-bottom: 1px solid #f0d58a; padding: .8rem 1rem; text-align: center; font-size: .95rem; }

@media print {
  .topbar, .site-header, .drawer, .site-footer, .mobile-bar, .a11y-toggle, .a11y-panel, .cta-band, .bg-cream { display: none !important; }
}