/* ==================================
   13. BLOG
================================== */
.blog { background: var(--cream); }
.blog-grid { display: grid; gap: 22px; margin-top: 35px; }
.blog-card { background: var(--white); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-fast); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-media { position: relative; }
.blog-media img { width: 100%; height: 220px; object-fit: cover; }
.blog-badge {
  position: absolute; top: 14px; left: 14px; background: var(--orange); color: var(--white);
  padding: 7px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
}
.blog-content { padding: 26px; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; color: var(--muted); font-size: 0.9rem; }
.blog-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-meta ion-icon { color: var(--orange); }
.blog-content h3 { font-family: var(--ff-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.2; margin-bottom: 10px; }
.blog-content h3 a { color: var(--brown); transition: var(--transition-fast); }
.blog-content h3 a:hover { color: var(--orange); }
.blog-content p { color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.blog-link { display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-weight: 700; }
.blog-link ion-icon { transition: var(--transition-fast); }
.blog-link:hover ion-icon { transform: translateX(4px); }
.blog-actions { text-align: center; margin-top: 32px; }