/* ========================================
   CARDS
   ======================================== */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--border-default) 70%, var(--accent) 30%);
}

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Interactive card — premium hover for clickable content cards ── */
.card-interactive {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--border-default) 60%, var(--accent) 40%);
  background: color-mix(in srgb, var(--bg-surface) 98%, var(--accent) 2%);
}

.card-interactive:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.1s;
}

/* Thumbnail zone inside interactive cards */
.card-interactive .card-thumb {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-interactive:hover .card-thumb {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Title inside interactive cards → accent on hover */
.card-interactive .card-title {
  transition: color 0.3s ease;
}
.card-interactive:hover .card-title {
  color: var(--accent) !important;
}

/* Icon container inside interactive cards → warm glow */
.card-interactive .card-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
}
.card-interactive:hover .card-icon {
  transform: scale(1.08);
}

/* Quick action footer → fade in on hover */
.card-interactive .card-actions {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.card-interactive:hover .card-actions {
  opacity: 1;
}

/* ── Stat card — subtle hover for stats/KPI cards ── */
.card-stat {
  transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-stat:hover {
  border-color: color-mix(in srgb, var(--border-default) 70%, var(--accent) 30%);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--bg-surface) 99%, var(--accent) 1%);
}