/* ===== Card — the one shared surface component =====
   Used by three sections that used to each invent their own look:
     Work       — .card--case (cover art above the body)
     Adventures — .card--long (one wide card per adventure)
     Blog       — .card--post (one card per article)
   All three also take .card--shy (the cursor-flee behaviour) and sit on
   .card-grid or their own list container.
   Everything visual that makes a card *a card* lives here — radius, shadow,
   surface colour, padding, and the tag/title type pair. Section stylesheets
   only add what's genuinely specific to them (fixed size, cover art, grid
   placement) via a --modifier, so the three never drift into looking like
   three different design systems. */

.card {
  position: relative;
  /* veiled, not solid — see --c-surface-veil in tokens.css: cards scroll
     under the fixed nav dock, and two identical opaque whites merged into
     one shape at the overlap */
  background: var(--c-surface-veil);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: background var(--theme-dur) var(--ease-out);
}

/* Padded content area. Work puts this under its cover art; Adventures and
   Blog use it as the whole card body. */
.card__body {
  padding: var(--sp-3) var(--sp-3);
  box-sizing: border-box;
}

/* The small muted line above a title — project name, date, whatever labels
   the card. Same size/colour everywhere on purpose. */
.card__tag {
  display: block;                       /* Blog uses a <time>, which is inline */
  font-size: var(--fs-100);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;   /* keeps Blog dates from jittering */
  margin-bottom: var(--sp-1);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--c-ink);
  transition: color var(--motion-hover);
}

/* --- domain chips: the field a project sits in (SaaS, Fintech, …), under the
   title. A card can carry more than one, so it's a wrapping flex row rather
   than inline text — two chips on a narrow card stack instead of overflowing.
   Outlined rather than filled: the cover art above already carries the card's
   colour, and a filled pill would compete with it. --- */
.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.card__chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-100);
  line-height: var(--leading-normal);
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: border-color var(--theme-dur) var(--ease-out),
              color var(--theme-dur) var(--ease-out);
}

/* --- .card__link: makes a whole card clickable without restructuring it.
   A stretched overlay rather than an <a> wrapped around the contents, because
   .card--case lays out .card__art and .card__body as direct children and a
   wrapper would break that grid. The label lives in the anchor's aria-label,
   so the empty box still announces itself.

   Note this SUPPLIES the pointer that .card--shy withholds: a shy card that
   is also a link does move AND click, which is the exception, not the rule. --- */
.card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
}
.card__link:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: -4px;
}

/* --- .card--shy: a card that flees the cursor. The transform itself lives on
   the shared `data-shy` hook (css/components/shy.css) — this only adds what's
   card-specific. Carries NO dimensions; each section sizes its own cards. --- */
.card--shy {
  /* Neutral on purpose: a shy card moves, it doesn't click. Only Blog cards
     are actually links, and their inner <a> brings its own pointer. */
  cursor: default;
}

/* --- shared grid: Work tiles and Blog posts sit on the same track definition
   so the two sections read as one system at every viewport width. --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-3);
  max-width: 68rem;
  margin-inline: auto;
}