/* =============================================================================
   FILE: resources/css/components/card.css
   Frontend Spec Section 5.7 — Card
============================================================================= */

.card {
  display: block;
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.card + .card {
  margin-top: var(--space-2);
}

.card--clickable {
  transition: background-color var(--ease-standard);
}

.card--clickable:active {
  background-color: var(--color-paper-dim);
}

@media (hover: hover) {
  .card--clickable:hover {
    background-color: var(--color-paper-dim);
  }
}

.card--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.card__leading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}