Horizontal Blog Card

---
/**
 * BlogHorizontalCard — Landscape card layout for blog feeds or news items.
 * 
 * @param {string} title - The blog post title.
 * @param {string} description - Brief summary or excerpt.
 * @param {string} tag - Featured label or category (e.g. "Tutorial").
 * @param {string} thumbUrl - Optional thumbnail image URL.
 */
interface Props {
  title: string;
  description: string;
  tag: string;
  thumbUrl?: string;
}

const { title, description, tag, thumbUrl } = Astro.props;
---

<article class="blog-h-card">
  <div class="blog-h-card__thumb" style={thumbUrl ? `background-image: url('${thumbUrl}'); background-size: cover;` : ''}></div>
  <div class="blog-h-card__content">
    <span class="blog-h-card__tag">{tag}</span>
    <h4 class="blog-h-card__title">{title}</h4>
    <p class="blog-h-card__desc">{description}</p>
  </div>
</article>

<style>
  .blog-h-card { 
    display: flex; gap: var(--sp-6, 1.5rem); 
    background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-lg, 16px); 
    overflow: hidden; 
  }
  .blog-h-card__thumb { 
    width: 150px; 
    background-color: var(--c-bg, #1e293b); 
    flex-shrink: 0; 
  }
  .blog-h-card__content { padding: var(--sp-5, 1.2rem); }
  .blog-h-card__title { color: var(--c-text-1, #fff); margin: 0.5rem 0; font-size: 1.1rem; }
  .blog-h-card__desc { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); margin: 0; }
  .blog-h-card__tag { font-size: 0.7rem; color: var(--c-primary, #818cf8); font-weight: 700; text-transform: uppercase; }
  
  @media (max-width: 600px) {
    .blog-h-card { flex-direction: column; }
    .blog-h-card__thumb { width: 100%; height: 180px; }
  }
</style>