/* ===== Blog — one shy card per article =====
   Each post is a shared .card (see css/components/card.css) on the shared
   .card-grid, with the same .card--shy flee behaviour as Work and Adventures.
   Auto-height rather than a fixed tile — the excerpt needs room. */

/* Two wide columns instead of the shared grid's three narrow ones. A post
   card is mostly prose, and at the Work tiles' ~17rem track the excerpts were
   breaking into six or seven ragged lines; a wider measure reads as an
   article rather than a tile.

   Still auto-fit rather than a hard `repeat(2, 1fr)`: the 30rem floor happens
   to yield exactly two columns at the grid's 68rem cap, and drops to one on
   its own once the viewport can't hold two — no media query to keep in sync
   with the container width. Inherits the gap and centering from .card-grid.

   The min() around the floor is not optional: a bare `minmax(30rem, 1fr)`
   keeps the track at 30rem even when the container is narrower than that, so
   on a phone the cards would run off the right edge — the exact horizontal
   overflow that had to be fixed here once already. min(…, 100%) lets the
   track shrink below its floor rather than overflow. */
.blog__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
}

/* Hover goes through --lift (consumed inside .card--shy's transform) rather
   than its own `transform`, which would wipe out the flee offset. */
.card--post {
  transition: background var(--theme-dur) var(--ease-out),
              box-shadow var(--motion-hover);
}
.card--post:hover,
.card--post:focus-within {
  --lift: -4px;
  box-shadow: var(--shadow-lg);
}
/* Blue, not the coral --c-accent this used to be. --c-highlight rather than a
   literal because it is the one blue that is already theme-aware: blue-600 on
   light, blue-500 on dark, chosen per theme in tokens.css precisely so it
   holds contrast on both. It is also the hero headline's blue, so the site
   has one highlight colour rather than two that nearly match. */
.card--post:hover .card__title,
.card--post:focus-within .card__title {
  color: var(--c-highlight);
}

/* the <a> fills the card so the entire surface is clickable */
.post__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Phone: fit the headlines on one line where the wording allows it. Two moves,
   because type size alone would have had to drop below the excerpt's to do it:
   the body padding gives the line back ~16px of width, and the title steps
   down from --fs-300 (20px) to 18px. Still above the 16px excerpt, so the
   hierarchy survives. Titles longer than ~32 characters still wrap — no size
   that reads as a heading fits those. */
@media (max-width: 768px) {
  .card--post .card__body { padding: var(--sp-3) var(--sp-2); }
  .card--post .card__title { font-size: 1.125rem; }
}

.post__excerpt {
  margin-top: var(--sp-2);
  color: var(--c-ink-soft);
  font-size: var(--fs-200);
  line-height: var(--leading-relaxed);
}