/* card — .card and its header */
@layer components {
  .card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--card-pad, var(--space-3));
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    box-shadow: var(--shadow-xs);

    @media (width < 40rem) { --card-pad: var(--space-2); }

    &.card--flush { --card-pad: 0; overflow: hidden; }
    &.card--sunken { background: var(--surface-sunken); box-shadow: none; }
    &.card--interactive {
      transition: box-shadow var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
      &:hover { box-shadow: var(--shadow-md); translate: 0 calc(var(--hover-lift) * -1); }
    }
  }

  .card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    > :first-child { flex: 1 1 14rem; min-inline-size: 0; }
  }
  .card__title { font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
  .card__subtitle { font-size: var(--text-xs); color: var(--muted); margin-block-start: var(--space-0-5); }
  .card__actions { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; max-inline-size: 100%; }
}