/* ============================================================================
   Components - Cards
   system/components/cards.css

   Two card variants:
   - .gm-card       - haptic (drop shadow, hover lift via border)
   - .gm-web-card   - web (flat, no shadow)

   See sibling cards.md.
   ============================================================================ */

/* Haptic card */
.gm .gm-card {
  background: var(--gm-bg-elevated);
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-lg);
  padding: var(--gm-space-6);
  transition: border-color var(--gm-duration-fast) var(--gm-ease-out);
}
.gm .gm-card:hover {
  border-color: var(--gm-border-default);
}

.gm .gm-card-title {
  font-size: var(--gm-fs-xl);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-tight);
  line-height: var(--gm-lh-tight);
  color: var(--gm-text-primary);
  margin-bottom: var(--gm-space-4);
}

/* Web-style flat card */
.gm .gm-web-card {
  background: var(--gm-bg-elevated);
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-lg);
  padding: var(--gm-space-6);
}