/* =========================================================================
   Block · Card / Service — Figma 9096:26322 (page Global: Blocks)
   Size × Layout, three variants:
     Size=Large, Layout=Row      9096:26296   image 280 wide, card 320 tall, arrow 44
     Size=Small, Layout=Row      9096:26305   image 120 wide, card 256 tall, arrow 32
     Size=Small, Layout=Stacked  9096:26320   image 180 tall over the text, card 460, arrow 32
   → .b-card-service--large | --small, .b-card-service--row | --stacked;
     code only: --size-auto (Small up to 1391, Large from 1392) and
     --layout-auto (Stacked up to 1023, Row from 1024) — for a module whose
     Figma variants switch them with the breakpoint (Card / Service does).
   The card: radius/box, clipped; ground White under card/background (a
   Module Background variable: Black 5 on a White module, White on the
   greys). Image (Gray/Placeholder unless a picture or a live pattern —
   patterns.js paints the box and draws its canvas into it); Content,
   spacing/card-padding all round, Text (Heading/Item over Body/Default,
   spacing/stack-m apart) at the top and the round arrow at the foot.
   Hover (a link): the old card — 1px outline, the heading goes Blue; the
   arrow does its own hover (ring ink, glyph ×1.3).
   Raw in Figma: the fixed card heights (320 · 256 · 460) — floors here, so
   longer copy grows the card instead of running into the arrow — the image
   sizes (280 · 120 wide, 180 tall), Content's gap between Text and the
   arrow (20 in a Row, 30 Stacked), and a 1px Black 20 top stroke that
   Figma does not draw (left out).
   ========================================================================= */
.b-card-service {
  --b-card-service-image: 120px;       /* Figma Small: raw 120 */
  --b-card-service-height: 256px;      /* Figma Small Row: raw 256 */
  position: relative;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: linear-gradient(var(--card-background), var(--card-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-service--large {
  --b-card-service-image: 280px;       /* Figma Large: raw 280 */
  --b-card-service-height: 320px;      /* Figma Large Row: raw 320 */
}
@media (min-width: 1392px) {
  .b-card-service--size-auto {
    --b-card-service-image: 280px;
    --b-card-service-height: 320px;
  }
}

/* Layout=Row: the image beside the text */
.b-card-service__image {
  position: relative;
  flex: none;
  display: block;
  overflow: hidden;
  background: var(--color-placeholder);
}
.b-card-service__image > img,
.b-card-service__image > canvas { display: block; width: 100%; height: 100%; }
.b-card-service__image > img { object-fit: cover; }

.b-card-service__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-20);                /* Figma Row: raw 20 */
  padding: var(--spacing-card-padding);
}
.b-card-service__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-m);
}
.b-card-service__heading { transition: color var(--ds-title-duration) var(--ds-hover-ease); }

.b-card-service--row,
.b-card-service--layout-auto {
  flex-direction: row;
  min-height: var(--b-card-service-height);
}
.b-card-service--row .b-card-service__image,
.b-card-service--layout-auto .b-card-service__image {
  width: var(--b-card-service-image);
  align-self: stretch;
}

/* Layout=Stacked: the image over the text */
.b-card-service--stacked {
  flex-direction: column;
  min-height: 460px;                   /* Figma Small Stacked: raw 460 */
}
.b-card-service--stacked .b-card-service__image { width: auto; height: 180px; align-self: stretch; }   /* raw 180 */
.b-card-service--stacked .b-card-service__content { gap: 30px; }                 /* Figma Stacked: raw 30 (no variable) */
@media (max-width: 1023px) {
  .b-card-service--layout-auto { flex-direction: column; min-height: 460px; }
  .b-card-service--layout-auto .b-card-service__image { width: auto; height: 180px; }
  .b-card-service--layout-auto .b-card-service__content { gap: 30px; }
}

/* clamp (a page's Max lines on the description), only at the breakpoint
   that sets it: a -webkit-box description loses its cap-height trim unless
   it is actually clamped, so the box is switched on only there */
@media (max-width: 1023px) {
  .b-card-service__description--clamp-420 { display: -webkit-box; -webkit-line-clamp: var(--b-card-service-clamp-420); }
}
@media (min-width: 1024px) and (max-width: 1391px) {
  .b-card-service__description--clamp-1024 { display: -webkit-box; -webkit-line-clamp: var(--b-card-service-clamp-1024); }
}
@media (min-width: 1392px) and (max-width: 1919px) {
  .b-card-service__description--clamp-1440 { display: -webkit-box; -webkit-line-clamp: var(--b-card-service-clamp-1440); }
}
@media (min-width: 1920px) {
  .b-card-service__description--clamp-1920 { display: -webkit-box; -webkit-line-clamp: var(--b-card-service-clamp-1920); }
}
[class*="b-card-service__description--clamp-"] {
  -webkit-box-orient: vertical;
  overflow: clip;
  overflow-clip-margin: .3em;          /* the trimmed box ends at the baseline: keep the descenders */
}

@media (any-hover: hover) {
  a.b-card-service:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--ds-outline); }
  a.b-card-service:is(:hover, :focus-visible) .b-card-service__heading { color: var(--color-blue); }
}
@media (prefers-reduced-motion: reduce) {
  .b-card-service, .b-card-service__heading { transition: none; }
}