/* =====================================================
   GRID CONTAINER
===================================================== */

.unit-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);

  max-width: var(--content-width);
  margin: 0 auto;
}


/* =====================================================
   UNIT CARD
===================================================== */

.unit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-md);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);

  background: var(--bg-surface);

  text-decoration: none;
  color: inherit;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.unit-card:hover {
  border-color: var(--accent-primary);
  background: var(--hover-overlay);
  transform: translateY(-2px);
}


/* =====================================================
   INFO
===================================================== */

.unit-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.unit-card__name {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}


/* =====================================================
   PATCH NUMBER (FABRIC STYLE)
===================================================== */

.unit-card__number {
  display: inline-flex;
  gap: var(--space-xs);
}

.unit-card__number span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 36px;

  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);

  /* text */
  color: var(--text-inverse);

  border-radius: var(--radius-xs);

  /* fabric base (tokenized gold tone) */
  background: linear-gradient(
    145deg,
    var(--accent-hover),
    var(--accent-primary)
  );

  /* border */
  border: 1px solid var(--border-accent);

  /* stitched / depth */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    var(--shadow-sm);
}

.unit-card:hover .unit-card__number span {
  border-color: var(--accent-primary);
}


/* =====================================================
   ACTION
===================================================== */

.unit-card__action {
  font-size: var(--font-size-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;

  padding: var(--space-xs) var(--space-md);

  border-radius: 999px;

  background: var(--hover-overlay);
  border: 1px solid var(--border-subtle);

  color: var(--text-secondary);

  transition: var(--transition-fast);
}

.unit-card:hover .unit-card__action {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}


/* =====================================================
   ACTIVE UNIT
===================================================== */

.unit-card--active {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.unit-card--active .unit-card__action {
  color: var(--text-inverse);

  background: linear-gradient(
    90deg,
    var(--accent-primary),
    var(--accent-hover)
  );

  border: none;
}