/* Blog styling (moved to assets/css/blog.css) */

:root {
	--blog-max-width: 960px;
	--blog-gap: 1.75rem;
	--blog-card-bg: #ffffff;
	--blog-card-border: #e2e5e9;
	--blog-card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
	--blog-text-muted: #555;
	--blog-accent: #0d62ff;
	--blog-radius: 10px;
	--blog-transition: .18s cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark) {
	:root {
		--blog-card-bg: #1f1f22;
		--blog-card-border: #2a2d32;
		--blog-card-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
		--blog-text-muted: #aaa;
	}
}

.blog-container { padding-top: 2rem; padding-bottom: 4rem; max-width: var(--blog-max-width); margin:0 auto; }
.blog-grid, .grid.blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: var(--blog-gap); margin: 2rem auto 3rem; max-width: var(--blog-max-width); padding: 0 var(--blog-gap); }
.post-card { border: 1px solid var(--blog-card-border); border-radius: var(--blog-radius); background:var(--blog-card-bg); display:flex; flex-direction:column; position:relative; box-shadow: var(--blog-card-shadow); overflow:hidden; transition: transform var(--blog-transition), box-shadow var(--blog-transition); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 4px 18px -2px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); }
.post-card img { width:100%; height:auto; border-bottom:1px solid var(--blog-card-border); display:block; object-fit:cover; }
.post-card-body { padding: 1rem 1.1rem 1.25rem; }
.post-card h2 { font-size:1.15rem; margin:.25rem 0 .5rem; line-height:1.25; }
.post-card h2 a { text-decoration:none; color:inherit; }
.post-card h2 a:hover { color: var(--blog-accent); }
.post-card h2, .post-card h2 a { color:#111; }
@media (prefers-color-scheme: dark){ .post-card h2, .post-card h2 a { color:#fff; } }
.post-card time { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blog-text-muted); font-weight:600; display:block; margin-bottom:.35rem; }
.post-card p { font-size:.9rem; color:var(--blog-text-muted); margin:0; line-height:1.4; }
.blog-post h1 { margin-top:0; }
.blog-post .lead { font-size:1.15rem; color:var(--blog-text-muted); }
.blog-post .hero-img { max-width:100%; display:block; margin:0 auto 1rem; border-radius:6px; }
.prose { line-height:1.6; font-size:1.02rem; max-width: var(--blog-max-width); margin:0 auto 4rem; padding:0 1rem; word-break:break-word; }
.prose img { max-width:100%; height:auto; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight:600; line-height:1.25; scroll-margin-top:5rem; }
.prose h1 { font-size:2.2rem; margin:2.2rem 0 1.2rem; }
.prose h2 { font-size:1.6rem; margin:2rem 0 1rem; }
.prose h3 { font-size:1.25rem; margin:1.8rem 0 .9rem; }
.prose h4 { font-size:1.05rem; margin:1.4rem 0 .7rem; }
.prose p { margin:1rem 0; }
.prose ul, .prose ol { margin:1rem 0 1rem 1.5rem; padding:0; }
.prose li { margin:.4rem 0; }
.prose code { background: rgba(0,0,0,.06); padding:.15rem .4rem; border-radius:4px; font-size:.85em; }
@media (prefers-color-scheme: dark) { .prose code { background: rgba(255,255,255,.1); } }
.prose pre { background:#111827; color:#f3f4f6; padding:1rem; border-radius:8px; overflow:auto; font-size:.85rem; line-height:1.4; }
@media (prefers-color-scheme: light) { .prose pre { background:#f5f7fa; color:#111; } }
.prose a { color: var(--blog-accent); text-decoration:none; }
.prose a:hover { text-decoration:underline; }
.prose blockquote { margin:1.5rem 0; padding:.8rem 1rem .8rem 1.2rem; border-left:4px solid var(--blog-accent); background:rgba(0,0,0,.04); font-style:italic; }
@media (prefers-color-scheme: dark) { .prose blockquote { background: rgba(255,255,255,.05); } }
.hero, .prose .hero { margin:0 auto 2rem; max-width: var(--blog-max-width); }
.hero img, .prose .hero img { width:100%; height:auto; border-radius:14px; display:block; background:#f1f3f5; object-fit:cover; box-shadow:0 2px 12px -2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05); }
@media (prefers-color-scheme: dark) { .hero img, .prose .hero img { background:#2a2d32; } }
.lead { font-size:1.15rem; line-height:1.55; color:var(--blog-text-muted); margin:1.2rem 0 2rem; }
@media (min-width: 900px) { .lead { font-size:1.25rem; } }
.tags, .post-tags { margin-top:2rem; font-size:.85rem; color:var(--blog-text-muted); list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; }
.tag, .post-tags li { display:inline-block; margin-right:.25rem; text-decoration:none; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; background:rgba(0,0,0,.06); padding:.35rem .55rem .3rem; border-radius:6px; font-weight:600; color:#555; }
@media (prefers-color-scheme: dark){ .tag, .post-tags li { background: rgba(255,255,255,.12); color:#bbb; } }
.fade-in { animation: blogFade .5s ease; }
@keyframes blogFade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
@media (max-width: 600px) { .blog-grid { grid-template-columns:1fr; } .prose h1 { font-size:1.8rem; } .prose h2 { font-size:1.4rem; } }