/* ============================================================
   COMPONENT: Cards
   Base card styles reused across pages.
   Page-specific card variants live in their page CSS files.
   ============================================================ */

/* Light card — used on light backgrounds */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Dark card — used on navy backgrounds */
.card-dark {
  background: var(--navy-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Bordered card — subtle outline style */
.card-bordered {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  overflow: hidden;
}

/* Hover lift effect — add to any card */
.card-hover {
  transition: var(--transition);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(201,168,76,0.2);
}