/* Classements: the hub of every table, a club's position page and the scorers lists. Inside the sport hub look (sports.css). */
.classements__sport { --hub-line: var(--hub); }
.classements__sport .hub-block__title { display: flex; align-items: center; gap: var(--space-2); }
.classements__sport .hub-block__title .icon { flex: none; inline-size: 0.8em; block-size: 0.8em; color: var(--hub); }
.classement-entry { align-items: start; block-size: 100%; }
.classement-entry .hub-comp__kind { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub); }
:root[dir="rtl"] .classement-entry .hub-comp__kind { letter-spacing: 0; }
.classement-entry__leader { font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }

.club-positions { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.club-position {
  display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-block-size: 52px; padding-inline: var(--space-3);
  border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 0.15s;
}
.club-position:hover { border-color: var(--hub-line); }
.club-position__rank { font-family: var(--hub-font); font-stretch: 70%; font-weight: 900; font-size: var(--step-1); color: var(--hub); text-align: center; }
.club-position__name { font-weight: 700; line-height: 1.25; }
.club-position__points { font-weight: 800; color: var(--ink-2); font-size: var(--step--1); }

/* ---------- A club's position ---------- */
.team-rank__row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 36px); min-inline-size: 0; }
.team-rank__place {
  display: grid; justify-items: center; align-content: center; gap: 4px; flex: none; min-inline-size: clamp(120px, 18vw, 180px); padding: var(--space-4);
  border-radius: 24px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); text-align: center;
}
.team-rank__label { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
:root[dir="rtl"] .team-rank__label { letter-spacing: 0; font-size: var(--step--1); }
.team-rank__number {
  font-family: "Archivo", "Inter", sans-serif; font-stretch: 62%; font-weight: 900; font-size: clamp(3.75rem, 12vw, 6.5rem); line-height: 0.9; color: var(--hub-accent);
}
.team-rank__of { max-inline-size: 16ch; font-size: var(--step--1); font-weight: 700; line-height: 1.25; color: #FFFFFF; }
.team-rank__text { display: grid; gap: var(--space-2); flex: 1 1 280px; min-inline-size: 0; }
.team-rank__summary { margin: 0; font-size: var(--step-1); font-weight: 700; color: #FFFFFF; }
.team-rank__record { font-size: var(--step-1); }
.team-rank__form { padding-block-start: 4px; }
.team-rank__form .form-guide__item { inline-size: 26px; block-size: 26px; font-size: 0.8125rem; }

.gap-tiles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gap-tile {
  display: grid; gap: 6px; align-content: start; padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface);
  border: 1px solid var(--line); border-block-start: 4px solid var(--win);
}
.gap-tile--behind { border-block-start-color: var(--loss); }
.gap-tile__value { font-family: "Archivo", "Inter", sans-serif; font-stretch: 75%; font-weight: 900; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1; }
.gap-tile__value small { font-family: var(--font-ui); font-stretch: 100%; font-size: var(--step--1); font-weight: 700; color: var(--ink-2); }
.gap-tile__label { font-size: var(--step--1); font-weight: 600; line-height: 1.35; color: var(--ink-2); }

.team-rank__rail { gap: var(--space-5); }
.team-rank__match { display: grid; gap: var(--space-2); }
.team-rank__match-title { margin: 0; padding-block-start: var(--space-3); border-block-start: 3px solid var(--hub-line); font-family: var(--hub-font); font-stretch: 75%; font-weight: 900; font-size: var(--step-1); text-transform: uppercase; }
:root[dir="rtl"] .team-rank__match-title { font-stretch: 100%; text-transform: none; }
.team-rank .hub-block > .card { overflow: hidden; }

/* ---------- Scorers ---------- */
.scorers-mini { display: grid; margin: 0; padding: 0; list-style: none; }
.scorers-mini__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-block-size: 48px; padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--line); }
.team-rank__match .scorers-mini__row { padding-inline: 0; }
.scorers-mini__row--maroc { background: var(--atlas-tint); }
.scorers-mini__rank { font-weight: 800; text-align: center; color: var(--ink-2); }
.scorers-mini__name { display: grid; gap: 1px; min-inline-size: 0; font-weight: 700; }
.scorers-mini__name a, .scorers-table a { color: var(--ink); text-decoration: none; }
.scorers-mini__name a:hover, .scorers-table a:hover { text-decoration: underline; }
.scorers-mini__club { font-size: 0.75rem; font-weight: 500; color: var(--ink-2); }
.scorers-mini__goals { font-family: "Archivo", "Inter", sans-serif; font-stretch: 75%; font-weight: 900; font-size: var(--step-1); }

.scorers-table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
.scorers-table th, .scorers-table td { block-size: 48px; padding: 0 var(--space-3); text-align: start; border-block-end: 1px solid var(--line); background: var(--surface); }
.scorers-table thead th { block-size: 34px; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.scorers-table tbody tr:last-child > * { border-block-end: 0; }
.scorers-table__row--maroc > * { background: var(--atlas-tint) !important; }
.scorers-table__rank { inline-size: 48px; text-align: center !important; font-weight: 800; }
.scorers-table__player { font-weight: 700; white-space: nowrap; }
.scorers-table__club { color: var(--ink-2); white-space: nowrap; }
.scorers-table__goals { inline-size: 64px; text-align: end !important; font-family: "Archivo", "Inter", sans-serif; font-stretch: 75%; font-weight: 900; font-size: var(--step-1); }
.scorers-table__club-inline { display: none; font-size: 0.75rem; font-weight: 500; color: var(--ink-2); }
@media (max-width: 559px) {
  .scorers-table .scorers-table__club { display: none; }
  .scorers-table__player { white-space: normal; padding-block: var(--space-2) !important; }
  .scorers-table__club-inline { display: block; }
}