/* =========================================================================
   Block · Card / Item — Figma 6856:55 (page Global: Blocks)
     Style=Boxed → .b-card-item--boxed   White, radius/box, padded
     Style=Line  → .b-card-item--line    no ground, a 1px Black 20 line below
     Size=Large  → .b-card-item--large   arrow 44; Boxed: spacing/stack-l at the sides
     Size=Small  → .b-card-item--small   arrow 32; Boxed: spacing/card-padding all round
   .b-card-item--auto (code only): Small up to 1391, Large from 1392 (the
               Desktop mode) — where a module's variants switch Size there
   A column, spacing/stack-xl apart: Content (spacing/stack-l apart: Eyebrow,
   Icon size/icon, Image 16:9, Heading/Item, Body/Default) growing, the
   arrow at the foot.
   Hover (a link): the old card — 1px outline, the heading goes Blue, the
   photo zooms; the arrow does its own hover.
   Raw in Figma: the line (1px), the Icon placeholder is drawn turned 180°.
   ========================================================================= */
.b-card-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);
  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-item--boxed {
  overflow: hidden;
  padding: var(--spacing-card-padding) var(--spacing-stack-l);
  border-radius: var(--radius-box);
  background: var(--color-white);
}
.b-card-item--boxed.b-card-item--small { padding-inline: var(--spacing-card-padding); }
.b-card-item--boxed.b-card-item--auto { padding-inline: var(--spacing-card-padding); }
@media (min-width: 1392px) {
  .b-card-item--boxed.b-card-item--auto { padding-inline: var(--spacing-stack-l); }
}
.b-card-item--line {
  padding: var(--spacing-card-padding) 0;
  border-bottom: 1px solid var(--color-black-20);
}

.b-card-item__content {
  flex: 1 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-l);
}
.b-card-item__icon { display: block; width: var(--size-icon); height: var(--size-icon); object-fit: contain; }
.b-card-item__media {
  align-self: stretch;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--color-placeholder);
}
.b-card-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-zoom-duration) var(--ds-zoom-ease); }
.b-card-item__heading { align-self: stretch; transition: color var(--ds-title-duration) var(--ds-hover-ease); }
.b-card-item__description { align-self: stretch; flex: 1 0 auto; }

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