/* =============================================
   Blog Listing Page
   ============================================= */
.blog-listing { padding: 24px 24px; background: linear-gradient(to bottom, #ECECEC, #F9F9F9); }
.blog-listing__inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.blog-listing__title { font-family: var(--font-body); font-size: 28px; font-weight: 700; color: var(--color-brand); letter-spacing: 2px; margin-bottom: 36px; }
.blog-listing__grid { display: flex; flex-direction: column; gap: 40px; max-width: 720px; margin: 0 auto 48px; }
.blog-listing__card { display: flex; gap: 20px; text-decoration: none; color: var(--color-text); text-align: left; transition: transform var(--transition); }
.blog-listing__card:hover { transform: translateY(-3px); }
.blog-listing__thumb { width: 220px; min-width: 220px; height: 148px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.blog-listing__card:hover .blog-listing__thumb { box-shadow: var(--shadow-md); }
.blog-listing__card-body { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.blog-listing__card-title { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--color-brand); }
.blog-listing__card-excerpt { font-size: 14px; line-height: 1.6; color: var(--color-text-light); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-listing__card-meta { font-size: 12px; color: var(--color-text-light); }
.blog-listing__card-times { font-size: 12px; color: var(--color-text-light); display: flex; align-items: center; gap: 4px; }
.blog-listing__card-times i { font-size: 11px; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }

@media (max-width: 768px) {
  .blog-listing { padding: 24px 16px; }
  .blog-listing__title { font-size: 22px; }
  .blog-listing__card { flex-direction: column; gap: 12px; }
  .blog-listing__thumb { width: 100%; min-width: unset; height: 200px; }
}