/* ------------------------------------------------------------
 * 3. card + card-grid  (sub-blocks)
 *
 * The universal listing unit. ONE card shell (surface, radius,
 * border, hover lift) + a small SLOT vocabulary. What makes an
 * "article card" vs an "event card" vs an "ambassador card" is
 * WHICH SLOTS ARE FILLED — composition, not a variant flag.
 * Style variants are reserved for true style axes:
 *
 *   .card-grid   data-cols = 2 | 3 (default) | 4
 *                data-density = "compact" — tighter body, smaller
 *                  title, no hover shadow ("related" 3-ups at the
 *                  foot of detail pages)
 *   .card-media  data-ratio = 16-9 (default) | 4-3 | 16-10 |
 *                  square | portrait
 *                data-fit = "contain" — product-shot mode: image
 *                  contained with padding on the tinted surface
 *                  (default is cover, edge-to-edge)
 *
 * Slot vocabulary (all optional, any order inside .card-body):
 *   .card-media   media surface incl. placeholder (+ .badge overlay)
 *   .card-kicker  small accent uppercase line (event date, category)
 *   .card-meta    muted meta row (.strong emphasis, .sep divider)
 *   .card-tags    row of .card-tag labels
 *   h3            card title (serif, subsection scale)
 *   .excerpt      2-line clamped summary
 *   .card-action  accent arrow-link, pinned to the card bottom
 *   .card-foot    bottom row over a hairline; holds .card-price
 *                 and/or .card-spots (or anything paired)
 *
 * Gap between cards belongs to .card-grid; the band around the
 * grid belongs to the composing section (e.g. .block-card-grid).
 *
 * Required tokens: --serif, --color-ink, --color-ink-soft,
 *   --color-body, --color-muted, --color-accent,
 *   --color-accent-strong, --color-bg-tint, --color-line,
 *   --color-line-soft, --radius-lg, --text-subsection*.
 * ------------------------------------------------------------ */

/* --- section head slots (inside .block-card-grid, above the grid).
 * Band padding-block stays PAGE-level — it's rhythm between blocks
 * and varies per composition (TODO 3). These are structural: */
.block-card-grid .list-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.block-card-grid .list-count { font-size: 14px; color: var(--color-muted); }
.block-card-grid .see-all { font-size: 14px; font-weight: 600; color: var(--color-accent); white-space: nowrap; padding-bottom: 8px; }
.block-card-grid .title-block { margin-bottom: 32px; }
/* …but inside the list-header the title-block is laid out by the flex row
 * (align-items: flex-end, with its own margin-bottom) — its standalone
 * 32px bottom margin becomes dead space that misaligns the count. */
.block-card-grid .list-header .title-block { margin-bottom: 0; }

/* --- card-grid: the listing grid (width-less, fills container) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.card-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* --- card shell — shared by every context -------------------- */
.card {
  background: #fff;
  border: 1px solid var(--color-line); /* REV-004: visible frame, no shadow */
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.2s;
}
.card:hover {
  /* Hover ruling 11 June 2026: NO movement on UI blocks — colour
   * shift only (supersedes REV-002's lift; "never shadow" stands). */
  border-color: var(--ink-200);
}

/* --- slot: media ---------------------------------------------- */
.card-media {
  aspect-ratio: 16 / 9;
  background: var(--color-bg-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-style: italic;
  font-size: 13px;
  position: relative;
}
.card-media[data-ratio="4-3"]      { aspect-ratio: 4 / 3; }
.card-media[data-ratio="16-10"]    { aspect-ratio: 16 / 10; }
.card-media[data-ratio="square"]   { aspect-ratio: 1; }
.card-media[data-ratio="portrait"] { aspect-ratio: 4 / 5; }
.card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* contain-mode: product shots sit inside the surface, not over it */
.card-media[data-fit="contain"] { padding: 24px; }
.card-media[data-fit="contain"] > img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* badge overlay — sold-out / free / live (dark allowed: badge, not band) */
.card-media .badge { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; z-index: 1; }
.card-media .badge.free     { background: #fff; color: var(--color-ink); }
.card-media .badge.sold-out { background: var(--color-ink); color: #fff; }
.card-media .badge.live     { background: var(--color-accent); color: #fff; }
.card-media .badge.soon     { background: var(--color-muted); color: #fff; }

/* --- slot: body + title --------------------------------------- */
.card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card h3 {
  font-family: var(--serif);
  font-size: var(--text-subsection);
  line-height: var(--text-subsection-line);
  letter-spacing: var(--text-subsection-track);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}

/* --- slot: kicker — small accent line (date, category) -------- */
.card-kicker { font-size: 12px; color: var(--color-accent-strong); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* --- slot: meta — muted info row (byline, industry, location) - */
.card-meta { font-size: 12px; color: var(--color-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-meta .strong { color: var(--color-ink); font-weight: 600; }
.card-meta .sep { color: var(--color-line); }

/* --- slot: tags — free-text labels (chip look lives in §11) ----- */
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- slot: excerpt — clamped 2-line summary -------------------- */
.card .excerpt { font-size: 14px; color: var(--color-body); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

/* --- slot: action — arrow-link pinned to the bottom ------------ */
.card-action { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--color-accent); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.15s; }
.card:hover .card-action { gap: 10px; }

/* --- slot: foot — bottom row over a hairline (price + spots) --- */
.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card-price { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); }
.card-price.free { color: var(--color-accent); }
.card-spots { font-size: 12px; color: var(--color-accent-strong); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.card-spots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.card-spots.muted { color: var(--color-muted); }
.card-spots.muted .dot { background: var(--color-muted); }

/* --- density: compact — related 3-ups on detail pages ---------- */
.card-grid[data-density="compact"] .card { box-shadow: none; }
.card-grid[data-density="compact"] .card-body { padding: 22px; gap: 10px; }
.card-grid[data-density="compact"] .card h3 { font-size: 19px; }

/* --- responsive collapse --------------------------------------- */
@media (max-width: 1024px) {
  .card-grid,
  .card-grid[data-cols="2"],
  .card-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .card-grid,
  .card-grid[data-cols="2"],
  .card-grid[data-cols="4"] { grid-template-columns: 1fr; gap: 24px; }
}