/*
 * ProjectCard.module.css → the shared "work-card" part.
 *
 * Ported by scripts/port-css.mjs. Class names are prefixed to survive being
 * flattened out of CSS Modules; design tokens are rewritten to the custom
 * properties theme.json emits. Edit this file, not the original.
 */

.px-work-card {
  display: grid;
  gap: var(--wp--preset--spacing--md);
  align-content: start;
}

/* The cover, title and summary are one link; the film link is a sibling so
   the two controls never nest. */
.px-work-card__link {
  display: grid;
  gap: var(--wp--preset--spacing--md);
  align-content: start;
  color: inherit;
}

.px-work-card__frame {
  overflow: hidden;
}

/* The film link. A quiet, clearly-labelled control under the card — it opens
   the film on Instagram rather than playing anything here. */
.px-work-card__film {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-work-card__film:hover {
  color: var(--accent);
}

.px-work-card__film-icon {
  font-size: 0.7em;
  line-height: 1;
}

.px-work-card__body {
  display: grid;
  gap: 0.35rem;
}

.px-work-card__category {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.px-work-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-work-card:hover .px-work-card__title {
  color: var(--accent);
}

.px-work-card__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.px-work-card__sep {
  opacity: 0.5;
}

/* ---- Large variant, used on the work index ---- */

.px-work-card__large .px-work-card__title {
  font-size: var(--wp--preset--font-size--xl);
}

.px-work-card__large .px-work-card__body {
  gap: 0.5rem;
}

.px-work-card__summary {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 300;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 44ch;
  margin-top: 0.35rem;
}

/* Provenance. Quiet, but never hidden — the whole point is that a visitor
   never has to wonder whether this was a client project. */
.px-work-card__context {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg-faint);
  max-width: 44ch;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  margin-top: 0.35rem;
}