/* ============================================================
   components/cards.css
   Glass, surfaces, generic cards
   ============================================================ */

.plx-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--plx-glass-border);
  backdrop-filter: blur(var(--plx-glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--plx-glass-blur)) saturate(180%);
  border-radius: var(--plx-radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--plx-shadow-soft);
}

.plx-surface-card {
  background: var(--plx-bg-card);
  border-radius: var(--plx-radius-lg);
  border: 1px solid var(--plx-border-subtle);
  box-shadow: var(--plx-shadow-soft);
}

.plx-card {
  position: relative;
  overflow: hidden;
  background: var(--plx-bg-card);
  border-radius: var(--plx-radius-lg);
  border: 1px solid var(--plx-border-subtle);
  padding: var(--plx-space-5);
  box-shadow: var(--plx-shadow-soft);
  transition:
    transform var(--plx-transition),
    box-shadow var(--plx-transition),
    border-color var(--plx-transition);
}

.plx-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--plx-brand-primary-raw), 0.6), transparent);
}

.plx-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--plx-shadow-strong);
  border-color: var(--plx-border-strong);
}