/* File: /assets/css/components/cards.css
   Owner: EC
   Purpose: Card primitives (standard, clickable)
   Version: 1.0
   Updated: 2025-11-09
   Notes (ALCOA-C):
     - Uses surface/border/shadow tokens; theme-aware
     - No gradients, no custom colors
*/

.card {
  display: block;
  background: var(--color-surface);
  color: var(--color-body);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__media { display: block; }
.card__body  { padding: var(--space-4); }
.card__title {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-family: var(--font-sans-tight);
  font-weight: var(--weight-semibold);
}

/* Clickable card pattern */
.card--link { text-decoration: none; }
@media (hover: hover) {
  .card--link:hover { box-shadow: var(--shadow-md); }
}
.card--link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}

/* Compact variant */
.card--compact .card__body { padding: var(--space-3); }