/* =========================================================================
   Block · Card / Story — Figma 7014:710 (page Global: Blocks)
   White. Content (spacing/card-padding, spacing/stack-l apart: Logo,
   Heading/Card Large, Body/Default) grows; the video preview below it, 16:9
   (the owner's rule for every video preview — Figma draws Large 498 × 288),
   the play button spacing/media-inset from its bottom-left corner.
     Size=Large → .b-card-story--large   play 44
     Size=Small → .b-card-story--small   play 32
     .b-card-story--auto (code only): play 32 up to 1391, 44 from 1392
   The play button is Figma's Play/Outline instance with a White fill and a
   White 30 ring laid over it — i.e. the Filled style; it is Filled here.
   Hover (a link): the old card — 1px outline, heading Blue, photo zoom.
   Large holds Content at 350 tall at least (Figma: min-height 350, raw).
   The heading breaks balanced, as Figma's lines fall ("Cohere Trains 3x /
   Faster for Enterprise AI"); greedy breaking puts "Faster for" up.
   Raw in Figma: the logo box 130 × 32; the play button's place (Large 32/32
   from the corner = media-inset at Desktop, Small 18/17 — media-inset is 20).
   ========================================================================= */
.b-card-story {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  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-story__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
  padding: var(--spacing-card-padding);
}
.b-card-story__logo { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.b-card-story__logo--empty { width: 130px; border-radius: var(--radius-box); background: var(--color-placeholder); }
.b-card-story__heading, .b-card-story__description { align-self: stretch; }
.b-card-story--large .b-card-story__content { min-height: 350px; }
@media (min-width: 1392px) {
  .b-card-story--auto .b-card-story__content { min-height: 350px; }
}
.b-card-story__heading { text-wrap: balance; }
.b-card-story__heading { transition: color var(--ds-title-duration) var(--ds-hover-ease); }
.b-card-story__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-placeholder);
}
.b-card-story__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-zoom-duration) var(--ds-zoom-ease); }
.b-card-story__media > .e-button-round {
  position: absolute;
  left: var(--spacing-media-inset);
  bottom: var(--spacing-media-inset);
}

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