/* ============================================================
   card.css — design system v0 — composant card générique
   Owner: xilrian-agent (XA) · 2026-05-08
   ============================================================
   Card de base — utilisable pour : library boardgame entries,
   PA episode cards, RA paper cards, onmars game-state widgets.
   Pour cross-link cards (Tier 2 vision-web N3), voir
   `card-de-reference.css`.
   ============================================================ */

.ds-card {
  display: flex;
  flex-direction: column;
  padding: var(--ds-space-5);
  background-color: var(--surface-color-card-bg, #fff);
  border: var(--ds-border-width-1) solid var(--surface-color-rule, #e0e0e0);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow var(--ds-transition-base),
              transform var(--ds-transition-base),
              border-color var(--ds-transition-base);
}

/* Card link/hover si toute la card est cliquable (a > .ds-card) */
a.ds-card,
.ds-card--clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.ds-card:hover,
.ds-card--clickable:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
  border-color: var(--surface-color-primary, var(--surface-color-rule, #ccc));
}

/* ----- Slots ----- */
.ds-card__media {
  margin: calc(-1 * var(--ds-space-5)) calc(-1 * var(--ds-space-5)) var(--ds-space-4);
  border-top-left-radius: var(--ds-radius-md);
  border-top-right-radius: var(--ds-radius-md);
  overflow: hidden;
}

.ds-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ds-card__header {
  margin-bottom: var(--ds-space-3);
}

.ds-card__title {
  margin: 0 0 var(--ds-space-1) 0;
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
}

.ds-card__subtitle {
  margin: 0;
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted, #666);
}

.ds-card__body {
  flex: 1 1 auto;
  font-size: var(--ds-font-size-base);
  line-height: var(--ds-line-height-normal);
}

.ds-card__body > *:last-child {
  margin-bottom: 0;
}

.ds-card__footer {
  margin-top: var(--ds-space-4);
  padding-top: var(--ds-space-3);
  border-top: var(--ds-border-width-1) solid var(--surface-color-rule, #e0e0e0);
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted, #666);
}

/* ----- Variants ----- */
.ds-card--featured {
  border-color: var(--surface-color-primary, #1a1a1a);
  border-width: var(--ds-border-width-2);
}

.ds-card--compact {
  padding: var(--ds-space-3);
}

.ds-card--flat {
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ----- Card meta line (e.g. "2024 · 4 joueurs · 60min") ----- */
.ds-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  font-size: var(--ds-font-size-sm);
  color: var(--surface-color-muted, #666);
}

.ds-card__meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-card__meta > * + *::before {
  content: "·";
  margin-right: var(--ds-space-2);
  color: var(--surface-color-rule, #ccc);
}