/* Blog */
.blog__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-xl)}

.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}

.blog-card{display:block;border-radius:8px;overflow:hidden;background:var(--color-surface-raised);border:1px solid var(--color-border);transition:transform var(--duration-normal) var(--ease-out-expo),border-color var(--duration-fast)}
.blog-card:hover{transform:translateY(-4px);border-color:var(--color-border-hover)}
.blog-card__img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden}
.blog-card__img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out-expo)}
.blog-card:hover .blog-card__img{transform:scale(1.05)}
.blog-card__category{position:absolute;top:var(--space-md);left:var(--space-md);font-family:var(--font-mono);font-size:var(--text-xs);background:rgba(0,0,0,0.7);color:#fff;padding:2px 10px;border-radius:2px}
.blog-card__body{padding:var(--space-lg)}
.blog-card__date{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);display:block;margin-bottom:var(--space-sm)}
.blog-card__title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-sm);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Blog post page */
.blog-post{max-width:720px;margin:0 auto;padding:calc(var(--nav-height) + var(--space-2xl)) var(--space-xl) var(--space-2xl)}
.blog-post__back{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);transition:color var(--duration-fast)}
.blog-post__back:hover{color:var(--color-text-primary)}
.blog-post__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-lg)}
.blog-post__meta span{margin-right:var(--space-lg)}
.blog-post__title{font-size:var(--text-2xl);margin-bottom:var(--space-xl)}
.blog-post__body{font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.9}
.blog-post__body h2{font-size:var(--text-xl);color:var(--color-text-primary);margin:var(--space-xl) 0 var(--space-md)}
.blog-post__body h3{font-size:var(--text-lg);color:var(--color-text-primary);margin:var(--space-lg) 0 var(--space-sm)}
.blog-post__body p{margin-bottom:var(--space-md)}
.blog-post__body pre{background:var(--color-surface-raised);padding:var(--space-lg);border-radius:8px;overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);margin-bottom:var(--space-md);border:1px solid var(--color-border)}
.blog-post__body code{font-family:var(--font-mono);font-size:0.9em;background:var(--color-surface-raised);padding:2px 6px;border-radius:3px}
.blog-post__body pre code{background:none;padding:0}
.blog-post__nav{display:flex;justify-content:space-between;margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border)}

.blog__filter{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}
.blog__filter-btn{font-family:var(--font-mono);font-size:var(--text-xs);padding:6px 16px;border:1px solid var(--color-border);border-radius:20px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast)}
.blog__filter-btn:hover,.blog__filter-btn.active{border-color:var(--color-accent);color:var(--color-accent)}

@media(max-width:1024px){
  .blog__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .blog__grid{grid-template-columns:1fr}
  .blog-post{padding:calc(var(--nav-height) + var(--space-xl)) var(--space-lg) var(--space-xl)}
}