/* ════════════════════════════════════
   BLOG
════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.blog-card {
  background: var(--bg-card);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.4s;
  cursor: pointer;
  border: 0.5px solid var(--border);
}

.blog-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0,0,0,0.35); border-color: rgba(180,143,212,0.3); }

.blog-image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

.blog-image-1 { background: linear-gradient(135deg, #2D1F45 0%, #1A0F2E 100%); }
.blog-image-2 { background: linear-gradient(135deg, #3D1F3A 0%, #2D0F28 100%); }
.blog-image-3 { background: linear-gradient(135deg, #1F2D45 0%, #0F1E2E 100%); }
.blog-image-4 { background: linear-gradient(135deg, #1F3D2D 0%, #0F2D1E 100%); }
.blog-image-5 { background: linear-gradient(135deg, #1A1F3D 0%, #0F102E 100%); }
.blog-image-6 { background: linear-gradient(135deg, #3D2D1F 0%, #2D1E0F 100%); }

.blog-content { padding: 1.75rem; }

.blog-meta { display: flex; gap: 1rem; margin-bottom: 0.75rem; align-items: center; }

.blog-category {
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 700;
}

.blog-date { font-size: 0.72rem; color: var(--text-muted); }

.blog-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.blog-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.75; }

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  color: var(--lavender);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: gap 0.3s;
  cursor: pointer;
}

.read-more:hover { gap: 0.7rem; }