/* Lions de l'Atlas: Morocco's FIFA line, the squad by line, Moroccans abroad by league, moves and goals. Football hub look. */
.lions .hub-block__head { flex-wrap: wrap; }
.lions-more { margin: 0; }

.lions-club { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; color: inherit; text-decoration: none; }
.lions-club > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.lions-club:hover > span { text-decoration: underline; }
.lions-club .crest { flex: none; }
.lions-club--none { color: var(--ink-2); }

/* ---------- FIFA ---------- */
.lions-fifa { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .lions-fifa { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: stretch; } }
.lions-fifa__rank {
  display: grid; align-content: center; justify-items: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-l);
  color: #FFFFFF; background: linear-gradient(135deg, #C1272D, #7A1218);
  box-shadow: inset 0 -5px 0 #006233;
}
.lions-fifa__label { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.8); }
:root[dir="rtl"] .lions-fifa__label { letter-spacing: 0; }
.lions-fifa__number { font-family: var(--hub-font); font-stretch: 70%; font-weight: 900; font-size: clamp(4rem, 12vw, 6.5rem); line-height: 0.85; }
.lions-fifa__number::before { content: "#"; font-size: 0.45em; vertical-align: 0.9em; opacity: 0.7; }
.lions-fifa__points { font-size: var(--step-1); font-weight: 800; }
.lions-fifa__rank .lions-move { background: rgb(255 255 255 / 0.16); color: #FFFFFF; }

.lions-fifa__around { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; }
.lions-fifa__subtitle, .lions-squad__title {
  margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
:root[dir="rtl"] .lions-fifa__subtitle, :root[dir="rtl"] .lions-squad__title { letter-spacing: 0; font-size: var(--step--1); }
.lions-fifa__table { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.lions-fifa__line {
  display: grid; grid-template-columns: 2.5ch auto minmax(0, 1fr) auto 5.5ch; align-items: center; gap: var(--space-3);
  min-block-size: 48px; padding-inline: var(--space-4); border-block-end: 1px solid var(--line);
}
.lions-fifa__line:last-child { border-block-end: 0; }
.lions-fifa__line--maroc { background: color-mix(in srgb, var(--atlas-green) 12%, var(--surface)); font-weight: 800; box-shadow: inset 3px 0 0 var(--atlas-green); }
:root[dir="rtl"] .lions-fifa__line--maroc { box-shadow: inset -3px 0 0 var(--atlas-green); }
.lions-fifa__pos { font-weight: 800; color: var(--ink-2); text-align: end; }
.lions-fifa__line--maroc .lions-fifa__pos { color: var(--ink); }
.lions-fifa__nation { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lions-fifa__value { font-size: var(--step--1); color: var(--ink-2); }
.lions-fifa__line .lions-move { justify-self: end; }
.lions-fifa__date { margin: 0; font-size: 0.75rem; color: var(--ink-2); }

.lions-move { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.lions-move--up { color: var(--atlas-green); }
.lions-move--down { color: var(--flag-red); }
.lions-move--new { color: var(--ink); }

/* ---------- Squad ---------- */
.lions-squad { display: grid; gap: var(--space-5); }
.lions-squad__title { display: flex; align-items: center; gap: var(--space-2); }
.lions-squad__title .num { padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); letter-spacing: 0; }
.lions-squad__line { display: grid; gap: var(--space-2); }
.lions-squad__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.lions-player { display: flex; align-items: center; gap: var(--space-3); min-block-size: 60px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.lions-player__number {
  display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 10px;
  background: #C1272D; color: #FFFFFF; font-weight: 900;
}
.lions-player__text { display: grid; justify-items: start; gap: 2px; min-inline-size: 0; }
.lions-player__name { max-inline-size: 100%; font-weight: 750; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lions-player__name:hover { text-decoration: underline; }
.lions-player__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 0.75rem; color: var(--ink-2); min-inline-size: 0; }
.lions-player__meta .lions-club { max-inline-size: 100%; }

/* ---------- Abroad ---------- */
.lions-leagues { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.lions-league { display: grid; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.lions-league__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4);
  font-size: var(--step-0); font-weight: 800; background: var(--surface-2);
}
.lions-league__title a { color: var(--ink); text-decoration: none; }
.lions-league__title a:hover { text-decoration: underline; }
.lions-league__count { flex: none; min-inline-size: 28px; padding: 2px 8px; border-radius: 999px; background: var(--atlas-tint); color: var(--atlas-green); font-weight: 800; font-size: 0.75rem; text-align: center; }
.lions-league__clubs { display: grid; margin: 0; padding: 0; list-style: none; }
.lions-league__club { display: grid; gap: 4px; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); }
.lions-league__club .lions-club { font-size: var(--step--1); font-weight: 750; }
.lions-league__players { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.lions-league__players a { color: var(--ink); text-decoration: none; }
.lions-league__players a:hover { text-decoration: underline; }

/* ---------- Scorers ---------- */
.lions-scorers { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lions-scorer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.lions-scorer__goals { display: grid; justify-items: center; flex: none; min-inline-size: 48px; line-height: 1; }
.lions-scorer__goals .num { font-family: var(--hub-font); font-stretch: 75%; font-weight: 900; font-size: 2rem; color: var(--flag-red); }
.lions-scorer__goals small { font-size: 0.6875rem; font-weight: 700; color: var(--ink-2); }
.lions-scorer__text { display: grid; justify-items: start; gap: 2px; min-inline-size: 0; flex: 1; }
.lions-scorer__name { max-inline-size: 100%; font-weight: 800; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lions-scorer__name:hover { text-decoration: underline; }
.lions-scorer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 0.75rem; color: var(--ink-2); }
.lions-scorer__league { color: var(--ink-2); }
.lions-scorer__rank { flex: none; font-size: 0.75rem; font-weight: 800; color: var(--ink-2); }

/* ---------- Card on the Maroc page ---------- */
.lions-card {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-l);
  color: #FFFFFF; text-decoration: none; background: linear-gradient(135deg, #C1272D, #7A1218); box-shadow: inset 0 -5px 0 #006233;
}
:root[dir="rtl"] .lions-card { background: linear-gradient(225deg, #C1272D, #7A1218); }
.lions-card:hover .lions-card__title { text-decoration: underline; }
.lions-card__icon { display: grid; place-items: center; flex: none; inline-size: 48px; aspect-ratio: 1; border-radius: 14px; background: rgb(255 255 255 / 0.16); }
.lions-card__icon .icon { inline-size: 60%; block-size: 60%; }
.lions-card__text { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
.lions-card__title { font-weight: 900; font-size: var(--step-1); }
.lions-card__intro { font-size: var(--step--1); color: rgb(255 255 255 / 0.86); }
.lions-card__arrow { flex: none; inline-size: 20px; block-size: 20px; }
:root[dir="rtl"] .lions-card__arrow { transform: scaleX(-1); }