/* cards.css — the ONE shared project-card component: thumbnail (uncropped,
   optional browser chrome, optional crossfade), title/year line, colour tag
   chips, wide (2-col) span for photo/web projects. Used by /op/'s index grid
   AND every work/*.html page's "More projects" footer grid, so both always
   render the same card design — same lesson as header.css: duplicate CSS
   between op.css and style.css drifted apart, so this lives in one place and
   both pages load it. Relies only on --sans / --rule / --dim, all of which
   op.css and style.css both already define with matching values. */

.op-card.is-wide { grid-column: span 2; }
.op-card {
  display: block;
  text-align: left;
  min-width: 0;
}
/* caption row: title flush left, year flush right */
.op-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}
.op-thumb {
  display: block;
  position: relative;    /* extra images stack over the base one */
  background: #101010;
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.op-thumb img {
  width: 100%;
  height: auto;          /* natural ratio — never cropped */
  display: block;
}
/* crossfade stack: base image sets the height; extras cover it and fade */
.op-thumb .op-extra {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}
.op-thumb .op-extra.is-on { opacity: 1; }

/* mini browser chrome on web-project thumbnails — matches the main site */
.op-thumb[data-frame="browser"]::before {
  content: '';
  display: block;
  height: 12px;
  background: #1A1A18;
  background-image:
    radial-gradient(circle at 8px 6px, #FF5F57 2px, transparent 2.5px),
    radial-gradient(circle at 17px 6px, #FEBC2E 2px, transparent 2.5px),
    radial-gradient(circle at 26px 6px, #28C840 2px, transparent 2.5px);
  border-bottom: 1px solid var(--rule);
  border-radius: 4px 4px 0 0;
}
.op-thumb[data-frame="browser"] .op-extra {
  top: 13px;             /* extras start below the chrome bar */
  height: calc(100% - 13px);
}

/* real playing preview for web projects with a Vimeo clip (see
   scripts/lib/card-thumb.js) — same aspect-ratio-box technique as the
   detail-page cover in style.css, redeclared here (as display:block, since
   .op-thumb's children are <span>s) so /op — which doesn't load style.css —
   still renders it correctly. */
.op-thumb .vimeo-embed {
  display: block;
  position: relative;
  width: 100%;
  background: #000;
}
.op-thumb .vimeo-embed::before {
  content: '';
  display: block;
  padding-top: calc(var(--r, .5625) * 100%);
}
.op-thumb .vimeo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.op-card:hover .op-thumb img { opacity: 0.82; }
.op-card:hover .op-thumb .op-extra:not(.is-on) { opacity: 0; }  /* hover dim never reveals hidden extras */
.op-title {
  display: block;
  font-family: 'Sanjan', 'vendetta', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-bottom: 0.15rem;
  color: inherit;
}
.op-card:hover .op-title { text-decoration: underline; text-underline-offset: 3px; }

/* tag chip — vivid fill (colour set as --c by initChipColors in main.js /
   the op index's own inline script), black text, pill shape */
.op-chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1;
  text-box: trim-both cap alphabetic;  /* centre the glyphs in the pill */
  letter-spacing: 0.04em;
  color: #000;
  background: var(--c, #8F8D85);
  border-radius: 999px;
  padding: 4px 9px;
}
/* per-card tag row — one step smaller than a standalone/filter chip */
.op-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: 0.4rem;
}
.op-card-tags .op-chip {
  font-size: 8.5px;
  padding: 2px 6px 3px;
}
.op-year {
  flex: none;
  font-style: italic;
  font-size: 13px;
  color: var(--dim, #8F8D85);
}