/* ── Article Layout ─────────────────────────────────────────── */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    padding: 48px 0;
}
.article-featured-img {
    width: 100%; height: 420px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    margin-bottom: 32px;
}
.article-header { margin-bottom: 32px; }
.article-header .badge { margin-bottom: 14px; }
.article-title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; color: var(--blue-950); line-height: 1.2; margin: 0 0 16px; letter-spacing: -.02em; }
.article-meta { display: flex; gap: 10px; align-items: center; font-size: .875rem; color: var(--ink-500); }
.article-content { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-700); }
.article-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--blue-950); margin: 40px 0 16px; }
.article-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--blue-950); margin: 32px 0 12px; }
.article-content p { margin: 0 0 20px; }
.article-content a { color: var(--blue-700); border-bottom: 1px solid var(--blue-100); }
.article-content img { border-radius: var(--radius-md); margin: 24px 0; }
.article-content ul, .article-content ol { padding-left: 24px; margin: 0 0 20px; }
.article-content li { margin-bottom: 8px; }

/* Sidebar */
.article-sidebar .sidebar-widget { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; }
.article-sidebar .widget-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400); margin: 0 0 14px; }

/* Blog archive */
.blog-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* CTA sidebar box */
.sidebar-cta { background: linear-gradient(135deg, var(--blue-950), var(--blue-800)) !important; color: #fff; }
.sidebar-cta h4 { color: var(--yellow-400) !important; }
.sidebar-cta p { color: rgba(255,255,255,.7); font-size: .875rem; margin: 0 0 14px; font-family: var(--font-bn); }
.sidebar-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { display: none; }
    .blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blog-archive-grid { grid-template-columns: 1fr; }
}