/* shared-blog-card — extracted from v1-category-18.html
   Source of truth — based on baseline file. */

.blog-section { max-width: 1200px; margin: 0 auto; padding: 16px 0; }

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }

.blog-card { background: white; border: 1px solid #E8E8E4; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }

.blog-img { aspect-ratio: 2; position: relative; }

.blog-cat { position: absolute; top: 10px; left: 10px; background: var(--green); color: white; font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 4px; }

.blog-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }

.blog-title { font-size: 0.9375rem; font-weight: 700; color: #1C1C1A; margin: 0 0 8px; line-height: 1.4; }

.blog-excerpt { font-size: 0.8125rem; color: #5F5E5A; margin: 0 0 12px; line-height: 1.5; flex: 1; }

.blog-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #6B6964; }

.blog-read { color: var(--orange-dark); font-weight: 600; font-size: 0.8125rem; }

@media (min-width: 600px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (min-width: 1024px) {
    .blog-section { padding: 22px 0; }
    .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .blog-card { flex-direction: column; }
  }