/* ============================================================
   BLOG.CSS — Blog Page
   ============================================================ */

.blog-section { padding: 0 0 var(--space-4xl); }

/* Featured post */
.blog-featured { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--bg-elevated); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-md); }
.blog-featured-image { min-height: 380px; background: var(--bg-surface); overflow: hidden; }
.blog-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.blog-featured:hover .blog-featured-image img { transform: scale(1.03); }
.blog-featured-content { padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.blog-featured-content h2 { font-size: var(--fs-h2); margin: var(--space-md) 0; }
.blog-featured-content p { color: var(--text-secondary); font-size: var(--fs-body-lg); }

/* Grid */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.blog-card { background: var(--bg-elevated); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }
.blog-image { aspect-ratio: 16 / 9; background: var(--bg-surface); overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.blog-card:hover .blog-image img { transform: scale(1.04); }
.blog-content { padding: var(--space-xl); }
.blog-content h3 { font-size: var(--fs-h4); margin: var(--space-sm) 0; }
.blog-content p { font-size: var(--fs-small); color: var(--text-secondary); }

/* Meta */
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.blog-meta span + span::before { content: "\00b7"; margin-right: var(--space-sm); }

.blog-note { margin-top: var(--space-2xl); text-align: center; font-size: var(--fs-small); color: var(--text-muted); max-width: none; }
.blog-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured-image { min-height: 240px; } }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }