/*
 * The club page's Transfers tab — one card, one row per move. See
 * ClubTransfers.js for the PREVIEW STUB every name on it reads from.
 *
 * Shares `.club-overview__card` and `.club-overview__divider` with the
 * Overview tab's own cards, the same way club-squad.css does — same chrome,
 * same rhythm, so nothing here duplicates them. Everything below is new: the
 * player row's grid, its overlapping position badge, and the transfer strip.
 */

.club-transfers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  opacity: 1;
  transition: opacity var(--duration) var(--easing);
}

/* Same UA-rule note as .club-squad[hidden] — see that file. */
.club-transfers[hidden] {
  display: none;
}

.club-transfers[data-open="false"] {
  opacity: 0;
}

.transfer-list__rows {
  display: flex;
  flex-direction: column;
}

/* --- Transfer item ------------------------------------------------------ */

.transfer-item {
  display: flex;
  flex-direction: column;
}

/* --- Player row ----------------------------------------------------------
 *
 * A grid rather than `.squad-row`'s flex row: this row needs a third column
 * (the date, pinned to the top-right) that a two-line text stack beside an
 * avatar doesn't. The avatar spans both text rows; the name sits over the
 * status line the same way `.squad-row__name` sits over `.squad-row__meta`.
 *
 * `padding-top` matches `.squad-row__button`'s own `padding-block` on its
 * leading edge — the same rhythm around the divider above. The trailing edge
 * is deliberately smaller (`--space-2`): it is the gap to the strip below,
 * not to the next row's divider, which the strip's own `margin-bottom` owns
 * instead.
 */
.transfer-row__player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  width: 100%;
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  text-align: left;
}

.transfer-row__avatar-wrap {
  position: relative;
  display: inline-flex;
  grid-column: 1;
  grid-row: 1 / 3;
}

.transfer-row__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.transfer-row__status {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.transfer-row__date {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/*
 * The position badge — overlaps the avatar's bottom-left corner. Same
 * plate/offset recipe as `.season-stats__event`: a floating chip needs its own
 * background and shadow rather than the surface it sits over, since it can
 * land on top of either the avatar photo or the card behind it.
 */
.transfer-row__position {
  position: absolute;
  bottom: -4.5px;
  left: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 4.5px;
  /* Sunken for the same reason `.season-stats__event` is — the card behind
     it is white now, and a white-on-white chip would vanish. */
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* --- Transfer strip --------------------------------------------------------
 *
 * One wide pill, split into two halves either side of a centre icon naming
 * the deal type. Crests sit at the pill's outer edges, names read in toward
 * the icon — see `ClubChip` in ClubTransfers.js for why each half's child
 * order flips.
 */
.transfer-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.transfer-strip__club {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.transfer-strip__club--to {
  justify-content: flex-end;
  text-align: right;
}

.transfer-strip__club-name {
  min-width: 0;
}

.transfer-strip__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--surface);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}