/**
 * Blue Ridge Core Theme — Cards
 * See docs/design-system/07-cards.md for full rationale.
 */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--sm);
  overflow: hidden;
}

.card__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--wp--preset--spacing--lg);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
}

/* Centered variant — icon-led cards (e.g. the Applications grid) where the
   icon, title, and text should all align on a center axis. */
.card--centered .card__body {
  align-items: center;
  text-align: center;
}

.card__eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  letter-spacing: var(--wp--custom--typography--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--gray-500);
}

.card__title {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  color: var(--wp--preset--color--gray-900);
}

.card__text {
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--typography--line-height-base);
  color: var(--wp--preset--color--gray-500);
}

.card__meta {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-500);
}

.card__footer {
  padding: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--preset--color--gray-200);
}

/* Interactive cards only — the entire card is a single link/button.
   Non-interactive cards never receive this class. See 07-cards.md. */
.card--interactive {
  transition:
    box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.card--interactive:hover {
  box-shadow: var(--wp--preset--shadow--md);
  transform: translateY(-2px);
}

/* Flat variant — border instead of shadow, for dense contexts */
.card--flat {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--gray-200);
}

/* Tinted variants — for a single highlighted card in an otherwise-default grid */
.card--tint-navy { background-color: var(--wp--preset--color--navy-tint); }
.card--tint-green { background-color: var(--wp--preset--color--forest-green-tint); }

/* Circular icon/number badge — for lead-in markers inside a card__body
   (e.g. a checkmark on a benefit card, a step number on a process card). */
.badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--wp--custom--radius--full);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  flex-shrink: 0;
}

.badge-circle--green {
  background-color: var(--wp--preset--color--forest-green-tint);
  color: var(--wp--preset--color--forest-green);
}

.badge-circle--navy {
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

/* Compact trust strip — checkmark + short label pairs in a single
   wrapping row. For contexts (e.g. landing pages) needing quick proof
   points without a full card grid's visual weight. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
}

.trust-strip li {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--tiny);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--typography--font-weight-medium);
  color: var(--wp--preset--color--gray-900);
}

.trust-strip .icon {
  color: var(--wp--preset--color--forest-green);
  flex-shrink: 0;
}