.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:has(.card__link:hover),
.card:has(.card__link:focus-visible) {
  border-color: var(--c-slate-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__media {
  position: relative;
  aspect-ratio: var(--card-ratio, 4 / 3);
  overflow: hidden;
  background: var(--c-slate-050);
}
.card__media :is(img, picture) { width: 100%; height: 100%; object-fit: cover; }
.card__media img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:has(.card__link:hover) .card__media img { transform: scale(1.045); }

.card__body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }

.card__eyebrow {
  margin: 0;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-on-light);
}
.card__title { margin: 0; font-size: var(--fs-lg); }
.card__link { color: inherit; text-decoration: none; }
/* Stretch the hit area over the whole card without nesting interactive elements. */
.card__link::after { content: ''; position: absolute; inset: 0; }
.card__summary { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-normal); }
.card__meta { margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* Overlay variant: text sits on the image. Used for the four procedure
   categories, which is where the original site spent its imagery.
   4:3 rather than 3:4 — four tall portrait tiles were costing nearly 600px of
   homepage for four words of content. */
.card--overlay {
  border: 0;
  aspect-ratio: var(--card-ratio, 4 / 3);
  min-height: 11rem;
}
.card--overlay .card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.card--overlay .card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(26 34 43 / 0.86) 0%, rgb(26 34 43 / 0.42) 46%, rgb(26 34 43 / 0.10) 100%);
}
.card--overlay .card__body { position: relative; justify-content: flex-end; padding: var(--s-5); }
.card--overlay .card__title { color: #fff; }
.card--overlay .card__summary { color: rgb(255 255 255 / 0.82); }
.card--overlay .card__eyebrow { color: var(--c-gold); }