/* blog.css - styles scoped to blog listing and post pages */
@import url('/assets/css/variables.css');

.blog-list { padding: 56px 0; max-width: 900px; margin: 36px auto; }
.blog-list h1 { font-size: 2rem; margin-bottom: .75rem; color: var(--text-color); }
.blog-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.25rem; }
.blog-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .28s var(--ease-out-expo), box-shadow .28s var(--ease-out-expo), border-color .28s var(--ease-out-expo); }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px var(--shadow-light); border-color: var(--primary-color); }
.blog-card-content { padding: 1rem 1.25rem; min-height: 140px; display:flex; flex-direction:column; gap:.5rem; }
.blog-card-title { font-weight:700; color:var(--text-color); font-size:1.05rem; }
.blog-card-desc { color:var(--text-secondary); font-size:.95rem; line-height:1.45; flex:1 1 auto; }
.blog-card-meta { font-size:.85rem; color:var(--text-muted); }

.blog-post { max-width: 900px; margin: 36px auto; padding: 18px; }
.blog-post .post-content { background: var(--card-bg); border:1px solid var(--border); padding: 24px; border-radius: 10px; box-shadow: 0 8px 30px var(--shadow-light); }
.blog-post h1, .blog-post h2, .blog-post h3 { color: var(--text-color); margin: .8rem 0; }
.blog-post p { color: var(--text-color); line-height:1.8; margin: .85rem 0; }
.blog-post img { max-width:100%; height:auto; border-radius:8px; margin: .75rem 0; }
.blog-post pre, .blog-post code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; background: var(--bg-secondary); color: var(--text-color); padding:.6rem .8rem; border-radius:8px; overflow:auto; }
.blog-post blockquote { border-left:4px solid var(--primary-color); padding:.6rem 1rem; margin:1rem 0; background: rgba(0,0,0,0.02); color:var(--text-secondary); }

.related-posts { margin-top: 1.5rem; }
.related-posts .blog-cards { gap: .9rem; }

@media (max-width:768px) { .blog-list{padding:36px 0;} .blog-post{padding:14px;} .blog-card-content{min-height:120px;} }