.card {
  border-radius: var(--wa-border-radius-l);
  transition: all var(--wa-transition-normal) var(--wa-transition-easing);
  padding: var(--wa-space-m);
}

.card--raised {
  background: var(--wa-color-surface-raised);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  box-shadow: var(--wa-shadow-l);
}

.card--bordered {
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
}

.card--bordered:hover {
  box-shadow: var(--wa-shadow-m);
  border-color: var(--wa-color-neutral-border-normal);
}

.card--danger {
  border-color: var(--wa-color-danger-border-normal);
  margin-top: var(--wa-space-l);
}

/* BEM: card actions */
.card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
  margin-block-start: var(--wa-space-l);
}

/* Clickable card wrapper */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card-link wa-card {
  transition:
    transform var(--wa-transition-normal) var(--wa-transition-easing),
    box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}

.card-link:hover wa-card {
  transform: translateY(-2px);
  box-shadow: var(--wa-shadow-l);
}

/* Investment projection cards with icons */
.card--iconed {
  display: grid;
  grid-template: min-content min-content / max-content 1fr;
  column-gap: var(--wa-space-xs);
  .values {
    grid-column: 2;
  }
  .card-content__prop {
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-l);
  }
  .card-content__value {
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-quiet);
  }
  .icon {
    width: var(--wa-space-l);
    height: var(--wa-space-l);
    color: var(--wa-color-blue-60);
    flex-shrink: 0;
  }
}