/*
 * congcuseoai.com — CSS riêng /blog (index + tag), nạp qua $extraCss.
 * Chỉ dùng var(--...) từ design-tokens.css.
 */

.blog-featured {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    overflow: hidden; margin: var(--sp-6) 0 var(--sp-10); color: var(--ink); text-decoration: none;
}
.blog-featured-media { aspect-ratio: 16 / 10; background: var(--line); }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-media--empty { background: linear-gradient(135deg, var(--tint), var(--line)); }
.blog-featured-body { padding: var(--sp-7) var(--sp-8) var(--sp-7) 0; }
.blog-featured-badge {
    display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-link);
    background: var(--tint); padding: 4px 10px; border-radius: var(--r-pill);
}
.blog-featured-title { font-size: var(--fs-h2); font-weight: 800; margin: var(--sp-4) 0 var(--sp-3); line-height: 1.3; }
.blog-featured-excerpt { font-size: var(--fs-md); color: var(--muted); line-height: 1.6; margin: 0 0 var(--sp-3); }
.blog-featured-meta { font-size: var(--fs-sm); color: var(--muted-2); }

@media (max-width: 760px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-body { padding: 0 var(--sp-5) var(--sp-6); }
}