/**
 * Asset Selection Card Styles
 *
 * Uses Bootstrap variables for base styling.
 * Icon badge styles come from .icon-badge base class in styles.css.
 * Color tokens from _colors.css for custom overlays.
 */

.asset-selection-card {
  aspect-ratio: var(--ratio-asset-card);
  width: 100%;
  padding: var(--size-asset-card-padding);
  border: var(--size-card-border) solid var(--color-border-default);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.asset-selection-card .card-body {
  padding: var(--size-asset-card-body-padding);
  height: 100%;
  justify-content: center;
}

.asset-selection-card .fw-semibold {
  font-size: 0.85rem;
  line-height: 1.3;
}

.asset-selection-card .text-muted {
  font-size: 0.7rem;
}

.asset-selection-card:hover:not([disabled]):not(.loading),
.asset-selection-card:focus-visible:not([disabled]):not(.loading) {
  border-color: rgba(var(--color-brand-primary-rgb), 0.6);
  box-shadow: 0 0.4rem 1.2rem rgba(var(--color-black-rgb), 0.08);
  transform: translateY(-2px);
}

.asset-selection-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--space-1) rgba(var(--color-brand-primary-rgb), 0.2);
}

.asset-selection-card.loading {
  opacity: 0.6;
  pointer-events: none;
}

.asset-selection-card[disabled],
.asset-selection-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  border-color: var(--color-border-default);
  background-color: var(--color-gray-100);
  box-shadow: none;
  transform: none;
}

.asset-selection-card[disabled] .icon-badge,
.asset-selection-card[aria-disabled="true"] .icon-badge {
  background-color: var(--color-gray-400);
  opacity: 0.7;
}

@media (max-width: 575.98px) {
  .asset-selection-card .card-body {
    padding: var(--size-asset-card-body-padding-sm);
    gap: 0.375rem;
  }

  .asset-selection-card .fw-semibold {
    font-size: 0.75rem;
  }
}