/* ═══════════════════════════════════════════════════════════════════════════
   Component: Card v2 — Elevation, teal accent, hover lift
   ═══════════════════════════════════════════════════════════════════════════ */

.c-card {
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevation-0);
  transition:
    box-shadow var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-base) var(--motion-ease-out);
}

.c-card--hover:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
  border-color: var(--color-teal-200);
}

/* ── Card Image ─────────────────────────────────────────────────────── */

.c-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ── Card Body ──────────────────────────────────────────────────────── */

.c-card__body {
  padding: var(--space-lg);
}

.c-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}

.c-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}

.c-card__text:last-child {
  margin-bottom: 0;
}

/* ── Card Footer ────────────────────────────────────────────────────── */

.c-card__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

/* ── Variant: Elevated ──────────────────────────────────────────────── */

.c-card--elevated {
  border: none;
  box-shadow: var(--elevation-1);
}
.c-card--elevated:hover {
  box-shadow: var(--elevation-3);
}

/* ── Variant: Teal Accent ───────────────────────────────────────────── */

.c-card--teal {
  border-left: 3px solid var(--color-teal-400);
}

/* ── Variant: Horizontal ────────────────────────────────────────────── */

.c-card--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.c-card--horizontal .c-card__image {
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 768px) {
  .c-card--horizontal {
    grid-template-columns: 1fr;
  }

  .c-card--horizontal .c-card__image {
    aspect-ratio: 16 / 10;
  }
}