/* Page-specific styles for blog.html. Fonts, nav, footer, buttons, cards
   and modals all come from assets/styles.css. */

html, body { background: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.blog-grid > p { grid-column: 1 / -1; }
.blog-card { text-decoration: none; color: var(--ink); overflow: hidden; display: block; }
.blog-card-image { height: 170px; background: var(--surface); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.blog-card-body h3 { margin: 0; font-family: var(--font-display); color: var(--brand); font-size: 18px; }
.blog-date { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.blog-back { margin-bottom: 24px; }
.blog-post { max-width: 720px; margin: 0 auto; }
.blog-post-cover { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; max-height: 380px; }
.blog-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-post h1 { font-family: var(--font-display); color: var(--brand); margin: 8px 0 20px; }
.blog-post-body { line-height: 1.8; font-size: 16px; }
.blog-post-body img { max-width: 100%; border-radius: var(--radius-sm); }
.blog-post-body p { margin: 0 0 16px; }