.posts-grid{ align-items:stretch; gap:1rem; }
.post-card{ overflow:hidden; height:100%; display:flex; flex-direction:column; transition: transform .15s ease, border-color .15s ease; }
.post-card:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent), var(--border) 60%); }
.card-link{ color: inherit; display:flex; flex-direction:column; height:100%; }
.card-image-wrap{ overflow:hidden; border-radius: 12px; border:1px solid var(--border); margin-bottom:.65rem; }
.post-card .card-image{ transition: transform .25s ease; width:100%; height:180px; object-fit:cover; display:block; }
.post-card:hover .card-image{ transform: scale(1.03); }
.card-meta-top{ display:flex; align-items:center; gap:.5rem; justify-content:space-between; color: var(--muted); font-weight:700; }
.card-title{ margin:.1rem 0 .2rem; }
.card-excerpt{ color: var(--muted); margin:0 0 .5rem; }
.card-meta{ display:flex; align-items:center; gap:.4rem; color: var(--muted); font-weight:700; margin-top:auto; }
.card-meta .dot{ opacity:.6; }
.badge{ background: color-mix(in srgb, var(--accent), transparent 85%); color: var(--accent); border-color: color-mix(in srgb, var(--accent), var(--border) 50%); }
.author{ display:inline-flex; align-items:center; gap:.35rem; }
.author-avatar{ width:26px; height:26px; border-radius:50%; overflow:hidden; border:1px solid var(--border); display:inline-flex; }
.author-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.author-initial{ width:100%; height:100%; display:grid; place-items:center; font-weight:800; background: color-mix(in srgb, var(--accent), transparent 80%); color: var(--accent); }

.pagination{ display:flex; justify-content:center; gap:.5rem; margin: 2rem 0 }
.pagination a, .pagination span{ padding:.5rem .75rem; border:1px solid var(--border); border-radius: 10px }
.pagination .current{ background: var(--accent); border-color: var(--accent); color:#fff }
.fancy-pagination{ gap: .8rem; align-items:center; }
.fancy-pagination .page-btn{
  padding:.55rem 1rem; border-radius: 12px; border:1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-1); font-weight:800;
}
.fancy-pagination .page-btn:hover{ border-color: var(--accent); color: var(--accent); }
.fancy-pagination .page-btn.disabled{ opacity:.5; pointer-events:none; box-shadow:none; }
.fancy-pagination .page-count{ color: var(--muted); font-weight:700; }

#blog-posts{ scroll-margin-top: 100px; }

/* Post layout + in-page nav */
body.post-template .post.container{ padding-top: clamp(1.25rem, 3vw, 2.75rem); }
.post-grid{ display:grid; gap:1.5rem; }
.post-grid.has-toc{ grid-template-columns: 260px 1fr; }
.post-grid.no-toc .post-nav,
.post-grid.no-toc .post-nav-toggle{ display:none !important; }
.post-nav{ display:none; }
.post-grid.has-toc .post-nav{ display:block; }
.post-nav-toggle{ display:none; }
.post-nav-inner{
  position:sticky; top:100px; padding:1rem;
  border:1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-1);
}
.post-nav-header .muted{ margin:.1rem 0 0; }
.post-toc{ display:flex; flex-direction:column; gap:.15rem; margin-top:.4rem; }
.post-toc ol,.post-toc ul{ list-style:none; padding:0; margin:0; }
.post-toc li{ margin:0; }
.post-toc .toc-link{
  display:block; padding:.35rem .5rem; border-radius: 10px; color: var(--text); text-decoration:none;
  transition: background .15s ease, color .15s ease;
}
.post-toc .toc-link.level-3{ padding-left: 1.3rem; opacity:.95; }
.post-toc .toc-link:hover{ background: color-mix(in srgb, var(--accent), transparent 92%); color: var(--accent); }
.post-toc .toc-link.active{ background: color-mix(in srgb, var(--accent), transparent 85%); color: var(--accent); font-weight:800; }
.post-content h2, .post-content h3{ scroll-margin-top: 96px; }
.post-header .post-meta{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.post-header .author-avatar{ width:30px; height:30px; }

@media (max-width: 980px){
  .post-grid.has-toc{ grid-template-columns: 1fr; }
  .post-grid.has-toc .post-nav-toggle{
    display:inline-flex; align-items:center; gap:.35rem;
    position:fixed; right:12px; top:82px; z-index:22;
    padding:.45rem .75rem; border-radius: 999px;
    border:1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-2);
    font-weight:800;
  }
  .post-grid.has-toc .post-nav-toggle::before{ content:'☰'; }
  .post-grid.has-toc .post-nav-toggle.active{ border-color: var(--accent); color: var(--accent); }

  .post-grid.has-toc .post-nav{
    display:block;
    position:fixed; right:12px; top:126px;
    width:260px; max-height: 70vh; overflow:auto;
    transform: translateX(calc(100% + 18px)); opacity:0; visibility:hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
    z-index:21;
  }
  .post-grid.has-toc .post-nav.is-open{ transform: translateX(0); opacity:1; visibility:visible; }
  .post-nav-inner{ position:static; top:auto; }
}

/* Related articles */
.post-related{ margin-top: 2.5rem; }
.related-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.related-scroll{
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap:1rem; overflow-x:auto; padding-bottom:.35rem; scroll-snap-type:x mandatory;
}
.related-card{
  min-height:100%; scroll-snap-align:start;
  border:1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-1);
}
.related-card .card-image{ height:160px; }
.related-card .card-body{ padding:1rem; }
.related-scroll::-webkit-scrollbar{ height:8px; }
.related-scroll::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent), transparent 60%); border-radius: 8px; }
@media (min-width: 1200px){
  .related-scroll{ grid-auto-columns: minmax(260px, 1fr); }
}

/* Prevent horizontal overflow from wide/full images inside post layout */
.post .kg-width-wide,
.post .kg-width-full{
  width:100% !important;
  max-width:100%;
  margin: clamp(1rem,2vw,2rem) 0;
  transform:none;
}
.post .kg-width-full img,
.post .kg-width-wide img{ width:100%; height:auto; }

/* Author card */
.post-author-card{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem; border:1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-1);
}
.author-avatar-lg{
  width:64px; height:64px; border-radius:50%; overflow:hidden; border:1px solid var(--border); flex:0 0 auto;
}
.author-avatar-lg img{ width:100%; height:100%; object-fit:cover; display:block; }
.author-name{ margin:0 0 .3rem; }
.author-bio{ margin:.1rem 0 .4rem; }
.author-meta{ display:flex; gap:.4rem; flex-wrap:wrap; }
.meta-pill{ display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--border); background: color-mix(in srgb, var(--surface), var(--bg) 20%); }
@media (max-width: 680px){
  .post-author-card{ flex-direction:column; align-items:flex-start; }
}