/* ===== Work — project cards =====
   Ported from the "Shy Project Cards" snippet (tested). The flee mechanic now
   lives in css/components/card.css as .card--shy (Adventures and Blog use it
   too), and the layout is the shared .card-grid, so Work tiles are the same
   width as Blog posts instead of a fixed 220px. Only the cover art is left
   here. The art gradients stay literal — those are per-case cover colours,
   meant to look the same in both themes. */

/* Two wide columns, matching Blog (.blog__grid) — same reasoning, same
   mechanics: auto-fit with a 30rem floor lands on exactly two columns at
   .card-grid's 68rem cap and collapses to one by itself on a narrow screen,
   with no media query to keep in sync. The min() around the floor stops the
   track staying 30rem wide on a phone and pushing the cards off-screen. */
.work__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
}

/* --case: a card with a coloured cover above the body. Fixed art height (not a
   percentage) because the card no longer has a fixed height to take a % of.
   Scales with the viewport now that the cards are twice as wide: at the old
   flat 170px the cover read as a thin band across a wide tile. Capped so it
   can't dominate the body copy on a large screen. */
.card--case .card__art {
  height: clamp(170px, 20vw, 240px);
  position: relative;   /* anchors the resting tint below */
}

/* --- the resting tint ---
   Every project cover sits under a 50% wash at rest and clears it on hover, so
   a grid of four reads as one calm block until you point at one of them.

   The colour is the CARD'S OWN BASE, --c-surface: white on light, the shade's
   dark blue/near-black on dark. That is what makes the wash read as the card
   dimming its own artwork rather than as a coloured filter laid over it — and
   it follows the theme and the shade picker for free, so nothing here has to
   name a single hex.

   A pseudo-element, not an extra background layer: `opacity` is what animates
   cleanly, whereas background-image gradients do not reliably interpolate.

   `pointer-events: none` is load-bearing — .card__link is a stretched overlay
   anchor covering the same area. It wins on z-index today (the link is 1, this
   is auto), but a decorative wash must never be able to eat a click. */
.card--case .card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-surface);
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--motion-hover),
              background var(--theme-dur) var(--ease-out);
}
/* :focus-within as well as :hover — these cards are reachable by keyboard
   through .card__link, and a wash that only lifts for a mouse would hide the
   artwork from anyone tabbing through. */
.card--case:hover .card__art::after,
.card--case:focus-within .card__art::after {
  opacity: 0;
}

/* Project cards read as clickable — case-study pages aren't wired up yet, but
   the affordance is intentional. Overrides .card--shy's neutral default. */
.card--case { cursor: pointer; }

.card--1 .card__art { background: linear-gradient(160deg, #ffd7c2, #ffb199); }
.card--2 .card__art { background: linear-gradient(160deg, #c8f2d4, #8fe0ac); }
.card--3 .card__art { background: linear-gradient(160deg, #cfe0ff, #a9c6ff); }

/* The one card with a real cover: the Avatar Builder, the only Work card with
   a case page behind it. Exported from Figma node 465:276575 (file
   f3e3QGIBAgCZ9S4SZ2vfsd, "Yumoji-build") at 2x and resized to 1200 wide —
   the slot renders at roughly 530x240 CSS px, so that covers a 2x display.
   Re-export from that node if it ever needs redoing.

   TWO layers, and the order matters: the gradient stays underneath as the
   card's colour identity, so a failed or still-loading image leaves the tile
   looking like its three siblings rather than like a hole. The source is
   2.214:1 and the slot is ~2.22:1, so `cover` crops essentially nothing.

   The gradient is keyed to the ARTWORK, not picked freely: this export sits on
   a flat #a8a1ff, sampled from its own corners, so the fallback runs a shade
   either side of that. Resample it if the cover is re-exported — the ground has
   already moved three times (#7369ff, #aaa4ff, now #a8a1ff). */
.card--4 .card__art {
  background:
    url(../../assets/work/yumoji-cover.webp) center / cover no-repeat,
    linear-gradient(160deg, #bab4ff, #968ef5);
}

/* The card-4-only #7369FF tint that used to sit here is gone: the wash is a
   .card--case rule now (see the top of this file), themed and applied to all
   four covers rather than one hex on one card. */

/* The Iconography cover is not an export either: it is a crop of the case
   page's own Full set section, rendered headless and cut to the card's 2.22:1
   by tools/build_iconography_preview.py. Rebuild it after a change to that
   section and the card cannot drift from what it links to.

   Same two-layer arrangement as .card--4, and the gradient underneath is
   keyed to the artwork for the same reason: a failed or still-loading image
   leaves a tile rather than a hole. Unlike the other four it is not a pair of
   hex values, because this cover is a photograph of a page that follows the
   theme — so the fallback follows it too, and the two surface roles are
   exactly the two grounds the picture is made of. */
.card--5 .card__art {
  background:
    url(../../assets/case/iconography/cover.webp) center / cover no-repeat,
    linear-gradient(160deg, var(--surface-raised), var(--surface-page));
}

/* The Small Illustrations cover is a band cut out of the source frame's full
   set (Figma OyawfANUPtP3EYv7TeNyrl, node 118:16921) by
   tools/build_illos_cover.py. Its Iconography sister photographs the case
   PAGE, which is the better arrangement — the card cannot then drift from
   what it links to — and this one should switch to it once section 06 is
   built and there is a page to photograph.

   Same two-layer arrangement as the other covers: a gradient underneath so
   a failed or still-loading image leaves a tile rather than a hole. Unlike
   --5 the fallback does NOT follow the theme, because this picture does not:
   the illustrations are multicolour artwork drawn on YuLife's dark purple
   and they carry it with them. The two stops are the artwork's own ground
   and one step below it, so the fallback cannot drift from the picture. */
.card--6 .card__art {
  background:
    url(../../assets/case/small-illustrations/cover.webp) center / cover no-repeat,
    linear-gradient(160deg, var(--illos-canvas), var(--illos-canvas-deep));
}