/* blog-cards.css , the post card and its 3/2/1 grid. ONE source, loaded by /blog (the index
   grid) and by every /post/ page (the related-posts block, scripts/blog-related.mjs). These
   rules were lifted out of blog-index.css on 2026-09-03 so the related cards on a post page
   cannot drift from the index cards: same radius, same lift, same breakpoints, by construction
   rather than by copying values. Values are unchanged from the index. The back strip
   (.bp-back*) moved here from blog-post.css the same day, for the same reason: /blog/category-*
   pages carry it too. */
#pg .bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#pg .bl-card{
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
#pg .bl-card:hover{transform:translateY(-5px);box-shadow:0 6px 16px rgba(0,0,0,.08),0 20px 48px rgba(0,0,0,.1)}
#pg .bl-card__img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden}
#pg .bl-card__img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
#pg .bl-card:hover .bl-card__img-wrap img{transform:scale(1.05)}
#pg .bl-card__body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
#pg .bl-card__cat{font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
#pg .bl-card__title{font-family:var(--font-h);font-size:18px;font-weight:750;color:var(--dark);line-height:1.32;letter-spacing:-.01em;margin-bottom:auto;padding-bottom:16px}
#pg .bl-card__meta{display:flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:12px;color:var(--muted);padding-top:14px;border-top:1px solid var(--border)}
#pg .bl-card__meta-dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}

@media(max-width:1024px){
  #pg .bl-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #pg .bl-grid{grid-template-columns:1fr}
}

/* Back-to-blog strip, on every /post/ and every /blog/category-* page. */
#pg .bp-back{border-top:1px solid var(--border);background:var(--cream)}
#pg .bp-back__inner{max-width:1100px;margin:0 auto;padding:32px 32px}
#pg .bp-back a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
#pg .bp-back a:hover{color:var(--orange)}