/* =========================================================================
   Block · Card / Image + Text — Figma 6872:889 (page Global: Blocks)
   Card (Thumbnail 16:9 radius/box; 40 below it: Content — Heading/Card
   Large over Body/Default, spacing/stack-m apart — and the arrow,
   spacing/stack-l apart; spacing/stack-m below) and, at the foot, the
   Caption: Body/Lead between a 1px Black 20 line and spacing/stack-m
   above and below.
     Size=Large → .b-card-image-text--large   arrow 44; Content 130 tall
     Size=Small → .b-card-image-text--small   arrow 32; Content hugs
     .b-card-image-text--auto (code only): Small up to 1391, Large from 1392
   Hover (a link): the old card — 1px outline, heading Blue, photo zoom.
   Raw in Figma: the 40 below the thumbnail (bound to space/40 on Small
   only), Large's fixed Content height 130, the 1px line.
   ========================================================================= */
.b-card-image-text {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-black);
  text-decoration: none;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow var(--ds-outline-duration) var(--ds-hover-ease);
}
.b-card-image-text__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: var(--spacing-stack-m);
}
.b-card-image-text__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--color-placeholder);
}
.b-card-image-text__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-zoom-duration) var(--ds-zoom-ease); }
.b-card-image-text__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
}
.b-card-image-text__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-m);
}
.b-card-image-text--large .b-card-image-text__content { min-height: 130px; }
@media (min-width: 1392px) {
  .b-card-image-text--auto .b-card-image-text__content { min-height: 130px; }
}
.b-card-image-text__heading { transition: color var(--ds-title-duration) var(--ds-hover-ease); }
.b-card-image-text__caption {
  padding-block: var(--spacing-stack-m);
  border-top: 1px solid var(--color-black-20);
}

@media (any-hover: hover) {
  a.b-card-image-text:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--ds-outline); }
  a.b-card-image-text:is(:hover, :focus-visible) .b-card-image-text__heading { color: var(--color-blue); }
  a.b-card-image-text:is(:hover, :focus-visible) .b-card-image-text__media img { transform: scale(var(--ds-zoom)); }
}
@media (prefers-reduced-motion: reduce) {
  .b-card-image-text, .b-card-image-text__heading, .b-card-image-text__media img { transition: none; }
}