/* Blog cards — shared by the homepage slider and the /blog archive.
   Lives in its own sheet because the same card renders in two families; keeping
   one copy is what stops the two from drifting apart. Everything resolves to
   the design-system tokens in base.css. */
.blog-card { position: relative; background: #fff; border: 1px solid transparent; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur); }
/* the frame strokes its cards with a gradient rather than a flat line — #D9DBE1 at the
   top fading to nothing at the bottom, top to bottom (handles 0.5,0 -> 0.5,1). The
   border stays in the box at 1px transparent so nothing shifts; the ring is a masked
   pseudo-element, which is the only way to stroke a rounded box with a gradient. */
.blog-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, var(--card-border) 0%, var(--card-border-0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; }

.blog-card:hover { box-shadow: var(--shadow); }
.blog-thumb { height: 158px; background: var(--bg-alt); position: relative; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 24px 24px 24px; }
.blog-body .tag { line-height: var(--lh-h6); font-size: var(--fs-h6); font-weight: 600; text-transform: uppercase; color: var(--amber-text); }
.blog-body h3 { font-size: var(--fs-h4); font-weight: 500; margin: 8px 0 16px; line-height: var(--lh-h4); }
.blog-body .more { line-height: var(--lh-h6); font-size: var(--fs-h6); font-weight: 600; color: var(--slate); }

/* ── /blog archive ─────────────────────────────────────────────────────────── */
/* The same card laid out in a grid instead of the slider, with the publication
   date under the title and the topic labels above the grid. */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bl-grid .blog-card { display: flex; flex-direction: column; }
.bl-grid .blog-body { display: flex; flex-direction: column; flex: 1; }
.bl-grid .blog-body .more { margin-top: auto; padding-top: 16px; }
.bl-date { display: block; margin-top: 8px; font-size: var(--fs-descriptor);
  line-height: var(--lh-descriptor); color: var(--text-dim); }

/* The topics the archive covers, as plain labels. Twelve posts all fit on one
   screen, so a working filter would be machinery with nothing to do; these say
   what is in here rather than pretending to narrow it down. */
.bl-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.bl-topic { padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--card-border);
  background: var(--bg-soft); font-size: var(--fs-h6); font-weight: 600;
  text-transform: uppercase; color: var(--text-dim); }

@media (max-width: 940px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-topics { margin-bottom: 24px; }
}