/*
 * The league page's Overview tab (LeagueOverview.js) — the top of the table,
 * three player leaderboards, the team of the week, then the start of the news
 * feed.
 *
 * Almost everything here is borrowed rather than declared: the cards are
 * `club-overview.css`'s `.club-overview__card` chrome, the table inside the
 * first one is `club-table.css`'s grid, and the rows inside the last one are
 * `club-news.css`'s. What this file adds is the column those sit in, and the
 * two places where a borrowed block needs adjusting for sitting *inside* a
 * card rather than directly on the page.
 */

.league-overview {
  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-overview[hidden]` — the `display: flex` above
   wins outright without this, so the tab switch would leave every panel on
   screen at once. */
.league-overview[hidden] {
  display: none;
}

/* The cross-fade LeagueDetails.js drives on a tab switch. */
.league-overview[data-open="false"] {
  opacity: 0;
}

/* --- Table card ------------------------------------------------------------
 *
 * The standings grid is built to stand on the page by itself (its own
 * surface, border, radius and shadow — see club-table.css), which is right on
 * the Table tab and one layer too many inside a card. Here the card is the
 * surface, so the grid gives all of that up and keeps only its rows.
 */

.league-overview__table .club-table__grid {
  margin-inline: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Nothing left to clip into — and the zone bars below now deliberately
     sit outside this box. */
  overflow: visible;
}

/*
 * Rows drop their own inline padding: the card already supplies it, and
 * keeping both would indent the table twice.
 */
.league-overview__table .club-table__row {
  padding-inline: 0;
}

/*
 * Which leaves the zone bar, which is positioned against the row's own left
 * edge and would otherwise land on top of the rank digit. Pulled back out to
 * the card's padding edge, so it reads the same way it does on the Table tab:
 * a colour running down the outside of the table, not a mark inside it.
 */
.league-overview__table .club-table__row::before {
  left: calc(var(--space-5) * -1);
}

/* --- News card -------------------------------------------------------------
 *
 * The News tab sits its rows flush on the page on purpose (see club-news.css).
 * Here they are one section of a summary tab among several, so they sit in a
 * card like everything else around them and need nothing but the card's own
 * padding — the rows carry only block padding of their own, so there is no
 * double indent to undo the way the table above has.
 */

.league-overview__news .news-list {
  /* Closes the gap the card's own `gap` would otherwise add on top of the
     first row's block padding, so the list starts tight under its title. */
  margin-block: calc(var(--space-2) * -1);
}