/* ===========================================================
   BLOG PAGE STYLES
   =========================================================== */
.blog-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap: var(--sp-md);
  margin-bottom: var(--sp-lg); flex-wrap:wrap;
}
.blog-search{
  position:relative; flex:1; max-width:380px;
}
.blog-search input{
  width:100%; padding: 13px 18px 13px 46px; border-radius: var(--r-pill);
  border:1.5px solid var(--line); font-size:0.92rem;
}
.blog-search input:focus{ border-color: var(--blue); outline:none; box-shadow:0 0 0 4px rgba(15,76,129,0.1); }
.blog-search svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color: var(--text-faint); }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.blog-card{
  background:#fff; border-radius: var(--r-md); overflow:hidden;
  border:1px solid var(--line-soft); box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-card .blog-cover{ height:190px; position:relative; overflow:hidden; }
.blog-card .blog-cover svg{ width:100%; height:100%; display:block; }
.blog-card .blog-body{ padding: 1.8rem; flex:1; display:flex; flex-direction:column; }
.blog-card .blog-cat{ margin-bottom:14px; }
.blog-card h3{ font-size:1.12rem; margin-bottom:10px; line-height:1.4; }
.blog-card p{ color: var(--text-muted); font-size:0.88rem; line-height:1.65; flex:1; margin-bottom:18px; }
.blog-meta{ display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color: var(--text-faint); border-top:1px solid var(--line-soft); padding-top:14px; }
.blog-readmore{ display:flex; align-items:center; gap:6px; font-weight:600; color: var(--blue); font-size:0.84rem; }
.blog-readmore svg{ transition: transform .25s ease; }
.blog-card:hover .blog-readmore svg{ transform: translateX(4px); }

@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } .blog-toolbar{ flex-direction:column; align-items:stretch; } .blog-search{ max-width:none; } }