/* Blog – builds on site.css tokens */
.blog-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.blog-cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; background: var(--white); color: var(--ink); }
.blog-cats a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .blog-cats a:hover { border-color: var(--ink); } }

.post-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color var(--micro), transform 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .post-card:hover { border-color: var(--ink); transform: translateY(-2px); } }
.post-card-img { display: block; aspect-ratio: 16 / 9; background: var(--mint-2); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.post-card-body p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.post-card-cat { align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--ink-3); background: var(--mint); padding: 4px 10px; border-radius: var(--pill); }
.post-card-title { font-size: var(--fs-xl); line-height: 1.25; margin: 0; }
.post-card-title a { text-decoration: none; color: inherit; }
.post-card-title a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card-cat, .post-card-img { position: relative; z-index: 1; }
.post-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: auto; }
.page-hero .post-meta { margin-top: var(--s-4); }
.blog-empty { padding: var(--s-6); border: 1px dashed var(--grey); border-radius: var(--radius); text-align: center; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-7); font-size: var(--fs-sm); }

.post-body { min-width: 0; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body figure { margin: var(--s-6) 0; }
.post-body figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-2); }
.post-body table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-body th { background: var(--mint-2); }
.post-body blockquote { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); border-left: 4px solid var(--hi); background: var(--mint-2); border-radius: 0 var(--radius) var(--radius) 0; }
.post-body h2, .post-body h3 { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.post-cover { margin: 0 0 var(--s-6); }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-aside { display: grid; gap: var(--s-3); }
@media (min-width: 980px) { .post-aside { position: sticky; top: calc(var(--header-h, 72px) + 16px); } }
.toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--fs-sm); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.related-title { font-size: var(--fs-2xl); margin-bottom: var(--s-5); }
.blog-cta { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .blog-cta { grid-template-columns: 1.4fr 1fr; } }