/*
  workList + workListItem — the homepage Earlier Work list (BUILD 25 DECISION 1, Vivek 2026-10-02;
  redesigned 2026-10-20, build-site-changes-2026-10.txt item 13).
  A quieter tier than Featured Work: the step down comes from size and stillness (a smaller picture,
  a 20px title, no motion), never from fine print. One card per row in Featured Work's 900px column,
  32px apart, any number of them.
  Card: the Next card's fill (gray.200), 20px corners, no border; the corners trim the picture.
  From 768px up: text on the left, picture on the right, flush to the card's top, right and bottom
  edges and half the card wide, 3:2 (450 x 300 at full width). Below 768px: picture on top, full card
  width, 3:2, then the text. Picture size and shape are a rule, not tokens.
  Text: 32px padding on all four sides; title 20px/600 (body strong), question 20px (body), the
  standard "View work" link (20px, 20px arrow); 16px between them, the same as Featured Work.
  The whole card is the link: the "View work" link stretches over the card, so a click 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 (14), component v0.36.0.
*/

.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;
  flex-direction: column-reverse; /* phones: picture on top, while the text stays first in reading order */
  background-color: var(--work-list-item-fill-all);
  border-radius: var(--work-list-item-radius-all);
  overflow: hidden; /* trims the picture to the card's corners */
  color: var(--work-list-item-content-all);
}

.work-list-item__media {
  aspect-ratio: 3 / 2; /* not a token: image shapes are set by aspect ratio */
}
.work-list-item__media > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-list-item__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* centered top to bottom beside the picture */
  padding: var(--work-list-item-padding-all); /* 32px */
  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);
  color: var(--work-list-item-title-content-all); /* titles on their own line use ink.900 (2026-10-19) */
  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); /* 16px */
}

/* The standard link (inline-link.css): only the space above it is set here. */
.work-list-item .inline-link {
  margin-block-start: var(--work-list-item-link-gap-all); /* 16px */
}

/* 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 {
    flex-direction: row; /* text left, picture right: Featured Work's order */
  }
  .work-list-item__text {
    flex: 1 1 0;
  }
  .work-list-item__media {
    flex: 0 0 50%; /* the picture takes half the card (450 x 300 at full width) */
  }
}