/* ---------- Sport detail and sports list (NAS-UI-024, Proposed) ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 72px); }

/* Sports list page head */
.sports-head { text-align: center; margin-block-end: var(--space-5); }
.sports-head__eyebrow { margin: 0; font-weight: 700; letter-spacing: .3em; font-size: var(--fs-caption); color: var(--nas-teal); }
.sports-head__title {
  margin-block: var(--space-2) var(--space-3);
  font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.3; padding-block: .1em .2em;
  background: linear-gradient(100deg, var(--nas-purple), var(--nas-blue) 40%, var(--nas-teal) 70%, var(--nas-green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[lang|="ar"] .sports-head__title { font-style: normal; font-family: var(--font-arabic); }
.sports-head .prose { margin-inline: auto; }

/* Facts strip directly under the banner */
.sport-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin-block: calc(var(--space-5) * -1 + var(--space-3)) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff; border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(35, 31, 64, .45);
  border: 1px solid rgba(63, 46, 129, .08);
  position: relative; z-index: 2;
}
.sport-facts__item { display: flex; flex-direction: column; gap: 4px; }
.sport-facts__label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nas-muted); }
.sport-facts__item strong { font-size: 1.1rem; }
.sport-facts__cta { margin-inline-start: auto; border-radius: var(--radius-pill); }

/* Sticky in-page navigation */
.sport-toc {
  position: sticky; inset-block-start: calc(var(--header-height) - 4px); z-index: 5;
  margin-block-end: var(--space-4); padding-block: var(--space-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .85));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sport-toc ul { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sport-toc a {
  display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-3); white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid rgba(63, 46, 129, .15);
  color: var(--nas-ink); font-weight: 600; text-decoration: none; background: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sport-toc a:hover, .sport-toc a:focus-visible { background: var(--nas-purple); border-color: var(--nas-purple); color: #fff; }

/* Information panels */
.sport-info { display: grid; gap: var(--space-4); }
.sport-panel {
  padding: var(--space-5); background: #fff; border-radius: 18px;
  border: 1px solid rgba(63, 46, 129, .08);
  box-shadow: 0 10px 30px -24px rgba(35, 31, 64, .5);
}
.sport-panel__title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: 1.35rem; }
.sport-panel__icon {
  display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--nas-gradient); color: #fff; font-weight: 800; font-size: 1rem;
}
.sport-panel__lead { font-size: 1.05rem; line-height: 1.7; }
.sport-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.sport-chips li {
  padding: 8px 16px; border-radius: var(--radius-pill); font-weight: 600;
  background: rgba(26, 173, 162, .1); color: var(--nas-ink); border: 1px solid rgba(26, 173, 162, .25);
}
.sport-panel--rules { border-inline-start: 5px solid var(--nas-teal); }
/* Structured rules (Views/Home/_RulesBody.cshtml) */
.rules { display: grid; gap: var(--space-4); }
.rules__head {
  padding: var(--space-4) var(--space-5); border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, var(--nas-purple) 0%, #2f5f86 55%, #11706a 100%);
}
.rules__title { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.3; }
.rules__subtitle { margin: var(--space-1) 0 0; opacity: .9; font-weight: 600; }
.rules__meta {
  display: inline-block; margin: var(--space-3) 0 0; padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18); font-size: .8rem; font-weight: 700; letter-spacing: .03em;
}
.rules__index ol {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
}
.rules__index a {
  display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(63, 46, 129, .14); background: #fff; color: var(--nas-ink); text-decoration: none;
  font-weight: 600; font-size: .92rem; line-height: 1.3; transition: border-color .2s ease, transform .2s ease;
}
.rules__index a:hover, .rules__index a:focus-visible { border-color: var(--nas-teal); transform: translateY(-1px); }
.rules__index-num {
  display: inline-grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: rgba(26, 173, 162, .14); color: #11706a; font-size: .78rem; font-weight: 800;
}
.rules__section {
  padding: var(--space-4) var(--space-5); border-radius: 16px; background: #fff;
  border: 1px solid rgba(63, 46, 129, .1); box-shadow: 0 10px 30px -24px rgba(35, 31, 64, .45);
  scroll-margin-block-start: 140px;
}
.rules__section--plain { background: transparent; border: 0; box-shadow: none; padding: 0; }
.rules__heading { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: 1.15rem; font-weight: 800; }
.rules__badge {
  display: inline-grid; place-items: center; flex: none; inline-size: 42px; block-size: 42px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(63, 46, 129, .1), rgba(26, 173, 162, .16)); color: var(--nas-purple);
}
.rules__badge svg { inline-size: 22px; block-size: 22px; }
.rules__heading-text { display: flex; flex-direction: column; line-height: 1.25; }
.rules__heading-num { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: #11706a; }
.rules__text { margin: 0 0 var(--space-2); line-height: 1.8; max-inline-size: 85ch; }
.rules__text--lead { font-weight: 700; margin-block-start: var(--space-3); }
.rules__list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); max-inline-size: 90ch; }
.rules__list li { position: relative; padding-inline-start: 30px; line-height: 1.75; }
.rules__list li::before {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .55em; inline-size: 14px; block-size: 14px;
  border-radius: 4px; background: var(--nas-teal);
  clip-path: polygon(14% 50%, 0 64%, 40% 100%, 100% 22%, 86% 8%, 40% 72%);
}
.rules__fact {
  display: inline-block; padding: 0 8px; border-radius: 6px; font-weight: 700; white-space: nowrap;
  background: rgba(107, 190, 70, .16); color: #2d5a17; unicode-bidi: isolate;
}
.rules__table-wrap { overflow-x: auto; margin: var(--space-3) 0; border-radius: 12px; border: 1px solid rgba(63, 46, 129, .14); }
.rules__table-wrap:focus-visible { outline: 3px solid var(--nas-teal); outline-offset: 2px; }
.rules__table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.rules__table th {
  background: var(--nas-purple); color: #fff; text-align: start; padding: 12px 16px; font-weight: 700; white-space: nowrap;
}
.rules__table td { padding: 12px 16px; border-block-start: 1px solid rgba(63, 46, 129, .1); vertical-align: top; line-height: 1.6; }
.rules__table tbody tr:nth-child(even) td { background: rgba(26, 173, 162, .05); }
.rules__table td:first-child { font-weight: 700; color: var(--nas-ink); }
.rules__foot { margin: 0; font-size: .85rem; color: var(--nas-muted, #5b5870); }
@media (max-width: 600px) {
  .rules__head, .rules__section { padding: var(--space-3); }
  .rules__heading { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .rules__index a { transition: none; } }
.sport-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.sport-docs a {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: 12px;
  border: 1px solid rgba(63, 46, 129, .12); color: var(--nas-ink); text-decoration: none; font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sport-docs a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(35, 31, 64, .5); }
.sport-docs__icon { padding: 6px 8px; border-radius: 6px; background: var(--nas-purple); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .05em; }

/* Registration at the bottom */
.sport-register {
  margin-block-start: var(--space-5); padding: var(--space-6) var(--space-5); text-align: center;
  border-radius: 22px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--nas-purple), var(--nas-blue) 45%, var(--nas-teal) 80%, var(--nas-green));
  box-shadow: 0 24px 48px -28px rgba(35, 31, 64, .7);
}
.sport-register a:not(.btn-nas) { color: #fff; }
.sport-register__title { color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin: 0 0 var(--space-2); }
:root[lang|="ar"] .sport-register__title { font-style: normal; font-family: var(--font-arabic); }
.sport-register__lead { max-inline-size: 60ch; margin: 0 auto var(--space-4); opacity: .92; }
.sport-register__note { opacity: .85; }
.sport-register__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; gap: var(--space-4); }
.sport-register__choice {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; padding: var(--space-4);
  border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sport-register .btn-nas--accent { background: #fff; color: var(--nas-purple); text-shadow: none; }
.sport-register .btn-nas--primary { background: rgba(255, 255, 255, .15); border: 2px solid #fff; color: #fff; }
.sport-register .alert { text-align: start; }

@media (max-width: 575.98px) {
  .sport-facts { padding: var(--space-4); }
  .sport-facts__cta { inline-size: 100%; justify-content: center; margin-inline-start: 0; }
  .sport-panel { padding: var(--space-4); }
  .sport-register__choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }