/* ════════════════════════════════════════════════════════════════════════
   Shared post-card styles (.bgrid / .bcard / .bflag) — used by the homepage
   "latest from the blog" cards AND the blog pages. Split out of blog.css so
   the homepage doesn't render-block on the full blog stylesheet.
   (Kept in blog.css too so the blog pages are unchanged; if these ever
    diverge, this file is the source of truth for the cards.)
   ════════════════════════════════════════════════════════════════════════ */

.bgrid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ── post card (flat / engineered — no shadow, no lift) ────────────────── */
.bcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--remi-line); border-radius: var(--radius-lg); background: var(--remi-surface);
  transition: border-color var(--dur-base) var(--ease-out);
}
.bcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--remi-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.bcard:hover { border-color: color-mix(in srgb, var(--remi-accent) 38%, var(--remi-line)); }
.bcard:hover::after { transform: scaleX(1); }
.bcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bcard__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--remi-surface-3); border-bottom: 1px solid var(--remi-line); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.bcard:hover .bcard__media img { transform: scale(1.035); }
.bcard__body { display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.1rem, 2vw, 1.5rem); }
.bcard__cat { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--remi-accent); font-weight: 600; }
.bcard__title { font-size: 1.18rem; line-height: 1.28; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--remi-ink); }
.bcard__excerpt { font-size: .92rem; line-height: 1.6; color: var(--remi-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__meta { margin-top: .35rem; display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--remi-muted); }
.bcard__meta .dot { opacity: .55; }

/* featured flag pinned on the thumbnail */
.bflag { position: absolute; top: .7rem; left: .7rem; z-index: 1; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--remi-accent-dark); border-radius: var(--radius-pill); padding: .32rem .62rem; }