.blog-page{min-height:calc(100vh - var(--nav-height));padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-12)}.blog-header{margin-bottom:var(--space-10);text-align:center}.blog-header h1{margin-bottom:var(--space-3);color:var(--color-text-100)}.blog-header p{color:var(--color-text-300);font-size:var(--text-lg)}.blog-posts{display:flex;flex-direction:column;gap:var(--space-6)}.blog-card{display:block;background:var(--color-bg-800);border:1px solid var(--color-bg-700);border-radius:var(--radius-lg);transition:all var(--transition-fast);overflow:hidden}.blog-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md)}.blog-card:hover .blog-card-image img{transform:scale(1.03)}.blog-card-image{overflow:hidden;aspect-ratio:1200 / 630}.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.blog-card-body{padding:var(--space-5) var(--space-6)}.blog-card-meta{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.blog-card-date{font-size:var(--text-sm);color:var(--color-text-400)}.blog-card-category{display:inline-block;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-sm)}.blog-card-category-tutorial{background:#3b82f61a;color:#3b82f6}.blog-card-category-comparison{background:#a855f71a;color:#a855f7}.blog-card-category-thought-piece{background:#f59e0b1a;color:#f59e0b}.blog-card-category-announcement{background:#22c55e1a;color:#22c55e}.blog-card-title{margin-bottom:var(--space-2);font-size:var(--text-xl);font-weight:600;color:var(--color-text-100)}.blog-card-description{color:var(--color-text-300);line-height:var(--leading-relaxed)}.blog-empty{text-align:center;padding:var(--space-16) 0;color:var(--color-text-400)}.blog-post{min-height:calc(100vh - var(--nav-height));padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-12)}.blog-post-back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-400);margin-bottom:var(--space-6);transition:color var(--transition-fast)}.blog-post-back:hover{color:var(--color-text-100)}.blog-post-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-bg-700)}.blog-post-header h1{margin-bottom:var(--space-4);font-size:var(--text-3xl);line-height:var(--leading-tight)}.blog-post-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.blog-post-author,.blog-card-author{font-size:var(--text-sm);color:var(--color-text-200);font-weight:500}.blog-card-meta-dot{color:var(--color-text-400)}.blog-post-date,.blog-post-reading-time{font-size:var(--text-sm);color:var(--color-text-400)}.blog-post-meta-dot{color:var(--color-text-400)}.blog-post-hero{margin-bottom:var(--space-8)}.blog-post-hero img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}.blog-post-content h2{margin-top:var(--space-12);margin-bottom:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--color-bg-700)}.blog-post-content h2:first-of-type{margin-top:0;padding-top:0;border-top:none}.blog-post-content h3{margin-top:var(--space-8);margin-bottom:var(--space-3)}.blog-post-content p{margin-bottom:var(--space-4);line-height:var(--leading-relaxed)}.blog-post-content ul,.blog-post-content ol{margin-bottom:var(--space-4);padding-left:var(--space-6)}.blog-post-content li{margin-bottom:var(--space-2);color:var(--color-text-300)}.blog-post-content ul li{list-style:disc}.blog-post-content ol li{list-style:decimal}.blog-post-content .code-block{margin-bottom:var(--space-4)}.blog-post-content blockquote{margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);border-left:4px solid var(--color-primary-500);background:var(--color-bg-800);border-radius:0 var(--radius-md) var(--radius-md) 0}.blog-post-content blockquote p{margin-bottom:0;color:var(--color-text-300);font-style:italic}.blog-post-content table{width:100%;border-collapse:collapse;margin-bottom:var(--space-6);font-size:var(--text-sm)}.blog-post-content th,.blog-post-content td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-bg-700)}.blog-post-content th{color:var(--color-text-100);font-weight:600;background:var(--color-bg-800)}.blog-post-content td{color:var(--color-text-300)}.blog-post-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--space-6) 0}.blog-post-author-footer{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-bg-700)}.blog-post-author-footer img{width:48px;height:48px;border-radius:50%;margin:0}.blog-post-author-footer-info{display:flex;flex-direction:column;gap:var(--space-1)}.blog-post-author-footer-name{font-weight:600;color:var(--color-text-100);font-size:var(--text-sm)}.blog-post-author-footer-link{font-size:var(--text-sm);color:var(--color-text-400);transition:color var(--transition-fast)}.blog-post-author-footer-link:hover{color:var(--color-primary-400)}@media(max-width:768px){.blog-page,.blog-post{padding-top:calc(var(--nav-height) + var(--space-6))}.blog-post-header h1{font-size:var(--text-2xl)}.blog-card-body{padding:var(--space-4)}}
