/* =====================================================================
   OSE · Blog card · styles/components/blog-card.css
   ---------------------------------------------------------------------
   One post in the /blog/ list and the "Từ blog" strip. Builds on card.css:
   load card.css first and use both classes. Component tokens only:
   --blog-card-*.

   Markup
     <article class="card card--interactive blog-card">
       <div class="card__media blog-card__media">        optional cover, 16:9
         <!-- PLACEHOLDER: replace with real photo -->
         <img src="/images/mockups/notebook.jpg" alt="…" width="1280" height="1600" loading="lazy" decoding="async">
         <span class="blog-card__flag">Ảnh minh hoạ</span>   only on brand mockups
       </div>
       <div class="blog-card__meta">
         <time class="blog-card__date" datetime="2026-10-27">27/10/2026</time>
         <span class="blog-card__draft">Nháp</span>          only until John approves
       </div>
       <h3 class="card__title blog-card__title"><a class="card__link" href="/blog/<slug>/">…</a></h3>
       <p class="blog-card__excerpt">…</p>
     </article>

   Title clamps to 2 lines, excerpt to 3 (--blog-card-*-lines). The date is
   a mono data label. The draft badge (a flat label, like .badge) is written
   "Nháp" and set in caps by CSS, so screen readers read a word, not letters.
   States: hover hairline, focus ring, active and disabled come from card.css.
   No JS.
   ===================================================================== */

@layer components {
  .blog-card__media {
    aspect-ratio: var(--blog-card-media-ratio);
  }

  .blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blog-card-meta-gap);
  }

  .blog-card__date {
    font: var(--blog-card-date-font);
    letter-spacing: var(--blog-card-date-tracking);
    color: var(--blog-card-date-color);
    font-variant-numeric: tabular-nums;
  }

  .blog-card__draft,
  .blog-card__flag {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--blog-card-badge-height);
    padding-inline: var(--blog-card-badge-padding-inline);
    border-radius: var(--blog-card-badge-radius);
    white-space: nowrap;
  }

  .blog-card__draft {
    background-color: var(--blog-card-draft-bg);
    color: var(--blog-card-draft-text);
    font: var(--blog-card-draft-font);
    letter-spacing: var(--blog-card-draft-tracking);
    text-transform: var(--blog-card-draft-case);
  }

  .blog-card__flag {
    position: absolute;
    inset-block-start: var(--blog-card-flag-offset);
    inset-inline-start: var(--blog-card-flag-offset);
    background-color: var(--blog-card-flag-bg);
    color: var(--blog-card-flag-text);
    font-family: var(--blog-card-flag-font-family);
    font-size: var(--blog-card-flag-font-size);
    font-weight: var(--blog-card-flag-font-weight);
  }

  .blog-card__title,
  .blog-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-card__title {
    -webkit-line-clamp: var(--blog-card-title-lines);
    line-clamp: var(--blog-card-title-lines);
  }

  .blog-card__excerpt {
    -webkit-line-clamp: var(--blog-card-excerpt-lines);
    line-clamp: var(--blog-card-excerpt-lines);
    color: var(--blog-card-excerpt-color);
  }
}