/* Sport hubs: one layout, each sport with its own colours and its playing surface drawn in CSS.
   body.theme-sport is set on every sport, competition, match and team page (MMA has its own sheet). */
body.theme-sport {
  --hub: #0B5D3B; --hub-deep: #063823; --hub-accent: #C6F432; --hub-on: #FFFFFF; --hub-line: var(--hub);
  --hub-pattern: none;
  --hub-font: "Archivo", "Inter", system-ui, sans-serif;
}
:root[dir="rtl"] body.theme-sport { --hub-font: "Noto Kufi Arabic", var(--font-arabic); }

/* Football: pitch stripes, halfway line and centre circle. */
body.theme-football, .tint-football {
  --hub: #0B6B3F; --hub-deep: #053B22; --hub-accent: #C6F432;
  --hub-pattern:
    radial-gradient(circle at 82% 50%, transparent 0 82px, rgb(255 255 255 / 0.22) 82px 84px, transparent 85px),
    linear-gradient(90deg, transparent calc(82% - 1px), rgb(255 255 255 / 0.22) calc(82% - 1px) calc(82% + 1px), transparent calc(82% + 1px)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.045) 0 64px, transparent 64px 128px);
}
/* Futsal: indoor parquet and the penalty arc. */
body.theme-futsal, .tint-futsal {
  --hub: #0E6E64; --hub-deep: #06403A; --hub-accent: #FF9F43;
  --hub-pattern:
    radial-gradient(circle at 100% 50%, transparent 0 120px, rgb(255 159 67 / 0.55) 120px 123px, transparent 124px),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.06) 0 2px, transparent 2px 26px);
}
/* Athletics: the track's lanes. */
body.theme-athletics, .tint-athletics {
  --hub: #B5412A; --hub-deep: #6C2416; --hub-accent: #7FD3FF;
  --hub-pattern:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.18) 0 2px, transparent 2px 38px),
    linear-gradient(90deg, transparent 78%, rgb(255 255 255 / 0.5) 78% calc(78% + 3px), transparent calc(78% + 3px));
}
/* Basketball: navy court, orange three-point arc and key. */
body.theme-basketball, .tint-basketball {
  --hub: #17284A; --hub-deep: #0C1630; --hub-accent: #F07A2B; --hub-line: #E2621B;
  --hub-pattern:
    radial-gradient(circle at 100% 50%, transparent 0 190px, rgb(240 122 43 / 0.7) 190px 193px, transparent 194px),
    radial-gradient(circle at 100% 50%, transparent 0 70px, rgb(240 122 43 / 0.45) 70px 72px, transparent 73px),
    linear-gradient(90deg, transparent 0 calc(100% - 150px), rgb(240 122 43 / 0.12) calc(100% - 150px));
}
/* Handball: blue court, the 6 m line in yellow and the 9 m line. */
body.theme-handball, .tint-handball {
  --hub: #1B4F91; --hub-deep: #0E2C55; --hub-accent: #F7C948;
  --hub-pattern:
    radial-gradient(circle at 100% 50%, transparent 0 130px, rgb(247 201 72 / 0.8) 130px 134px, transparent 135px),
    radial-gradient(circle at 100% 50%, transparent 0 200px, rgb(255 255 255 / 0.35) 200px 202px, transparent 203px),
    linear-gradient(90deg, transparent calc(100% - 4px), rgb(255 255 255 / 0.5) calc(100% - 4px));
}
/* Tennis: clay with white court lines (baselines near the edges, the centre service line). */
body.theme-tennis, .tint-tennis {
  --hub: #C0532A; --hub-deep: #7A3015; --hub-accent: #E4F75A;
  --hub-pattern:
    linear-gradient(180deg, transparent 8px, rgb(255 255 255 / 0.6) 8px 11px, transparent 11px calc(100% - 11px), rgb(255 255 255 / 0.6) calc(100% - 11px) calc(100% - 8px), transparent calc(100% - 8px)),
    linear-gradient(90deg, transparent 72%, rgb(255 255 255 / 0.45) 72% calc(72% + 3px), transparent calc(72% + 3px)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.03) 0 3px, transparent 3px 7px);
}
/* On phones the text runs full width, so the lines that would cross it go. */
@media (max-width: 699px) {
  body.theme-tennis { --hub-pattern:
    linear-gradient(180deg, transparent 8px, rgb(255 255 255 / 0.6) 8px 11px, transparent 11px calc(100% - 11px), rgb(255 255 255 / 0.6) calc(100% - 11px) calc(100% - 8px), transparent calc(100% - 8px)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.03) 0 3px, transparent 3px 7px); }
  body.theme-athletics { --hub-pattern: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.14) 0 2px, transparent 2px 38px); }
  body.theme-football { --hub-pattern: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.045) 0 48px, transparent 48px 96px); }
}
/* Combat sports: fight night, like MMA. Boxing in gold and red with the ring's ropes, kickboxing in orange. */
body.theme-boxing, body.theme-kickboxing {
  color-scheme: dark;
  --page: #0A0A0C; --bg: #0A0A0C; --surface: #131317; --surface-2: #19191E; --surface-3: #232329;
  --ink: #F4F4F5; --ink-2: #A1A1AA; --line: #27272E;
  --atlas-green: #3DBB7A; --atlas-tint: #13261C; --flag-red: #FF4D55; --sand: #D9B24C;
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.05);
  background: var(--page); color: var(--ink);
}
body.theme-boxing, .tint-boxing {
  --hub: #4A0F18; --hub-deep: #1A0508; --hub-accent: #E2B64C; --hub-line: #C8242C;
  --hub-pattern:
    linear-gradient(180deg, transparent 10px, rgb(226 182 76 / 0.5) 10px 13px, transparent 13px 21px, rgb(255 255 255 / 0.22) 21px 24px, transparent 24px calc(100% - 24px), rgb(255 255 255 / 0.22) calc(100% - 24px) calc(100% - 21px), transparent calc(100% - 21px) calc(100% - 13px), rgb(200 36 44 / 0.6) calc(100% - 13px) calc(100% - 10px), transparent calc(100% - 10px)),
    radial-gradient(120% 120% at 100% 0%, rgb(226 182 76 / 0.18), transparent 60%);
}
body.theme-kickboxing, .tint-kickboxing {
  --hub: #3A1606; --hub-deep: #160700; --hub-accent: #FF7A1A; --hub-line: #FF7A1A;
  --hub-pattern:
    repeating-linear-gradient(115deg, transparent 0 46px, rgb(255 122 26 / 0.22) 46px 50px, transparent 50px 96px),
    radial-gradient(120% 120% at 100% 0%, rgb(255 122 26 / 0.22), transparent 60%);
}
.theme-boxing .site-header, .theme-kickboxing .site-header { background: #000000; box-shadow: inset 0 -3px 0 var(--hub-line); }
.theme-boxing .site-header .sport-chips, .theme-kickboxing .site-header .sport-chips { background: #0E0E11; border-color: var(--line); }
.theme-boxing .site-header .sport-chip, .theme-kickboxing .site-header .sport-chip { color: var(--ink-2); }
.theme-boxing .scores-strip, .theme-kickboxing .scores-strip { background: #0E0E11; border-color: var(--line); }

/* Current sport in the top nav takes the sport's colour. */
.theme-sport .site-header .sport-chip[aria-current="page"] { background: var(--hub); border-color: var(--hub); color: #FFFFFF; }
@media (min-width: 900px) {
  .theme-sport .site-header .sport-chip[aria-current="page"] { background: none; color: var(--ink); box-shadow: inset 0 -3px 0 var(--hub-line); }
}

/* ---------- Hero ---------- */
.hub { display: grid; gap: var(--space-6); min-inline-size: 0; }
.hub-hero, .theme-sport .page-head {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--space-3);
  padding: clamp(20px, 4vw, 44px); border-radius: var(--radius-l); color: var(--hub-on);
  background: var(--hub-pattern), linear-gradient(135deg, var(--hub), var(--hub-deep));
  box-shadow: none;
}
:root[dir="rtl"] .hub-hero, :root[dir="rtl"] .theme-sport .page-head { background: var(--hub-pattern), linear-gradient(225deg, var(--hub), var(--hub-deep)); }
/* A soft scrim on the reading side keeps text legible over the court lines. */
.hub-hero::before, .theme-sport .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 0.28), transparent 65%); }
:root[dir="rtl"] .hub-hero::before, :root[dir="rtl"] .theme-sport .page-head::before { background: linear-gradient(270deg, rgb(0 0 0 / 0.28), transparent 65%); }
.hub-hero .breadcrumbs ol, .hub-hero .breadcrumbs a, .theme-sport .page-head .breadcrumbs ol, .theme-sport .page-head .breadcrumbs a { color: rgb(255 255 255 / 0.75); }
.hub-hero .breadcrumbs [aria-current="page"], .theme-sport .page-head .breadcrumbs [aria-current="page"] { color: #FFFFFF; }
.hub-hero__row { display: flex; align-items: center; gap: var(--space-4); min-inline-size: 0; }
.hub-hero__icon {
  display: grid; place-items: center; flex: none; inline-size: clamp(52px, 8vw, 72px); aspect-ratio: 1; border-radius: 18px;
  background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); color: var(--hub-accent);
}
.hub-hero__icon .icon { inline-size: 55%; block-size: 55%; }
.hub-hero__icon--text { font-family: var(--hub-font); font-weight: 900; font-size: clamp(1.25rem, 3vw, 1.75rem); color: #FFFFFF; }
.hub-hero__kicker { margin: 0 0 4px; font-size: var(--step--1); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-accent); }
:root[dir="rtl"] .hub-hero__kicker { letter-spacing: 0; }
.hub-hero__title, .theme-sport .page-head__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0;
  font-family: var(--hub-font); font-stretch: 68%; font-weight: 900; font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere;
}
.hub-hero--competition .hub-hero__title, .theme-sport .page-head__title { font-size: clamp(2rem, 5.5vw, 3.75rem); text-wrap: balance; }
:root[dir="rtl"] .hub-hero__title, :root[dir="rtl"] .theme-sport .page-head__title { font-stretch: 100%; text-transform: none; line-height: 1.25; font-size: clamp(2rem, 6vw, 4rem); }
:root[dir="rtl"] .hub-hero--competition .hub-hero__title, :root[dir="rtl"] .theme-sport .page-head__title { font-size: clamp(1.75rem, 4.5vw, 3rem); }
.hub-hero__intro, .theme-sport .page-head__intro { margin: 0; max-inline-size: 62ch; font-size: var(--step-1); color: rgb(255 255 255 / 0.86); }
.theme-sport .page-head__kicker { color: var(--hub-accent); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.theme-sport .page-head__icon { background: rgb(255 255 255 / 0.14); color: var(--hub-accent); }

.hub-nav, .theme-sport .page-tabs {
  display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: none;
}
.hub-nav::-webkit-scrollbar { display: none; }
.hub-nav__link, .theme-sport .page-tabs__tab {
  flex: none; display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-4); border-radius: 999px;
  background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: #FFFFFF; font-size: var(--step--1); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hub-nav__link:hover, .theme-sport .page-tabs__tab:hover { background: rgb(255 255 255 / 0.22); color: #FFFFFF; }
.hub-nav__link[aria-current="page"], .theme-sport .page-tabs__tab[aria-current="page"] { background: #FFFFFF; color: var(--hub-deep); box-shadow: none; }
.theme-sport .page-head > :last-child:not(.page-tabs) { margin-block-end: 0; }

/* ---------- Blocks ---------- */
.hub-grid { display: grid; gap: var(--space-6); min-inline-size: 0; }
@media (min-width: 1000px) { .hub-grid:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.hub-block { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
.hub-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 3px solid var(--hub-line); }
.hub-block__title {
  margin: 0; font-family: var(--hub-font); font-stretch: 75%; font-weight: 900; font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1; text-transform: uppercase;
}
:root[dir="rtl"] .hub-block__title { font-stretch: 100%; text-transform: none; line-height: 1.35; font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
.hub-block__more { flex: none; color: var(--ink-2); font-size: var(--step--1); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hub-block__more::after { content: " →"; }
:root[dir="rtl"] .hub-block__more::after { content: " ←"; }
.hub-empty { margin: 0; padding: var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius-m); color: var(--ink-2); background: var(--surface); }
.hub-block > .card { margin: 0; }

/* The lead headline: our own typographic cover in the sport's colours, no borrowed photo. */
.hub-lead {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: var(--space-3); min-block-size: clamp(220px, 30vw, 340px);
  padding: clamp(20px, 3.5vw, 36px); border-radius: var(--radius-l); text-decoration: none; color: #FFFFFF;
  background: var(--hub-pattern), linear-gradient(160deg, var(--hub), var(--hub-deep));
}
.hub-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 0.35), transparent 70%); }
.hub-lead__kicker { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hub-accent); }
:root[dir="rtl"] .hub-lead__kicker { letter-spacing: 0; }
.hub-lead__title { font-family: var(--hub-font); font-stretch: 78%; font-weight: 900; font-size: clamp(1.625rem, 3.6vw, 2.75rem); line-height: 1.02; text-wrap: balance; }
.hub-lead[lang="ar"] .hub-lead__title, :root[dir="rtl"] .hub-lead__title { font-family: "Noto Kufi Arabic", var(--font-arabic); font-stretch: 100%; line-height: 1.4; font-size: clamp(1.375rem, 3vw, 2.125rem); }
.hub-lead__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--step--1); color: rgb(255 255 255 / 0.8); }
.hub-lead__go { font-weight: 700; color: #FFFFFF; }
.hub-lead:hover .hub-lead__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.hub-headlines { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: hub-news; }
@media (min-width: 700px) { .hub-headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-headlines li { counter-increment: hub-news; }
.hub-headlines__link {
  position: relative; display: grid; align-content: space-between; gap: var(--space-3); block-size: 100%; min-block-size: 116px;
  padding: var(--space-4) var(--space-4) var(--space-4) 64px; border-radius: var(--radius-m); background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color 0.15s;
}
:root[dir="rtl"] .hub-headlines__link { padding: var(--space-4) 64px var(--space-4) var(--space-4); }
.hub-headlines__link::before {
  content: counter(hub-news, decimal-leading-zero); position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4);
  font-family: "Archivo", sans-serif; font-stretch: 62%; font-weight: 900; font-size: 2.125rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--hub-line);
}
.hub-headlines__link:hover { border-color: var(--hub-line); }
.hub-headlines__title { font-weight: 750; line-height: 1.3; text-wrap: pretty; }
.hub-headlines__meta { font-size: 0.75rem; color: var(--ink-2); }

.hub-wire__list { display: grid; margin: 0; padding: 0; list-style: none; }
.hub-wire__list li + li { border-block-start: 1px solid var(--line); }
.hub-wire__link { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px var(--space-3); padding-block: var(--space-3); text-decoration: none; color: var(--ink); }
.hub-wire__time { grid-row: span 2; font-size: 0.75rem; font-weight: 800; color: var(--hub-line); padding-block-start: 2px; }
.hub-wire__headline { font-weight: 650; line-height: 1.35; }
.hub-wire__link:hover .hub-wire__headline { text-decoration: underline; text-decoration-color: var(--hub-line); text-underline-offset: 3px; }
.hub-wire__source { font-size: 0.6875rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
:root[dir="rtl"] .hub-wire__source { letter-spacing: 0; }

/* ---------- Competitions ---------- */
.hub-comps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-comps--stack { grid-template-columns: minmax(0, 1fr); }
.hub-comp {
  display: flex; align-items: center; gap: var(--space-3); min-block-size: 72px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s;
}
.hub-comp:hover { border-color: var(--hub-line); transform: translateY(-1px); }
.hub-comp__badge {
  display: grid; place-items: center; flex: none; inline-size: 44px; aspect-ratio: 1; border-radius: 12px;
  background: var(--hub-pattern), linear-gradient(135deg, var(--hub), var(--hub-deep)); background-size: 300% 300%, auto;
  color: #FFFFFF; font-family: "Archivo", sans-serif; font-weight: 900; font-size: 0.875rem;
}
.hub-comp__text { display: grid; gap: 2px; min-inline-size: 0; }
.hub-comp__name { font-weight: 750; line-height: 1.25; }
.hub-comp__kind { font-size: 0.75rem; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .hub-comp { transition: none; } .hub-comp:hover { transform: none; } }

/* MMA's colours for cards outside the MMA pages (the MMA pages have their own sheet). */
.tint-mma {
  --hub: #7A0F14; --hub-deep: #170306; --hub-accent: #FF4D55; --hub-line: #E5262E;
  --hub-pattern: radial-gradient(120% 90% at 0% 100%, rgb(229 38 46 / 0.45), transparent 55%), radial-gradient(120% 90% at 100% 0%, rgb(46 107 255 / 0.35), transparent 55%);
}

/* ---------- Sport tiles (home, search) ---------- */
.sport-tiles { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.sport-tile {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: 58px; padding-inline: var(--space-3); border-radius: var(--radius-m);
  background: var(--tile, #0B6B3F); font-size: var(--step--1); color: #FFFFFF; font-weight: 800; text-decoration: none; transition: transform 0.15s;
}
.sport-tile:hover { transform: translateY(-2px); color: #FFFFFF; }
.sport-tile .icon { inline-size: 22px; block-size: 22px; }
.sport-tile--mma { --tile: #C21F28; } .sport-tile--futsal { --tile: #0E6E64; } .sport-tile--boxing { --tile: #7A1722; } .sport-tile--kickboxing { --tile: #C2560E; }
.sport-tile--athletics { --tile: #B5412A; } .sport-tile--basketball { --tile: #17284A; } .sport-tile--handball { --tile: #1B4F91; } .sport-tile--tennis { --tile: #C0532A; }
@media (prefers-reduced-motion: reduce) { .sport-tile { transition: none; } .sport-tile:hover { transform: none; } }
@media (max-width: 599px) { .sport-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sport-tile { min-block-size: 56px; } }