/*
 * Card — a bordered surface for grouping content
 * <section class="card">
 *   <header class="card__header"><h2 class="card__title">Title</h2></header>
 *   <div class="card__body">…</div>
 * </section>
 */
.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
}

.card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.card__description {
  margin-top: var(--space-0-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

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

.card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: var(--border);
  background: var(--color-surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Clickable card (wrap in a link) */
.card--interactive {
  display: block;
  color: inherit;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);

  &:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* Key/value list, e.g. contact details */
.details {
  display: grid;
  gap: var(--space-4);

  dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  dd {
    margin-top: var(--space-1);
    color: var(--color-text);
    word-break: break-word;
  }
}