.blog-card {
      display: grid;
      gap: 1.25rem;
      border: 1px solid #e9ecef;
      border-radius: 18px;
      padding: 1rem;
      margin-bottom: 1.25rem;
      background: #fff;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .blog-card:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 86, 179, 0.18);
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    }
    .blog-card-media {
      display: block;
      aspect-ratio: 16 / 9;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(135deg, #eaf3ff 0%, #f8fbff 55%, #fff7e8 100%);
      box-shadow: inset 0 0 0 1px rgba(0, 86, 179, 0.08);
    }
    .blog-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .blog-card-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0056b3;
      font-size: 2rem;
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 40%),
        radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.2), transparent 42%);
    }
    .blog-card h2 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      line-height: 1.35;
    }
    .blog-card h2 a {
      color: #1a1a2e;
      text-decoration: none;
    }
    .blog-card h2 a:hover { color: #0056b3; }
    .blog-meta {
      font-size: 0.85rem;
      color: #6c757d;
      margin-bottom: 0.75rem;
    }
    .blog-desc {
      color: #495057;
      font-size: 0.95rem;
      margin-bottom: 0;
    }
    @media (min-width: 768px) {
      .blog-card {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        align-items: center;
        padding: 1.1rem;
      }
      .blog-card-title {
        margin-top: 0.15rem;
      }
    }