/* ============================================================================
 * tc-item-card — eine Ware mit Preis, Regeltext und Zustand (08.09.2026, #148)
 * ----------------------------------------------------------------------------
 * Gebaut fuer den Mordheim-Handelsposten, aber ohne Wissen darueber, WAS
 * verkauft wird: Kopf (Name + Preis), optionale Seltenheitszeile, Regeltext,
 * optionaler Fuss. Dieselbe Form passt auf Zaubergegenstaende bei Pathfinder
 * und auf die Inducements bei Blood Bowl.
 *
 * AUFBAU
 *   .tc-item-card(.tc-item-card--selten | --gewoehnlich)(.is-gesperrt)
 *     .tc-item-card__kopf
 *       .tc-item-card__name   .tc-item-card__preis
 *     .tc-item-card__seltenheit   (optional)
 *     .tc-item-card__text         (nimmt den Rest auf)
 *     .tc-item-card__fuss         (optional, bleibt unten)
 *
 * ⚠️ DIE KARTEN EINER REIHE MUESSEN GLEICH HOCH SEIN. Deshalb ist die Karte
 * eine Flex-Spalte und `__text` traegt `flex: 1` — sonst steht der Fuss bei
 * einer Karte mit Hinweis-Marke tiefer als beim Nachbarn ohne, und die Reihe
 * franst aus. Das war im Handelsposten schon so geloest; die Begruendung
 * wandert mit, sonst baut sie der naechste Leser wieder aus.
 *
 * ⚠️ SELTENHEIT IST EINE DATENFARBE (§9) UND BLEIBT HART. Gruen heisst „im
 * Sortiment", Gelb „selten, Verfuegbarkeitswurf noetig" — die Farbe sagt
 * etwas ueber die Ware, nicht ueber die Stimmung der Seite. Theme-getrieben
 * ist nur das Chrome: Flaeche, Rand, Schrift.
 *
 * ⚠️ DER RAND WAR VORHER `rgba(201,169,89,…)`, ALSO #c9a959 — und das ist
 * NICHT `--tc-accent` (#a1917a). Der Umzug auf das Token verschiebt den Ton
 * also sichtbar von Gold nach Stein-Taupe. Das ist gewollt: Die Komponente
 * soll dem Theme folgen, und im Handelsposten steht sie ohnehin neben
 * Bausteinen, die den Akzent schon nehmen. Wer den alten Goldton zurueck
 * will, setzt ihn an der Flaeche, nicht hier (§9).
 * ========================================================================== */

.tc-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--tc-bg-surface-1);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.25);
  border-radius: var(--tc-radius-md, 8px);
  transition: border-color var(--tc-motion-fast),
              transform var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast);
}

/* Der Lichtstreif am oberen Rand — er erscheint erst beim Zeigen und macht
   aus der Karte ein Ziel, ohne dass im Ruhezustand etwas blinkt. */
.tc-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--tc-accent-rgb), 0.3), transparent);
  opacity: 0;
  transition: opacity var(--tc-motion-fast);
}

/* ── Klickbar ──────────────────────────────────────────────────────────── */
/* ⚠️ Nur eine Karte, die etwas TUT, hebt sich an. Eine reine Anzeigekarte,
   die auf Zeigen reagiert, verspricht einen Klick, den es nicht gibt. */
.tc-item-card.is-klickbar { cursor: pointer; }
.tc-item-card.is-klickbar:hover {
  border-color: rgba(var(--tc-accent-rgb), 0.6);
  transform: translateY(-3px);
  box-shadow: var(--tc-shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.4));
}
.tc-item-card.is-klickbar:hover::before { opacity: 1; }
.tc-item-card:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* ── Seltenheit: DATENFARBEN, hart (§9) ────────────────────────────────── */
.tc-item-card--gewoehnlich.is-klickbar:hover {
  border-color: rgba(76, 175, 80, 0.6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(76, 175, 80, 0.15);
}
.tc-item-card--gewoehnlich.is-klickbar:hover::before {
  background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.5), transparent);
}
.tc-item-card--selten.is-klickbar:hover {
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 193, 7, 0.15);
}
.tc-item-card--selten.is-klickbar:hover::before {
  background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.5), transparent);
}

/* ── Gesperrt: sichtbar, aber nicht kaufbar ────────────────────────────── */
/* Die Karte bleibt stehen und sagt im Fuss, warum — eine Ware, die einfach
   verschwindet, sieht aus wie ein Sortiment, das es nie gab.

   ⚠️ GEDAEMPFT WERDEN DIE TEILE, NICHT DIE KARTE. Ein `opacity` an der Karte
   traefe den Fuss mit — und der Fuss traegt genau die Auskunft, die man dann
   lesen MUSS („es fehlen 40 GC"). Gemessen: Bei 0.45 auf der ganzen Karte
   faellt der Grund von 5,79 auf **2,28**, also klar unter AA.
   Und ein `opacity: 1` am Kind hilft dagegen NICHT: Deckkraft ist
   multiplikativ und oeffnet einen eigenen Stacking-Kontext — ein Kind kann
   nie heller sein als sein Elternteil. Die alte Fassung
   (`.buy-tab .item-card.buy-disabled { opacity: 0.4 }`) hatte denselben
   Fehler; der Grund darin war seit jeher kaum zu lesen. */
.tc-item-card.is-gesperrt { cursor: not-allowed; }
.tc-item-card.is-gesperrt .tc-item-card__kopf,
.tc-item-card.is-gesperrt .tc-item-card__seltenheit,
.tc-item-card.is-gesperrt .tc-item-card__text { opacity: 0.45; }
.tc-item-card.is-gesperrt:hover {
  transform: none;
  box-shadow: none;
  /* ⚠️ `--tc-danger-rgb` GIBT ES NICHT — der erste Entwurf hatte es, und die
     Token-Gegenprobe hat es gefangen (zweiter Fall an diesem Tag, siehe
     #577). `--tc-danger-border` ist genau dafuer da und deklariert. */
  border-color: var(--tc-danger-border);
}
.tc-item-card.is-gesperrt:hover::before { opacity: 0; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.tc-item-card__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-3) var(--tc-space-2);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--tc-border-subtle);
}
.tc-item-card__name {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-bold, 700);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--tc-highlight);
  min-width: 0;
}
.tc-item-card__preis {
  font-weight: var(--tc-weight-bold, 700);
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--tc-accent);
  font-variant-numeric: tabular-nums;
}

/* ── Seltenheitszeile ──────────────────────────────────────────────────── */
.tc-item-card__seltenheit {
  padding: 4px var(--tc-space-3) 6px;
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold, 600);
  color: #f5c842;
  background: rgba(255, 193, 7, 0.08);
}
.tc-item-card__seltenheit.is-gefunden {
  color: #81c784;
  background: rgba(76, 175, 80, 0.1);
}

/* ── Regeltext ─────────────────────────────────────────────────────────── */
.tc-item-card__text {
  flex: 1;
  padding: var(--tc-space-2) var(--tc-space-3) var(--tc-space-3);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--tc-text-muted);
  min-height: 32px;
}

/* ── Fuss ──────────────────────────────────────────────────────────────── */
.tc-item-card__fuss {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3) var(--tc-space-3);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tc-item-card,
  .tc-item-card::before { transition-duration: 0.01ms; }
  .tc-item-card.is-klickbar:hover { transform: none; }
}