/* Blog index card grid. It's a plain <div id="blog-grid"> full of <a>
   cards (not a <ul>/<li>), specifically so it can never collide with list
   styling used elsewhere on the site or inside a post's own body. */
#blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin:1.5em 0
}
#blog-grid .blog-card{
  display:block;height:100%;text-decoration:none;color:inherit;
  border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.08);transition:box-shadow .2s,transform .2s
}
#blog-grid .blog-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.15);transform:translateY(-2px)}
/* object-fit:contain (not cover) so the whole image shows, letterboxed on
   the muted background rather than cropped to fill the box. */
#blog-grid .blog-card-img{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#f2f2f2}
#blog-grid .blog-card-noimg{display:flex;align-items:center;justify-content:center;font-size:1.8em;color:#ccc}
#blog-grid .blog-card-body{padding:8px 10px}
#blog-grid .blog-card-date{font-size:.65em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0073e6}
#blog-grid .blog-card-title{margin:.3em 0 0;font-size:.9em;font-weight:700;color:#111;line-height:1.3}
#blog-grid .blog-card-desc{margin:.3em 0 0;font-size:.75em;color:#666;line-height:1.4}