/* Blog Layout v0.4.0.0 — shared across all blog posts */

/* Nav */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,6,11,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.site-nav .brand{color:#4ecdc4;font-weight:800;font-size:1rem;text-decoration:none}
.site-nav .links{display:flex;gap:16px;align-items:center}
.site-nav .links a{color:#8899aa;text-decoration:none;font-size:0.85rem;transition:color 0.2s}
.site-nav .links a:hover{color:#e0e7ef}
.site-nav .links a.active{color:#4ecdc4}

/* Banner */
.post-banner{width:100%;height:280px;background:linear-gradient(135deg,#0a1628,#0f2a3f,#0a1628);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:48px}
.post-banner::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 180 Q300 100 600 160 T1200 140 V280 H0Z' fill='rgba(78,205,196,0.05)'/%3E%3Cpath d='M0 200 Q400 140 800 180 T1200 160 V280 H0Z' fill='rgba(78,205,196,0.03)'/%3E%3C/svg%3E") center/cover}
.post-banner .banner-content{position:relative;z-index:1;text-align:center;padding:24px;max-width:700px}
.post-banner .banner-tag{display:inline-block;background:rgba(78,205,196,0.15);color:#4ecdc4;padding:4px 14px;border-radius:20px;font-size:0.78rem;font-weight:600;margin-bottom:12px}
.post-banner h1{font-size:1.8rem;font-weight:900;line-height:1.4;color:#e0e7ef}

/* Blog layout with sidebar */
.blog-container{max-width:1100px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1fr 300px;gap:40px}

/* Article */
.blog-article{max-width:720px}
.blog-article .meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:32px;color:#8899aa;font-size:0.85rem}
.blog-article h2{font-size:1.3rem;font-weight:800;margin-top:48px;margin-bottom:16px;color:#4ecdc4}
.blog-article h3{font-size:1.1rem;font-weight:700;margin-top:32px;margin-bottom:12px;color:#fca311}
.blog-article p{color:#b0bcc8;font-size:1rem;margin-bottom:20px;line-height:1.9}
.blog-article strong{color:#e0e7ef}
.blog-article blockquote{border-left:3px solid #fca311;padding:16px 24px;margin:32px 0;background:rgba(252,163,17,0.04);border-radius:0 12px 12px 0}
.blog-article blockquote p{color:#e0e7ef;font-style:italic;margin:0}

/* Tags */
.tag{background:rgba(78,205,196,0.12);color:#4ecdc4;padding:2px 10px;border-radius:4px;font-size:0.75rem;font-weight:600;display:inline-block}
.tag.gold{background:rgba(252,163,17,0.12);color:#fca311}

/* CTA Box */
.cta-box{background:rgba(78,205,196,0.06);border:1px solid rgba(78,205,196,0.2);border-radius:16px;padding:32px;text-align:center;margin-top:48px}
.cta-box a.btn{display:inline-block;background:#4ecdc4;color:#06060b;padding:14px 32px;border-radius:10px;text-decoration:none;font-weight:700}

/* Sidebar */
.blog-sidebar{position:sticky;top:80px;align-self:start}
.sidebar-section{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:20px;margin-bottom:20px}
.sidebar-section h4{font-size:0.8rem;font-weight:700;color:#4ecdc4;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sidebar-section a{display:block;color:#8899aa;text-decoration:none;font-size:0.85rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);transition:color 0.2s}
.sidebar-section a:hover{color:#e0e7ef}
.sidebar-section a:last-child{border-bottom:none}

/* Category badges */
.cat-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.cat-item:last-child{border-bottom:none}
.cat-item .name{color:#8899aa;font-size:0.85rem}
.cat-item .count{background:rgba(78,205,196,0.1);color:#4ecdc4;padding:1px 8px;border-radius:10px;font-size:0.72rem;font-weight:600}

/* Tag cloud (taxonomy) */
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag-cloud a{color:#8899aa;text-decoration:none;padding:3px 10px;border:1px solid rgba(255,255,255,0.08);border-radius:4px;transition:all 0.2s}
.tag-cloud a:hover{border-color:#4ecdc4;color:#4ecdc4}
.tag-cloud a.lg{font-size:0.9rem;font-weight:600;color:#e0e7ef}
.tag-cloud a.md{font-size:0.8rem}
.tag-cloud a.sm{font-size:0.72rem}

/* Related posts */
.related-posts{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.06)}
.related-posts h3{font-size:1rem;font-weight:700;color:#4ecdc4;margin-bottom:16px}
.related-card{display:block;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;margin-bottom:12px;text-decoration:none;color:inherit;transition:border 0.2s}
.related-card:hover{border-color:#4ecdc4}
.related-card .r-title{font-weight:700;font-size:0.9rem;color:#e0e7ef;margin-bottom:4px}
.related-card .r-desc{font-size:0.82rem;color:#8899aa}

/* Footer */
.site-footer{background:#050508;border-top:1px solid rgba(255,255,255,0.06);padding:60px 24px 32px;color:#556677}
.footer-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-col h5{font-size:0.8rem;font-weight:700;color:#e0e7ef;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.footer-col a{display:block;color:#8899aa;text-decoration:none;font-size:0.85rem;padding:4px 0;transition:color 0.2s}
.footer-col a:hover{color:#4ecdc4}
.footer-bottom{max-width:1000px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.04);display:flex;justify-content:space-between;font-size:0.78rem;flex-wrap:wrap;gap:8px}

/* Responsive */
@media(max-width:768px){
  .blog-container{grid-template-columns:1fr}
  .blog-sidebar{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .post-banner{height:200px}
  .post-banner h1{font-size:1.4rem}
}