/*
 * The trophy cabinet (PlayerTrophies.js) — one block per club, each a header on
 * a sunken fill over the rows it won.
 *
 * The count is the only thing on the card wearing --gold. That token is this
 * app's tier status, and "three times" is the fact a cabinet is read for;
 * spending it on the competition names as well would turn a list into a
 * certificate.
 */

.player-trophies {
  gap: calc(var(--space-3) * var(--player-scale));
}

.player-trophies__groups {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) * var(--player-scale));
}

.player-trophies__group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.player-trophies__club {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--player-scale));
  padding: calc(var(--space-3) * var(--player-scale));
  background: var(--surface-sunken);
}

.player-trophies__club-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--player-scale));
}

.player-trophies__club-name {
  font-size: calc(var(--text-md) * var(--player-scale));
  font-weight: var(--weight-bold);
  color: var(--text);
}

.player-trophies__country {
  font-size: calc(var(--text-sm) * var(--player-scale));
  color: var(--text-muted);
}

.player-trophies__list {
  display: flex;
  flex-direction: column;
}

.player-trophies__row {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--player-scale));
  padding: calc(var(--space-2) * var(--player-scale)) calc(var(--space-3) * var(--player-scale));
}

.player-trophies__row + .player-trophies__row {
  border-top: 1px solid var(--border);
}

.player-trophies__count {
  min-width: calc(18px * var(--player-scale));
  text-align: center;
  font-size: calc(var(--text-md) * var(--player-scale));
  font-weight: var(--weight-bold);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.player-trophies__badge {
  display: grid;
  place-items: center;
  width: calc(26px * var(--player-scale));
  height: calc(26px * var(--player-scale));
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

/*
 * The name and the seasons share one wrapping line rather than sitting at
 * opposite ends of the row. Pushed apart, a three-season list forces the name to
 * truncate — and "P…" beside "(2022/2023 · 2021/2022 · 2020/2021)" tells the
 * reader the years of a trophy it has stopped naming, which is the wrong half to
 * keep.
 */
.player-trophies__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--space-2) * var(--player-scale));
  min-width: 0;
}

.player-trophies__name {
  font-size: calc(var(--text-sm) * var(--player-scale));
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.player-trophies__seasons {
  font-size: calc(var(--text-xs) * var(--player-scale));
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}