/* Blog list enhancements */
.blog-hero{padding:28px 0 10px}
.blog-hero h1{margin:0 0 6px}
.blog-hero p{margin:0; opacity:.9; max-width:70ch}

.blog-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0 18px}
.blog-controls .field{flex:1 1 260px}
.blog-controls input, .blog-controls select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:inherit;
}
.blog-controls select{flex:0 0 220px}

.blog-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; padding-bottom:26px}
.blog-card{grid-column:span 12; display:flex; gap:14px; align-items:stretch; overflow:hidden}
.blog-thumb{flex:0 0 168px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06)}
.blog-thumb img{display:block; width:100%; height:100%; object-fit:cover}
.blog-card .content{padding:14px 14px 14px 0}
.blog-card .title{font-size:1.1rem; line-height:1.2; margin:0 0 6px}
.blog-card .title a{text-decoration:none}
.blog-card .meta{opacity:.85; font-size:.9rem; margin-bottom:8px}
.blog-card p{margin:0; opacity:.92}

@media (max-width:760px){
  .blog-card{flex-direction:column}
  .blog-thumb{width:100%; flex:auto; max-height:210px}
  .blog-card .content{padding:0 0 12px}
}