/*
  workCard — one case study on the homepage: title, caption, "View work" button, and an image
  (component.json workCard, 8 tokens). No fill, border, shadow or radius: it sits on the page.
  On the homepage the cards sit in Featured Work's wide column (900px, section.css .section__wide),
  which the section header shares, so both edges line up with its hairline (decided by Vivek 2026-09-26).
  Row from 768px up: text column (320px) on the left, image on the right (never alternating),
  48px apart; the image fills the rest of the column. The image is SQUARE (decided by Vivek:
  4:3 no longer works at the narrower width): 532 x 532 at full width.
  Below 768px: stacked, image on top (full column width, square), 32px to the text.
  Only the "View work" link navigates (an inlineLink with a trailing arrow-right).
*/

.work-card {
  display: flex;
  flex-direction: column-reverse; /* stacked: image above text, while the text stays first in reading order */
  gap: var(--work-card-stacked-gap-all);
  color: var(--work-card-content-all);
}

.work-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

.work-card__caption {
  font-family: var(--work-card-caption-text-style-all-font-family);
  font-size: var(--work-card-caption-text-style-all-font-size);
  font-weight: var(--work-card-caption-text-style-all-font-weight);
  line-height: var(--work-card-caption-text-style-all-line-height);
  margin-block-start: var(--work-card-title-gap-all);
}

.work-card__text .inline-link {
  margin-block-start: var(--work-card-link-gap-all);
}

/* The image slot: square, as wide as the room it has. */
.work-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.work-card__media > * {
  width: 100%;
  height: 100%;
}

@media (width >= 768px) {
  .work-card {
    flex-direction: row;
    align-items: center; /* text centered top-to-bottom against the image: see build-decisions.txt BUILD 6 */
    gap: var(--work-card-image-gap-all);
  }
  .work-card__text {
    flex: 0 0 var(--work-card-text-max-width-all);
    max-width: var(--work-card-text-max-width-all);
  }
  .work-card__media {
    flex: 1 1 0; /* fills whatever the column has left after the text and the gap */
  }
}