/* ========================================
   Cards
   ======================================== */

/* Base card */
.card {
  background-color: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card--hover {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

/* Card sections */
.card__header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.card__body {
  padding: var(--spacing-lg);
}

.card__footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
}

/* Compact card sections */
.card__header--compact,
.card__body--compact,
.card__footer--compact {
  padding: var(--spacing-md);
}

/* Card title */
.card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.card__subtitle {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Card image */
.card__image {
  width: 100%;
  height: auto;
  display: block;
}

.card__image--cover {
  object-fit: cover;
  height: 12rem;
}

/* Card actions */
.card__actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.card__actions--end {
  justify-content: flex-end;
}

.card__actions--space-between {
  justify-content: space-between;
}

/* Card variants */
.card--elevated {
  box-shadow: var(--shadow-md);
}

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

.card--bordered {
  border-width: 2px;
}

/* Card as link */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

a.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Card grid */
.card-grid {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Card list (stacked) */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Status card (for orders, etc) */
.card--status {
  border-left: 4px solid var(--color-gray-300);
}

.card--status.card--success {
  border-left-color: var(--color-success);
}

.card--status.card--error {
  border-left-color: var(--color-error);
}

.card--status.card--warning {
  border-left-color: var(--color-warning);
}

.card--status.card--info {
  border-left-color: var(--color-info);
}

/* Data card (key-value pairs) */
.card__data {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.card__data-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) 0;
}

.card__data-row:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-100);
}

.card__data-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

.card__data-value {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  text-align: right;
}

/* Empty state card */
.card--empty {
  padding: var(--spacing-2xl);
  text-align: center;
}

.card__empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-md);
  color: var(--color-gray-400);
}

.card__empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-xs);
}

.card__empty-description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-lg);
}