/* =============================================================================
   Blog listing page (pages/blog.html).

   Layout glue only. The cards themselves — resting, hover, focus, cover ratio,
   pills, typography — are css/components/blog-card.css (package 3.3), and the
   card grid is .grid-3 from css/components/grid.css (package 3.2). What is left
   here is the page's own composition: the one-column listing, the featured
   variant, the pill row inside a card, and the two "Coming Soon" covers.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   LISTING LAYOUT
   The listing is a single column of blocks: the featured card, then the grid.
   --card-grid-gap is already responsive (32 / 32 / 20px), so no media query.
   .blog-layout itself needs no rule — it wraps a single child. It stays in the
   markup because contracts.md §3 freezes the name.
   --------------------------------------------------------------------------- */
.blog-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--card-grid-gap);
}

/* ---------------------------------------------------------------------------
   FEATURED CARD
   The only .blog-card variant: a wider cover, which is the whole difference.
   On mobile 21:9 is a letterbox slit, so it falls back to the component's 16:9.
   --------------------------------------------------------------------------- */
.blog-card--featured .blog-card__image {
  aspect-ratio: 21 / 9;
}

/* ---------------------------------------------------------------------------
   CATEGORY ROW
   The wrapper that holds the .blog-card__category pills — the same job
   .blog-post__tags does in css/pages/article.css. The pills are the component's.
   --------------------------------------------------------------------------- */
.blog-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   "COMING SOON" COVERS
   Parts 4 and 5 have no cover image, so the cover is a label and an icon over
   the gradient .blog-card__image already paints. Absolutely positioned, because
   content-driven height beats aspect-ratio and these two covers must stay 16:9
   like every sibling.
   --------------------------------------------------------------------------- */
.blog-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .blog-card--featured .blog-card__image {
    aspect-ratio: 16 / 9;
  }
}