/* ============================================================
   components/cards.css — luxury card surface + image hover-zoom
   ============================================================ */
.card-luxury {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-base);
}
.card-luxury:hover { border-color: hsl(var(--border)); box-shadow: var(--shadow-card); }

.media { overflow: hidden; border-radius: var(--radius-sm); }
.media img { width: 100%; height: 100%; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.media:hover img { transform: scale(1.05); }