/* ============================================================================
 * COMPONENT · tc-card
 * ----------------------------------------------------------------------------
 * 7 Variants. Loest .card, .gm-card, .gm-dash-card, .event-card sowie
 * den PF Champagner-Block ab.
 *
 * KERNSTUECK Option C (Anti-Bland):
 * .tc-card--ornate konsumiert --tc-deco-warm-* Tokens.
 * Im .theme-pathfinder-Container wird sie automatisch champagner-warm.
 * Im .theme-bloodbowl-Container wird sie stahl-grau.
 * Im .theme-aos-Container wird sie mondsilbern.
 * Gleicher Code, theme-abhaengige Stimmung.
 *
 * Joy-of-Use:
 *   - Hover-Glow auf .tc-card--elevated (Border-Color + Lift)
 *   - Subtile Border-Akzente im Header/Footer
 *   - Banner-Overlay-Gradient bei .tc-card--hero
 *   - System-Coding via --tc-card--system-* (Farbband links)
 *
 * Version: 1.0 (29. Mai 2026, Phase 2)
 * ============================================================================ */


/* ============================================================================
 * BASE
 * ============================================================================ */
.tc-card {
  display: flex;
  flex-direction: column;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-space-4);
  transition: background var(--tc-motion-normal),
              border-color var(--tc-motion-normal),
              box-shadow var(--tc-motion-normal),
              transform var(--tc-motion-normal);
}

.tc-card__header {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding-bottom: var(--tc-space-3);
  margin-bottom: var(--tc-space-3);
  border-bottom: 1px solid var(--tc-border-subtle);
}

.tc-card__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-card__title {
  flex: 1;
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-accent);
  letter-spacing: var(--tc-tracking-wide);
}

.tc-card__subtitle {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  margin-top: 2px;
}

.tc-card__actions {
  display: flex;
  gap: var(--tc-space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.tc-card__body {
  flex: 1;
  min-width: 0;
}

.tc-card__footer {
  display: flex;
  gap: var(--tc-space-2);
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--tc-space-3);
  margin-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
}


/* ============================================================================
 * VARIANTS
 * ============================================================================ */

/* --- Minimal: flach, kein Background, fuer Listen-Items --- */
.tc-card--minimal {
  background: transparent;
  border: none;
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-space-3);
  transition: background var(--tc-motion-fast);
}
.tc-card--minimal:hover {
  background: var(--tc-bg-surface-1);
}
.tc-card--minimal .tc-card__header {
  padding-bottom: var(--tc-space-2);
  margin-bottom: var(--tc-space-2);
  border-bottom-color: transparent;
}

/* --- Bordered: sichtbarere Border (Standard-Hauptkarten) --- */
.tc-card--bordered {
  border-color: var(--tc-deco-ornament-border);
}

/* --- Elevated: mit Schatten + Hover-Lift, fuer interaktive Cards --- */
.tc-card--elevated {
  box-shadow: var(--tc-shadow-md);
  cursor: pointer;
}
.tc-card--elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--tc-shadow-lg);
  border-color: var(--tc-deco-ornament-border);
}
.tc-card--elevated:active {
  transform: translateY(0);
}

/* --- Accent: mit Akzent-Border-Left (System-Coding kommt da rein) --- */
.tc-card--accent {
  border-left: 4px solid var(--tc-card-accent, var(--tc-accent));
  background: linear-gradient(135deg,
    var(--tc-bg-surface-1) 0%,
    var(--tc-bg-surface-1) 80%,
    rgba(255, 255, 255, 0.01) 100%);
}

/* --- ORNATE: Pathfinder-Champagner-Vibe (Option C!) ---
   Diese Variante konsumiert --tc-deco-warm-* Tokens.
   Pro Theme andere Stimmung:
     theme-mordheim    → Sepia-Warm (default)
     theme-pathfinder  → Champagner
     theme-bloodbowl   → Stahl
     theme-aos         → Mondsilber
     theme-community   → Gruenlich-warm
*/
.tc-card--ornate {
  background: var(--tc-deco-warm-bg);
  border: 1px solid var(--tc-deco-warm-border);
  border-radius: var(--tc-radius-lg);
  position: relative;
}
.tc-card--ornate .tc-card__title {
  color: var(--tc-deco-warm-text);
  letter-spacing: var(--tc-tracking-widest);
  text-transform: uppercase;
  font-size: var(--tc-text-base);
}
.tc-card--ornate .tc-card__header {
  border-bottom-color: var(--tc-deco-warm-border);
}
.tc-card--ornate .tc-card__footer {
  border-top-color: var(--tc-deco-warm-border);
}

/* --- Hero: gross, mit Banner-Bereich oben --- */
.tc-card--hero {
  border-radius: var(--tc-radius-xl);
  padding: 0;
  overflow: hidden;
}
.tc-card__banner {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--tc-bg-surface-2);
}
.tc-card__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tc-deco-banner-overlay);
  pointer-events: none;
}
.tc-card__banner-title {
  position: absolute;
  bottom: var(--tc-space-4);
  left: var(--tc-space-5);
  right: var(--tc-space-5);
  z-index: 2;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-2xl);
  color: var(--tc-text-strong);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: var(--tc-tracking-wide);
  margin: 0;
}
.tc-card--hero .tc-card__header,
.tc-card--hero .tc-card__body,
.tc-card--hero .tc-card__footer {
  padding-left: var(--tc-space-5);
  padding-right: var(--tc-space-5);
}
.tc-card--hero .tc-card__header { padding-top: var(--tc-space-4); }
.tc-card--hero .tc-card__footer { padding-bottom: var(--tc-space-4); }

/* --- Ghost: transparent mit gestrichelter Border --- */
.tc-card--ghost {
  background: transparent;
  border: 1px dashed var(--tc-border-default);
}


/* ============================================================================
 * SYSTEM-CODING — kombinierbar mit jeder Variante
 * Setzt --tc-card-accent, das von --accent genutzt wird (Border-Left).
 * ============================================================================ */
.tc-card--system-mordheim   { --tc-card-accent: var(--tc-sys-mordheim); }
.tc-card--system-aos        { --tc-card-accent: var(--tc-sys-aos); }
.tc-card--system-pathfinder { --tc-card-accent: var(--tc-sys-pathfinder); }
.tc-card--system-bloodbowl  { --tc-card-accent: var(--tc-sys-bloodbowl); }
.tc-card--system-community  { --tc-card-accent: var(--tc-sys-community); }
.tc-card--system-social     { --tc-card-accent: var(--tc-sys-social); }


/* ============================================================================
 * TOUCH-OPTIMIERUNG
 * ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .tc-card--elevated:hover {
    transform: none;
    box-shadow: var(--tc-shadow-md);
  }
  .tc-card--minimal:hover {
    background: transparent;
  }
}