/*
  workCard — one case study on the homepage: title, caption, "View work" button, and an image
  (component.json workCard, 11 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);
  color: var(--work-card-title-content-all); /* titles on their own line use ink.900 (2026-10-19) */
  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 */
  }
}

/*
  PINNED IMAGE (homepage Featured Work; build-site-changes-2026-10.txt item 6, locked by Vivek 2026-10-19).
  From 768px wide (breakpoints.md) and 680px tall (breakpoints.mdHeight): one image stays pinned beside
  the three cards while their text scrolls past. When a card's title lands level with the middle of the
  image, it holds there for workCard.hold (128px of scrolling, never a pause in time) while the image
  crossfades to that card's (workCard.imageTransition, 300ms ease-out). The image lets go with the last card.
  Narrower or shorter windows, or no script: every card shows its own image, as above.
  js/work-card-pin.js builds the pinned column (decorative copies; each card keeps its real image and
  alt text for screen readers, just not seen) and turns this on with .is-ready.
  --work-card-pin-size (set by the script) is the image's rendered height: not a token, it follows the column.
*/
.work-card-pin {
  --work-card-pin-size: 532px; /* starting value only (the full-width image); the script replaces it with the measured size */
}
@media (width >= 768px) and (height >= 680px) { /* breakpoints.md, breakpoints.mdHeight */
  .work-card-pin.is-ready {
    position: relative;
    /* where the pinned image and each held title sit: centered in the space below the nav */
    --work-card-pin-top: calc(var(--nav-clearance) + (100dvh - var(--nav-clearance) - var(--work-card-pin-size)) / 2);
  }
  .work-card-pin.is-ready .work-card {
    align-items: flex-start;
  }
  /* each card's own image keeps its space and its alt text, but isn't seen;
     the space below it is the hold */
  .work-card-pin.is-ready .work-card__media {
    opacity: 0;
    margin-block-end: var(--work-card-hold-all);
  }
  /* the text sits centered in an image-tall slot that sticks where the image is pinned */
  .work-card-pin.is-ready .work-card__text {
    position: sticky;
    top: var(--work-card-pin-top);
    height: var(--work-card-pin-size);
    justify-content: center;
  }
  /* the pinned column: from the first card's image top to the last card's image bottom */
  .work-card-pin__column {
    position: absolute;
    inset-block: var(--work-card-group-gap-all);
    inset-inline-end: 0;
    width: calc(100% - var(--work-card-text-max-width-all) - var(--work-card-image-gap-all));
    pointer-events: none;
  }
  .work-card-pin__stack {
    position: sticky;
    top: var(--work-card-pin-top);
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  .work-card-pin__stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .work-card-pin__stack img.is-active {
    opacity: 1;
  }
}
/* the crossfade only for visitors who haven't asked to reduce motion; otherwise the image changes at once */
@media (width >= 768px) and (height >= 680px) and (prefers-reduced-motion: no-preference) {
  .work-card-pin__stack img {
    transition: opacity var(--work-card-image-transition-all-duration) var(--work-card-image-transition-all-easing);
  }
}
@media (width < 768px), (height < 680px) {
  .work-card-pin__column {
    display: none;
  }
}