/* BLOG — Page-specific styles */

.js-ready .fade.in{opacity:1;transform:none}
@media(max-width:1024px){
  nav{padding:0 20px}
  .nav-center,.nav-right{display:none}
  .nav-hamburger{display:flex;flex-direction:column}
  .page-hero-inner{padding:40px 24px 28px}
  .section{padding:44px 24px}
  .grid-2{grid-template-columns:1fr;gap:40px}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  footer{padding:48px 24px 0}
  .footer-nav{grid-template-columns:1fr 1fr;gap:32px}
}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.07);border-color:var(--border2)}
.blog-img{height:200px;background:#f8f9fb;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{padding:28px;flex:1;display:flex;flex-direction:column}
.blog-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.blog-title{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-0.02em;line-height:1.3;margin-bottom:12px}
.blog-excerpt{font-size:14px;color:var(--text2);line-height:1.7;flex:1;margin-bottom:20px}
.blog-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text3)}
.blog-avatar{width:26px;height:26px;border-radius:50%;background:var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--navy)}
@media(max-width:1024px){.blog-grid{grid-template-columns:1fr}}

@media(max-width:480px){
  nav{padding:0 16px}
  .nav-brand-name{font-size:17px}
  .nav-drawer{padding:12px 16px 20px}
  .d-item{font-size:13.5px}
  .d-login,.d-signup{padding:11px;font-size:14px}
}

/* ── Blog responsive ── */
@media(max-width:768px){
  .blog-grid{ grid-template-columns:1fr; gap:20px; }
  .blog-hero-inner{ padding:36px 20px 28px; }
}