/*
 * The Catch-Up feed's weekly teams (WeekTeamsPost.js): a competition's team
 * of the week and team of the weak, two cards in the room's peeking
 * carousel under a `puntrr` header.
 *
 * The card is the room's card — the snapshot's surface, border, radius and
 * shadow (`.game-snapshot__card`, catch-up.css) — and the pitch in it is the
 * league page's, unchanged (`PitchLineup`, season-stats.css): only its
 * bleed is retuned here, from the club card's padding to this card's. It
 * lives inside `.prezzbox`, so --accent is PrezzBox's red.
 */

.week-team {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* A backend without the worst XI: the one card, in the carousel's own gutter. */
.week-teams__solo {
  padding-inline: var(--space-4);
  padding-block: var(--space-1) var(--space-3);
}

/* --- Head: crest, which team, the shape ------------------------------------ */

.week-team__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.week-team__crest {
  flex: none;
}

.week-team__titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.week-team__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* The punchline card says so in the room's red; the pitch's own red pills
   say the rest. */
.week-team[data-side="weak"] .week-team__title {
  color: var(--accent);
}

.week-team__caption {
  overflow: hidden;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-team__formation {
  flex: none;
  padding: var(--space-05) var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* --- The pitch ---------------------------------------------------------------- */

/*
 * Edge to edge of the card, as on the league page — there the pitch cancels
 * the club card's padding itself (`.season-stats__pitch`), so here that
 * margin is taken back and this card's own padding cancelled instead.
 */
.week-team__pitch {
  margin-inline: calc(var(--space-3) * -1);
}

.week-team__pitch .season-stats__pitch {
  margin-inline: 0;
}

/* --- Foot: the standout, and how much of the round is in --------------------- */

.week-team__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* The two cards share a height (the track stretches them); the foot sits
     on the bottom of each so the standouts line up across the swipe. */
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.week-team__star {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.week-team__star-label {
  flex: none;
  font-weight: var(--weight-semibold);
}

.week-team__star-name {
  min-width: 0;
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* The pitch's own rating bands (`ratingTier`, season-stats.css). */
.week-team__star-rating {
  flex: none;
  margin-inline-start: auto;
  padding: 1px var(--space-15);
  border-radius: var(--radius-full);
  background: var(--rating-none-solid);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.week-team__star-rating[data-tier="high"] {
  background: var(--rating-high-solid);
}

.week-team__star-rating[data-tier="mid"] {
  background: var(--rating-mid-solid);
}

.week-team__star-rating[data-tier="low"] {
  background: var(--rating-low-solid);
}

.week-team__note {
  color: var(--text-muted);
}