.jarvis-card {
  overflow: hidden;
}
.jarvis-card__img {
  object-fit: cover;
}
/* Hover effect (the `hover` prop): 2px lift, a soft shadow and a slight
   darkening.
   brightness() rather than a background-colour change or a black wash on
   ::after: those only reach the solid-background variants, or dim the text
   along with the surface. brightness scales the surface and the text by the
   same factor, so the WCAG contrast the card was built with survives the
   hover — and it darkens the photo on the background variant too, which a
   background-colour hover cannot.
   (hover: hover) keeps it off touch screens, where a tap would otherwise leave
   the card stuck in its hovered state. :focus-within gives keyboard users the
   same feedback when they tab onto the card's link. */
@media (hover: hover) {
  .jarvis-card--hover {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out;
  }
  .jarvis-card--hover:hover,
  .jarvis-card--hover:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    filter: brightness(0.96);
  }
}
/* ponytail: fixed aspect keeps image-top cards even when source images differ in size */
.jarvis-card--image-top .jarvis-card__img {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.jarvis-card__img--side {
  min-height: 220px;
}
.jarvis-card--background {
  min-height: 320px;
  background-size: cover;
  background-position: center;
}
.jarvis-card--background .jarvis-card__overlay {
  position: absolute;
  inset: 0;
  background: #000;
}
/* Black text -> white overlay, so raising it lightens the photo instead of
   darkening it. One class deeper, to beat the #000 rule above. */
.jarvis-card--background .jarvis-card__overlay.jarvis-bg__overlay--light {
  background: #fff;
}
/* Text color (background variant): the text_color enum is light | black. */
.jarvis-card--text-light,
.jarvis-card--text-light :is(.card-title, .card-text) {
  color: #fff;
}
.jarvis-card--text-black,
.jarvis-card--text-black :is(.card-title, .card-text) {
  color: #000;
}
/* Light text -> black region behind the card for guaranteed contrast. This only
   covers the no-image card: a background image paints straight over it, so with
   an image the ONLY thing protecting contrast is the overlay opacity, which
   jarvis_overlay_alpha computes server-side — for black text as much as for
   light. */
.jarvis-card--background.jarvis-card--text-light {
  background-color: #000;
}