/* Blog listing + articles (shared by /blog/, categories and posts) */
.blog-title { max-width: 18ch; font-size: clamp(40px, 5.2vw, 76px); }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.blog-list { padding-top: 0; }
.blog-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 22px; }
.blog-card .code, .blog-card h2, .blog-card h3, .blog-card p, .blog-card .blog-meta { padding: 0 8px; }
.blog-card h2, .blog-card h3 { margin: 4px 0 0; }
.blog-card p { font-size: 15px; }
.blog-cover { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 8px; background: var(--grad-soft); }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.blog-card:hover .blog-cover img { transform: scale(1.04); }
.blog-cover i { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 25% 30%, rgba(70, 225, 255, 0.35), transparent 55%), radial-gradient(circle at 80% 80%, rgba(154, 131, 255, 0.35), transparent 55%); }
.blog-meta { margin-top: auto; font-size: 12px; color: var(--dim); }
.blog-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 48px; font-size: 13px; color: var(--muted); }
.blog-empty { max-width: 640px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.blog-empty .btn { margin-top: 8px; }

.post-narrow { max-width: 820px; }
.post-title { max-width: 22ch; }
.post-meta { margin-top: 22px; font-size: 13px; color: var(--dim); }
.post-body-sec { padding-top: 0; }
.post-cover { margin: 0 0 42px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.post-cover img { width: 100%; height: auto; }


/* day theme */
html[data-theme="light"] .blog-cover { background: linear-gradient(135deg, rgba(52, 97, 240, 0.12), rgba(10, 156, 196, 0.1)); }