/* ══════════════════════════════════
   BLOG LISTING PAGE
══════════════════════════════════ */
#blog { background: var(--cream); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3rem;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
}
.blog-card:hover { box-shadow: 0 12px 40px rgba(15,31,61,.12); transform: translateY(-4px); }

.blog-thumb {
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}

/* Thumb gradients */
.bg1 { background: linear-gradient(135deg, #0f1f3d, #1d3461); }
.bg2 { background: linear-gradient(135deg, #1a3a2a, #1d5c3a); }
.bg3 { background: linear-gradient(135deg, #3a1a0f, #6b2e0a); }
.bg4 { background: linear-gradient(135deg, #1a1a3d, #2e1a6b); }
.bg5 { background: linear-gradient(135deg, #0f2a3d, #1a4a6b); }
.bg6 { background: linear-gradient(135deg, #1a2a1a, #2e4a2e); }

.blog-body         { padding: 1.4rem; }
.blog-tag-label    { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); font-weight: 600; margin-bottom: .5rem; display: block; }
.blog-card h3      { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--navy); margin-bottom: .5rem; line-height: 1.35; }
.blog-card p       { font-size: .82rem; color: var(--muted); line-height: 1.65; }
.blog-meta         { margin-top: .85rem; font-size: .7rem; color: var(--muted); display: flex; gap: 1rem; }
.read-more-btn     { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--orange); margin-top: .85rem; transition: gap .2s; }
.blog-card:hover .read-more-btn { gap: .6rem; }

/* ── Responsive ── */
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { #blog { padding: 60px 1.25rem; } .blog-grid { grid-template-columns: 1fr; } }