/* Blog: index, category/tag archives, single post. Reuses design tokens from style.css. */

.blog-hero{ background:var(--ink); color:#fff; padding: calc(var(--topbar-h) + var(--header-h) + 56px) 0 56px; }
.blog-hero .container{ max-width: 900px; text-align:center; }
.blog-hero .eyebrow{ justify-content:center; color:#FFD9AE; }
.blog-hero h1{ color:#fff; font-size:clamp(2rem,4vw,2.9rem); margin: 10px 0 14px; }
.blog-hero p{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:640px; margin:0 auto; }

.blog-layout{ display:grid; grid-template-columns: 1fr 280px; gap: 48px; align-items:start; }
@media (max-width: 900px){ .blog-layout{ grid-template-columns: 1fr; } }

.blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
@media (max-width: 720px){ .blog-grid{ grid-template-columns: 1fr; } }

.post-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); display:flex; flex-direction:column; }
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card-img{ aspect-ratio: 16/10; background: var(--paper-alt); overflow:hidden; }
.post-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-body{ padding: 20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card-meta{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--muted-2); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.post-card-meta .cat{ color:var(--coral); }
.post-card h3{ font-size:1.15rem; line-height:1.35; margin:0; }
.post-card h3 a{ color:var(--ink); }
.post-card h3 a:hover{ color:var(--navy); }
.post-card p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin:0; flex:1; }
.post-card-foot{ font-size:.82rem; color:var(--muted-2); margin-top:4px; }

.blog-empty{ text-align:center; padding: 60px 20px; color:var(--muted); }

.blog-sidebar{ display:flex; flex-direction:column; gap:28px; position:sticky; top: calc(var(--header-h) + 24px); }
.sidebar-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:22px; }
.sidebar-card h4{ font-size:.98rem; margin-bottom:14px; }
.sidebar-card ul{ display:flex; flex-direction:column; gap:9px; }
.sidebar-card ul li a{ display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.92rem; }
.sidebar-card ul li a:hover{ color:var(--navy); }
.sidebar-card ul li a.active{ color:var(--coral); font-weight:700; }
.sidebar-card ul li a span.count{ color:var(--muted-2); font-size:.82rem; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap; }
.pagination a, .pagination span{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-weight:600; font-size:.9rem; border:1px solid var(--line); color:var(--ink); }
.pagination a:hover{ border-color:var(--navy); color:var(--navy); }
.pagination .current{ background:var(--navy); color:#fff; border-color:var(--navy); }
.pagination .dots{ border:none; color:var(--muted-2); }

/* Single post */
.post-hero{ padding: calc(var(--topbar-h) + var(--header-h) + 40px) 0 0; }
.post-hero .container{ max-width: 780px; }
.post-breadcrumb{ display:flex; gap:6px; flex-wrap:wrap; font-size:.85rem; color:var(--muted-2); margin-bottom:18px; }
.post-breadcrumb a{ color:var(--muted-2); } .post-breadcrumb a:hover{ color:var(--navy); }
.post-meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.85rem; color:var(--muted-2); margin: 18px 0 8px; }
.post-meta-row .cat-pill{ background: rgba(228,60,55,.08); color:var(--coral); font-weight:700; padding:4px 12px; border-radius:20px; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.post-title{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.2; margin: 6px 0 22px; }
.post-featured{ max-width:900px; margin: 0 auto 40px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.post-featured img{ width:100%; display:block; }

.post-layout{ display:grid; grid-template-columns: minmax(0,1fr) 240px; gap:48px; max-width:1080px; margin:0 auto; align-items:start; }
@media (max-width: 900px){ .post-layout{ grid-template-columns:1fr; } .post-toc{ display:none; } }
.post-toc{ position:sticky; top: calc(var(--header-h) + 24px); border-left:2px solid var(--line); padding-left:18px; }
.post-toc h5{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:12px; }
.post-toc ul{ display:flex; flex-direction:column; gap:9px; }
.post-toc a{ font-size:.86rem; color:var(--muted); line-height:1.4; }
.post-toc a:hover{ color:var(--navy); }

.post-body{ font-size:1.06rem; line-height:1.8; color:var(--ink-soft); }
.post-body > *:first-child{ margin-top:0; }
.post-body h2{ font-size:1.5rem; margin: 42px 0 16px; scroll-margin-top: calc(var(--header-h) + 20px); }
.post-body h3{ font-size:1.22rem; margin: 32px 0 14px; scroll-margin-top: calc(var(--header-h) + 20px); }
.post-body h4{ font-size:1.05rem; margin: 26px 0 10px; }
.post-body p{ margin: 0 0 20px; }
.post-body ul, .post-body ol{ margin: 0 0 20px; padding-left: 1.4em; display:flex; flex-direction:column; gap:8px; }
.post-body li{ line-height:1.7; }
.post-body a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.post-body img{ max-width:100%; height:auto; border-radius: var(--radius); margin: 8px 0; }
.post-body figure{ margin: 28px 0; } .post-body figcaption{ font-size:.85rem; color:var(--muted-2); text-align:center; margin-top:10px; }
.post-body blockquote{ border-left:4px solid var(--coral); background: var(--paper); padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0; font-style:italic; color:var(--ink-soft); }
.post-body pre{ background: var(--ink); color:#e8edf4; padding:18px 20px; border-radius: var(--radius); overflow-x:auto; margin: 20px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88rem; }
.post-body code{ background: var(--paper-alt); padding:2px 6px; border-radius:4px; font-size:.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.post-body pre code{ background:none; padding:0; }
.post-body table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:.92rem; }
.post-body th, .post-body td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }
.post-body th{ background: var(--paper); }
.post-body iframe{ max-width:100%; border-radius: var(--radius); aspect-ratio:16/9; width:100%; height:auto; }
.post-body hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }

.post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.post-tags a{ font-size:.82rem; background:var(--paper-alt); color:var(--muted); padding:6px 14px; border-radius:20px; font-weight:600; }
.post-tags a:hover{ background:var(--navy); color:#fff; }

.post-share{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.post-share span{ font-size:.82rem; color:var(--muted-2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.post-share a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.post-share a:hover{ border-color:var(--navy); color:var(--navy); }
.post-share svg{ width:16px; height:16px; }

.related-posts{ max-width:1080px; margin: 60px auto 0; }
.related-posts h3{ font-size:1.3rem; margin-bottom:22px; }