/* ===== ARTICLE / BLOG POST STYLES ===== */
.article-hero {
  background: var(--navy);
  padding: 110px 0 64px;
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(26,111,232,0.07) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(26,111,232,0.07) 1px,transparent 1px);
  background-size:50px 50px;
}
.article-hero-inner { position:relative; max-width:780px; }
.article-tag { font-size:0.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.article-tag::before { content:''; width:24px; height:1.5px; background:var(--cyan); display:inline-block; }
.article-hero h1 { font-family:'Oswald',sans-serif; font-size:clamp(2rem,5vw,3.2rem); font-weight:700; color:var(--white); line-height:1.1; letter-spacing:-1px; margin-bottom:20px; }
.article-meta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.article-meta span { font-size:0.82rem; color:rgba(255,255,255,0.45); display:flex; align-items:center; gap:6px; }

/* Article body */
.article-wrap { display:grid; grid-template-columns:1fr 320px; gap:64px; padding:72px 0 100px; align-items:start; }
.article-content { max-width:720px; }
.article-content p { font-size:1rem; color:var(--gray-700); line-height:1.9; margin-bottom:24px; }
.article-content h2 { font-family:'Oswald',sans-serif; font-size:1.7rem; font-weight:600; color:var(--navy); margin:48px 0 18px; letter-spacing:-0.5px; padding-bottom:12px; border-bottom:2px solid var(--gray-100); }
.article-content h3 { font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:500; color:var(--navy); margin:32px 0 12px; }
.article-content ul, .article-content ol { padding-left:24px; margin-bottom:24px; }
.article-content li { font-size:0.97rem; color:var(--gray-700); line-height:1.8; margin-bottom:8px; }
.article-content ul li::marker { color:var(--blue); }
.article-content strong { color:var(--navy); font-weight:600; }
.article-content .highlight-box { background:linear-gradient(135deg,rgba(26,111,232,0.06),rgba(0,198,255,0.04)); border:1px solid rgba(26,111,232,0.15); border-left:4px solid var(--blue); border-radius:0 var(--radius) var(--radius) 0; padding:24px 28px; margin:32px 0; }
.article-content .highlight-box p { margin-bottom:0; color:var(--navy); font-weight:500; }
.article-content table { width:100%; border-collapse:collapse; margin:32px 0; font-size:0.9rem; }
.article-content th { background:var(--navy); color:var(--white); padding:12px 16px; text-align:left; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:0.5px; }
.article-content td { padding:12px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.article-content tr:hover td { background:var(--gray-50); }

/* Sidebar */
.article-sidebar { position:sticky; top:96px; display:flex; flex-direction:column; gap:24px; }
.sidebar-card { background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-xl); padding:28px 24px; }
.sidebar-card h4 { font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--navy); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); }
.sidebar-cta { background:linear-gradient(135deg,var(--navy),var(--navy-light)); border:none; }
.sidebar-cta h4 { color:var(--white); border-color:rgba(255,255,255,0.1); }
.sidebar-cta p { color:rgba(255,255,255,0.65); font-size:0.87rem; line-height:1.7; margin-bottom:20px; }
.sidebar-cta .btn { width:100%; justify-content:center; }
.toc-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.toc-list li a { font-size:0.85rem; color:var(--gray-500); transition:color 0.2s; display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
.toc-list li a::before { content:'—'; color:var(--blue); flex-shrink:0; font-size:0.75rem; margin-top:2px; }
.toc-list li a:hover { color:var(--blue); }
.related-list { display:flex; flex-direction:column; gap:14px; }
.related-item a { font-size:0.87rem; color:var(--gray-700); line-height:1.5; font-weight:500; transition:color 0.2s; }
.related-item a:hover { color:var(--blue); }
.related-item span { font-size:0.73rem; color:var(--gray-300); margin-top:3px; display:block; }

/* Back to blog */
.back-to-blog { display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--blue); margin-bottom:32px; transition:gap 0.2s; }
.back-to-blog:hover { gap:12px; }

@media(max-width:1024px){ .article-wrap { grid-template-columns:1fr; gap:40px; } .article-sidebar { position:static; } }
@media(max-width:768px){ .article-hero { padding:80px 0 48px !important; } .article-hero h1 { font-size:clamp(1.7rem,7vw,2.4rem) !important; } .article-wrap { padding:48px 0 64px !important; gap:32px !important; } .article-content h2 { font-size:1.4rem !important; margin:36px 0 14px !important; } .article-content table { display:block; overflow-x:auto; } }