@layer components {
  .card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    container-type: inline-size;
  }

  .card--bordered {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }

  .card__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
  }

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

  .card__footer {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border-subtle);
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-ink);
  }

  .card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .empty-state {
    text-align: center;
    padding: var(--space-3xl);
    color: var(--color-ink-subtle);

    & svg,
    & .icon,
    & .icon--xl {
      margin-inline: auto;
      margin-bottom: var(--space-md);
      color: var(--color-ink-muted);
    }
  }

  /* ── Content Card — wraps filters + table + pagination ── */
  .admin-card {
    background-color: var(--admin-surface-container);
    border-radius: var(--radius-xl);
    box-shadow: var(--admin-shadow);
    padding: var(--space-xl);
  }
}