/*
  workList + workListItem — the homepage Earlier Work list (BUILD 25 DECISION 1, Vivek 2026-10-02).
  A quieter tier than Featured Work: shallow cards stacked in the 42rem text column, any number of them.
  Card: the stat card's darker fill, 20px corners, no border. Image flush on the left (the card trims
  its corners): 3:2, 192 x 128 from 768px up; a 96px square below, cut from the center of the same image.
  Text on the right: title 20px/600 (body strong), caption 16px (caption), "View work" 16px link with a
  16px arrow. 32px (card padding) between image and text and on the text's right; 16px above and below the text
  (only shows when the text is taller than the image, e.g. on phones).
  The whole card is the link: the "View work" link stretches over the card, so a tap anywhere opens the
  case study, and screen readers still hear one link. Hover/tap: the link's 5% blue tint over the card.
  Focus: the ring goes round the whole card.
  TOKENS: component.json workList (1) and workListItem (18); the small link uses inlineLink.textStyleSmall
  and inlineLink.iconSizeSmall (batch 8, component v0.25.0). Image heights are not tokens (3:2 from 768px up,
  square below).
*/

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--work-list-gap-all); /* 32px between cards */
}

.work-list-item {
  position: relative; /* the stretched link covers this box */
  display: flex;
  align-items: center;
  gap: var(--work-list-item-image-gap-all); /* 32px */
  padding-inline-end: var(--work-list-item-padding-end-all);
  background-color: var(--work-list-item-fill-all);
  border-radius: var(--work-list-item-radius-all);
  overflow: hidden; /* trims the image to the card's corners */
  color: var(--work-list-item-content-all);
}

.work-list-item__media {
  flex: 0 0 var(--work-list-item-image-width-narrow-all); /* phones: 96px square */
  align-self: stretch; /* full card height if the text runs taller */
  min-height: var(--work-list-item-image-width-narrow-all); /* square: height = width (not a token) */
}
.work-list-item__media > * {
  width: 100%;
  height: 100%;
  object-fit: cover; /* real images: center crop */
}

.work-list-item__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--work-list-item-text-padding-vertical-all); /* 16px */
  flex: 1 1 0;
  min-width: 0;
}

.work-list-item__title {
  font-family: var(--work-list-item-title-text-style-all-font-family);
  font-size: var(--work-list-item-title-text-style-all-font-size);
  font-weight: var(--work-list-item-title-text-style-all-font-weight);
  line-height: var(--work-list-item-title-text-style-all-line-height);
  text-wrap: balance;
}

.work-list-item__caption {
  font-family: var(--work-list-item-caption-text-style-all-font-family);
  font-size: var(--work-list-item-caption-text-style-all-font-size);
  font-weight: var(--work-list-item-caption-text-style-all-font-weight);
  line-height: var(--work-list-item-caption-text-style-all-line-height);
  margin-block-start: var(--work-list-item-title-gap-all); /* 4px */
}

/* The small link: caption size, 16px arrow. */
.work-list-item .inline-link {
  margin-block-start: var(--work-list-item-link-gap-all); /* 8px */
  font-family: var(--inline-link-text-style-small-all-font-family);
  font-size: var(--inline-link-text-style-small-all-font-size);
  font-weight: var(--inline-link-text-style-small-all-font-weight);
  line-height: var(--inline-link-text-style-small-all-line-height);
}
.work-list-item .inline-link__icon {
  width: var(--inline-link-icon-size-small-all);  /* 16px */
  height: var(--inline-link-icon-size-small-all);
  vertical-align: -0.15em;
}

/* Stretched link: covers the card; also carries the hover tint. */
.work-list-item .inline-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: background-color var(--work-list-item-transition-all-duration) var(--work-list-item-transition-all-easing);
}
/* the words don't get their own highlight here: the whole card does */
.work-list-item .inline-link:hover,
.work-list-item .inline-link:active {
  background-color: transparent;
}
@media (hover: hover) {
  .work-list-item .inline-link:hover::after {
    background-color: var(--work-list-item-overlay-hover);
  }
}
.work-list-item .inline-link:active::after {
  background-color: var(--work-list-item-overlay-hover);
  transition-duration: 0s;
}

/* Focus ring round the whole card, not just the words. */
.work-list-item .inline-link:focus-visible {
  outline: none;
}
.work-list-item:has(.inline-link:focus-visible) {
  outline: var(--work-list-item-focus-ring-width-focus) solid var(--work-list-item-focus-ring-color-focus);
  outline-offset: var(--work-list-item-focus-ring-offset-focus);
}

@media (width >= 768px) {
  .work-list-item__media {
    flex-basis: var(--work-list-item-image-width-all); /* 192px */
    min-height: calc(var(--work-list-item-image-width-all) * 2 / 3);  /* 128px: 3:2 (not a token) */
  }
}