/* Shared photo card with lower text overlay - structural treatment only.
   Interactive behavior (hover motion, stretched-link) lives with the consuming
   component until a second consumer (e.g. c8008) warrants generalizing it. */

.card-overlay {
  position: relative;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.card-overlay__image {
  position: absolute;
  inset: 0;
}

.card-overlay__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-overlay__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 18, 61, 0.9) 0%, rgba(13, 18, 61, 0.45) 55%, transparent 100%);
}

.card-overlay__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.card-overlay__eyebrow {
  font-family: jost-variable, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.5rem;
}

.card-overlay__headline {
  font-family: jost-variable, sans-serif;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.5rem;
}

.card-overlay__body {
  font-family: "DM Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 1.25rem;
}

/* The card row's container matches the nav's fluid width from 1026px up
   (see c8001.css), so the row's outer edges track the nav's logo/language
   edges continuously instead of only at one breakpoint. A single constant
   488:725 ratio (rather than switching ratios at different widths) keeps the
   photo crop stable as the window resizes — only the box's absolute size
   changes, not its shape. Type sizes scale with viewport width (vw) across
   the same range so the text never overflows the shrinking card, without
   the abrupt size jump a fixed-size breakpoint switch would cause; both are
   frozen back to fixed values at 1920px, where the container itself stops
   growing (matching the nav's own 1920px cap). */
@media (min-width: 1026px) {
  .card-overlay {
    aspect-ratio: 488 / 725;
  }

  .card-overlay__eyebrow {
    font-size: 0.9375vw;
  }

  .card-overlay__headline {
    font-size: 1.5625vw;
  }

  .card-overlay__body {
    font-size: 1.041667vw;
  }
}

@media (min-width: 1920px) {
  .card-overlay__eyebrow {
    font-size: 1.125rem;
  }

  .card-overlay__headline {
    font-size: 1.875rem;
  }

  .card-overlay__body {
    font-size: 1.25rem;
  }
}