/* =====================================================================
   UniMate Component — Cards v1.0
   Variants: base, elevated, interactive, glass
   ===================================================================== */

/* ── Base Card ───────────────────────────────────────────────────────── */
.um-card {
  background: var(--um-surface);
  border: 1px solid var(--um-border);
  border-radius: var(--um-radius-xl);
  overflow: hidden;
  transition:
    box-shadow var(--um-duration-normal) var(--um-ease-default),
    border-color var(--um-duration-normal) var(--um-ease-default),
    transform var(--um-duration-normal) var(--um-ease-default);
}

.um-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--um-space-5) var(--um-space-5) var(--um-space-3);
  gap: var(--um-space-3);
}

.um-card__title {
  font-family: var(--um-font-display);
  font-size: var(--um-text-lg);
  font-weight: var(--um-weight-bold);
  color: var(--um-text);
  letter-spacing: var(--um-tracking-tight);
  margin: 0;
  line-height: var(--um-leading-tight);
}

.um-card__subtitle {
  font-size: var(--um-text-sm);
  color: var(--um-text-secondary);
  margin: var(--um-space-1) 0 0;
  line-height: var(--um-leading-normal);
}

.um-card__body {
  padding: var(--um-space-5);
}

.um-card__header + .um-card__body {
  padding-top: 0;
}

.um-card__footer {
  padding: var(--um-space-4) var(--um-space-5);
  border-top: 1px solid var(--um-divider);
  display: flex;
  align-items: center;
  gap: var(--um-space-2);
}

.um-card__media {
  width: 100%;
  display: block;
}

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

/* ── Elevated Card ───────────────────────────────────────────────────── */
.um-card--elevated {
  border-color: transparent;
  box-shadow: var(--um-shadow-md);
}

/* ── Interactive Card ────────────────────────────────────────────────── */
.um-card--interactive {
  cursor: pointer;
}

.um-card--interactive:hover {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: var(--um-shadow-lg);
  transform: translateY(-2px);
}

.um-card--interactive:active {
  transform: translateY(0) scale(0.99);
  box-shadow: var(--um-shadow-sm);
}

/* ── Glass Card ──────────────────────────────────────────────────────── */
.um-card--glass {
  background: var(--um-glass-bg);
  backdrop-filter: var(--um-glass-blur);
  -webkit-backdrop-filter: var(--um-glass-blur);
  border-color: var(--um-glass-border);
}

.theme-dark .um-card--glass {
  background: var(--um-glass-bg);
  border-color: var(--um-glass-border);
}

/* ── Accent border Card ──────────────────────────────────────────────── */
.um-card--accent-left {
  border-left: 4px solid var(--um-primary);
}

.um-card--accent-top {
  border-top: 4px solid var(--um-primary);
}

/* ── Card Padding Sizes ──────────────────────────────────────────────── */
.um-card--compact .um-card__header { padding: var(--um-space-3) var(--um-space-4) var(--um-space-2); }
.um-card--compact .um-card__body   { padding: var(--um-space-4); }
.um-card--compact .um-card__footer { padding: var(--um-space-3) var(--um-space-4); }

.um-card--compact .um-card__header + .um-card__body { padding-top: 0; }

.um-card--spacious .um-card__header { padding: var(--um-space-6) var(--um-space-6) var(--um-space-4); }
.um-card--spacious .um-card__body   { padding: var(--um-space-6); }
.um-card--spacious .um-card__footer { padding: var(--um-space-5) var(--um-space-6); }

.um-card--spacious .um-card__header + .um-card__body { padding-top: 0; }

/* ── Hero Card (gradient background) ─────────────────────────────────── */
.um-card--hero {
  background: var(--um-gradient-hero);
  border-color: transparent;
  color: #ffffff;
}

.um-card--hero .um-card__title,
.um-card--hero .um-card__subtitle {
  color: #ffffff;
}

.um-card--hero .um-card__subtitle {
  opacity: 0.8;
}