.hes-case-study-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--hes-color-surface);
  border: 1px solid var(--hes-color-border);
  border-radius: var(--hes-radius-lg);
  overflow: hidden;
  box-shadow: var(--hes-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hes-case-study-card:hover,
.hes-case-study-card:focus-visible {
  box-shadow: var(--hes-shadow-md);
  transform: translateY(-2px);
}

.hes-case-study-card:focus-visible {
  outline: 2px solid var(--hes-color-link);
  outline-offset: 2px;
}

.hes-case-study-card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hes-case-study-card__body {
  padding: var(--hes-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hes-space-2);
}

.hes-case-study-card__title {
  color: var(--hes-color-text-primary);
  margin: 0;
}

/* Bold, not colored - Layer 2's status colors (success/warning/error)
   are reserved for actual status meaning. A result figure isn't a
   status, so it earns emphasis through weight, not color. */
.hes-case-study-card__result {
  font-weight: 700;
  color: var(--hes-color-text-primary);
  margin: 0;
}