/* ================= BLOG ================= */

.blog-section{
  max-width:1200px;
  margin:0 auto;
  padding:64px 28px 80px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
}

.blog-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(18,43,48,0.08);
  transition:transform .2s ease, box-shadow .2s ease;
  color:inherit;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(18,43,48,0.14); }

.blog-card-photo{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.blog-card-noimg{ background:var(--sand); }

.blog-card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-date{ font-size:11.5px; color:var(--text-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.blog-card-body h3{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  color:var(--teal-deep);
  line-height:1.3;
}
.blog-card-body p{ font-size:13.5px; color:var(--text-soft); line-height:1.6; flex:1; }
.blog-card-link{ font-size:13px; font-weight:700; color:var(--sky); margin-top:4px; }

/* ---- post individual ---- */
.blog-post-section{
  max-width:820px;
  margin:0 auto;
  padding:56px 28px 80px;
}
.blog-post-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(18,43,48,0.12);
}
.blog-post-cover{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}
.blog-post-body{ padding:40px; }
.blog-post-body .blog-card-date{ margin-bottom:18px; display:block; }

@media (max-width: 600px){
  .blog-section{ padding:40px 20px 56px; }
  .blog-post-body{ padding:24px; }
  .blog-post-cover{ height:220px; }
}