/* ── Blog listing ─────────────────────────────────────────────────────────── */

.blog-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:32px;
}

.filter-btn{
padding:8px 18px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(0,162,255,.06);
color:var(--muted);
font:inherit;
font-size:12px;
font-weight:500;
cursor:pointer;
transition:all .18s;
}

.filter-btn.active,
.filter-btn:hover{
border-color:rgba(0,162,255,.5);
background:rgba(0,162,255,.13);
color:#7fdcff;
}

.blog-status{
min-height:20px;
font-size:13px;
color:var(--muted);
margin-bottom:16px;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:22px;
}

.blog-card{
border:1px solid var(--line);
border-radius:18px;
background:linear-gradient(145deg,rgba(13,24,43,.98),rgba(7,15,28,.98));
overflow:hidden;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
transition:border-color .2s,transform .2s;
}

.blog-card:hover{
border-color:rgba(0,162,255,.45);
transform:translateY(-3px);
}

.blog-card-cover{
width:100%;
height:180px;
object-fit:cover;
display:block;
}

.blog-card-cover-placeholder{
height:180px;
background:linear-gradient(135deg,rgba(0,119,255,.15),rgba(0,212,255,.08));
display:flex;
align-items:center;
justify-content:center;
font-size:48px;
}

.blog-card-body{
padding:22px;
flex:1;
display:flex;
flex-direction:column;
gap:10px;
}

.blog-card-meta{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.blog-cat{
display:inline-flex;
padding:4px 10px;
border:1px solid rgba(0,162,255,.24);
border-radius:999px;
background:rgba(0,162,255,.08);
color:#7fdcff;
font-size:10px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
}

.blog-read{
color:var(--muted);
font-size:11px;
}

.blog-card h2{
font-size:16px;
font-weight:600;
line-height:1.4;
}

.blog-card p{
color:var(--muted);
font-size:13px;
line-height:1.65;
flex:1;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.blog-card-footer{
padding:14px 22px;
border-top:1px solid var(--line);
color:#00a2ff;
font-size:12px;
font-weight:500;
}

/* ── Article page ─────────────────────────────────────────────────────────── */

.article-shell{
padding:140px 0 80px;
min-height:100vh;
}

.article-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:48px;
align-items:start;
}

/* Article header */
.article-header{
margin-bottom:36px;
}

.article-header h1{
font-size:clamp(28px,5vw,46px);
font-weight:700;
line-height:1.15;
letter-spacing:-.03em;
margin:12px 0 16px;
}

.article-meta{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
color:var(--muted);
font-size:12px;
margin-bottom:24px;
}

.article-cover{
width:100%;
border-radius:14px;
margin-bottom:36px;
max-height:400px;
object-fit:cover;
}

/* Article body — markdown rendered */
.article-content{
font-size:15px;
line-height:1.85;
color:#d8e8f4;
}

.article-content h2{
font-size:22px;
font-weight:700;
margin:2.2em 0 .6em;
color:var(--text);
letter-spacing:-.02em;
}

.article-content h3{
font-size:17px;
font-weight:600;
margin:1.8em 0 .5em;
color:var(--text);
}

.article-content p{
margin-bottom:1.15em;
}

.article-content ul,
.article-content ol{
padding-left:1.4em;
margin-bottom:1.15em;
}

.article-content li{
margin-bottom:.4em;
}

.article-content a{
color:#00a2ff;
text-decoration:underline;
}

.article-content strong{
color:var(--text);
font-weight:600;
}

.article-content code{
background:rgba(0,162,255,.1);
border:1px solid rgba(0,162,255,.2);
border-radius:5px;
padding:2px 7px;
font-family:'Courier New',monospace;
font-size:.875em;
color:#7fdcff;
}

.article-content pre{
background:rgba(2,6,13,.8);
border:1px solid rgba(0,162,255,.18);
border-radius:12px;
padding:20px;
overflow-x:auto;
margin-bottom:1.4em;
}

.article-content pre code{
background:none;
border:none;
padding:0;
font-size:13px;
color:#b8d4e8;
}

.article-content blockquote{
border-left:3px solid #00a2ff;
padding:10px 18px;
margin:1.4em 0;
background:rgba(0,162,255,.06);
border-radius:0 8px 8px 0;
color:var(--muted);
}

.article-content hr{
border:none;
border-top:1px solid var(--line);
margin:2em 0;
}

.article-content img{
max-width:100%;
border-radius:10px;
margin:1em 0;
}

/* Dev.to canonical notice */
.canonical-notice{
display:flex;
align-items:center;
gap:10px;
padding:13px 18px;
border:1px solid rgba(0,162,255,.18);
border-radius:12px;
background:rgba(0,162,255,.05);
margin-top:36px;
font-size:12px;
color:var(--muted);
}

.canonical-notice a{ color:#00a2ff; }

/* Sidebar */
.article-sidebar{
position:sticky;
top:120px;
display:flex;
flex-direction:column;
gap:18px;
}

.sidebar-card{
border:1px solid var(--line);
border-radius:16px;
background:linear-gradient(145deg,rgba(13,24,43,.98),rgba(7,15,28,.98));
padding:22px;
font-size:13px;
line-height:1.65;
color:var(--muted);
}

.sidebar-card .eyebrow{
margin-bottom:8px;
}

.related-link{
display:block;
padding:10px 0;
border-bottom:1px solid var(--line);
color:#dce9f5;
font-size:13px;
line-height:1.45;
text-decoration:none;
}

.related-link:last-child{ border-bottom:none; }
.related-link:hover{ color:#00a2ff; }

.article-loading{
color:var(--muted);
padding:60px 0;
text-align:center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media(max-width:900px){
.article-layout{
grid-template-columns:1fr;
}
.article-sidebar{
position:static;
}
}

@media(max-width:520px){
.blog-grid{
grid-template-columns:1fr;
}
}