/* SAMF sport details with side tabs (W7, Figma 618:7652) and the /sports grid. Tokens only (samf-tokens.css), logical properties only. Breakpoints: 1728 / 1024 / 375. */
.samf-sports, .samf-sport-layout { color: var(--samf-color-text); font-family: var(--samf-font-body); background: var(--samf-color-page); }
.samf-sports-wrap, .samf-sport-wrap { inline-size: min(100%, 1500px); margin-inline: auto; padding-inline: 40px; }

/* Page headers (list and details): 400 tall, title at the bottom, fade to the page colour. */
.samf-sports-hero, .samf-sport-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  box-sizing: border-box;
  block-size: 400px;
  padding-block: 155px 0;
  background:
    linear-gradient(to bottom, transparent 40%, var(--samf-color-page) 100%),
    radial-gradient(ellipse 70% 120% at 85% 0%, var(--samf-color-services) 0%, transparent 70%),
    var(--samf-color-page);
}
.samf-sport-hero__bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.samf-sport-hero:has(.samf-sport-hero__bg)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(17, 31, 29, 0) 40%, var(--samf-color-page) 100%), linear-gradient(to top, rgba(3, 3, 3, .35), rgba(3, 3, 3, .55));
}
.samf-sports-title, .samf-sport-title {
  font-family: var(--samf-font-display);
  font-size: var(--samf-fs-h2);
  line-height: var(--samf-lh-h2);
  letter-spacing: -0.02em; /* Figma -1.28px on 64 (token --samf-ls-h2 is -0.03em: TOKEN REQUEST) */
  font-weight: 500;
  margin-block: 0;
  color: var(--samf-color-text);
}
:lang(ar) .samf-sports-title, :lang(ar) .samf-sport-title { letter-spacing: 0; }

/* /sports grid (no Figma frame): same card as the Disciplines grid 295:7248 (337 square at 1728, radius 16, photo, glass caption p24 with
   32/36 title); the summary sits under the title at 14/20. Same 0 -> .7 black fade for AA contrast over photos. */
.samf-sports-body { padding-block: 80px; }
.samf-sports-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.samf-sports-grid__item { display: flex; }
.samf-sport-card { position: relative; display: block; inline-size: 100%; aspect-ratio: 1 / 1; background: var(--samf-figma-black); color: var(--samf-color-text); border-radius: var(--samf-radius-card); overflow: hidden; }
.samf-sport-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); }
.samf-sport-card__image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.samf-sport-card__image--placeholder { background: linear-gradient(135deg, var(--samf-color-surface), var(--samf-color-services)); }
.samf-sport-card__body {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; padding: 24px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .01));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--samf-figma-white-15);
}
.samf-sport-card__title { font-family: var(--samf-font-display); font-size: var(--samf-fs-h4); line-height: 36px; letter-spacing: 0; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.samf-sport-card__link::after { content: ""; position: absolute; inset: 0; }
.samf-sport-card__link:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-sport-card__title a { color: inherit; text-decoration: none; }
.samf-sport-card__text { color: var(--samf-color-text); font-size: var(--samf-fs-body); line-height: 20px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.samf-sport-card:hover .samf-sport-card__title a { color: var(--samf-color-primary); }
.samf-sport-card:focus-within, .samf-sport-event:focus-within { outline: 3px solid var(--samf-color-focus); outline-offset: 3px; }
.samf-sports .samf-empty { color: var(--samf-color-muted); }

/* Details body: side tabs (457) + content, gap 24. */
.samf-sport-body { display: flex; align-items: flex-start; gap: 24px; padding-block: 80px; }
.samf-sport-aside { flex: 0 0 457px; max-inline-size: 100%; padding-inline-end: 24px; position: sticky; inset-block-start: 1.5rem; }
.samf-sport-content { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 32px; }

/* Side tabs: rows with a hairline under each, chevron at the end, active = green. */
.samf-sport-menu__toggle {
  min-block-size: 44px;
  background: var(--samf-color-surface);
  border: 1px solid var(--samf-color-border-strong);
  border-radius: var(--samf-radius-pill);
  color: var(--samf-color-text);
  font-weight: 700;
  padding-inline: 1.25rem;
  text-align: start;
}
.samf-sport-menu__toggle { display: flex; align-items: center; justify-content: space-between; }
.samf-sport-menu__toggle::after { content: ""; inline-size: .5rem; block-size: .5rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-block-end: .25rem; }
.samf-sport-menu__toggle:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-sport-menu__list { display: flex; flex-direction: column; margin-block-start: .75rem; }
.samf-sport-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 41px; /* 10 + 20 + 10 + 1px hairline (Figma tab) */
  box-sizing: border-box;
  padding: 10px 16px;
  color: var(--samf-color-text);
  font-family: var(--samf-font-display);
  font-size: var(--samf-fs-h6);
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  border-block-end: 1px solid var(--samf-figma-white-35);
}
.samf-sport-menu__link > span { flex: 1 1 auto; }
.samf-sport-menu__chev { flex: none; }
:lang(ar) .samf-sport-menu__chev { transform: scaleX(-1); }
.samf-sport-menu__link:hover { color: var(--samf-color-primary); }
.samf-sport-menu__link:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: -3px; }
.samf-sport-menu__link--current { color: var(--samf-color-performance); } /* Figma active tab #00C25A (6.4:1 on the page colour) */

/* Content: photo, then plain rich text (green question headings), no card boxes. */
.samf-sport-summary { margin: 0; color: var(--samf-color-text); font-family: var(--samf-font-accent); font-size: 15px; line-height: 18px; }
.samf-sport-image { inline-size: 100%; aspect-ratio: 939 / 386; object-fit: cover; border-radius: 16px; border: 1px solid var(--samf-color-border); box-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.samf-sport-section { font-family: var(--samf-font-accent); }
.samf-sport-section__title { font-family: var(--samf-font-accent); font-size: var(--samf-fs-h5); line-height: 24px; letter-spacing: -.01em; font-weight: 700; color: var(--samf-color-performance); margin-block: 0 18px; } /* Figma Grift Bold 24/24, -0.24px, #00C25A */
:lang(ar) .samf-sport-section__title { letter-spacing: 0; font-family: var(--samf-font-display); }
.samf-sport-section { margin-block-end: 0; }
.samf-sport-section + .samf-sport-section { margin-block-start: -14px; } /* content gap 32 less the 18px blank line Figma draws between blocks = 18 */
.samf-sport-section .samf-body { font-size: 15px; line-height: 18px; color: var(--samf-color-text); }
.samf-sport-section .samf-body p { margin-block: 0 18px; }
.samf-sport-section .samf-body > :last-child { margin-block-end: 0; }
.samf-sport-section .samf-body :is(ul, ol) { padding-inline-start: 24px; margin-block: 0 18px; display: flex; flex-direction: column; gap: 12px; }
.samf-sport-section .samf-body a { color: var(--samf-color-performance); }
.samf-sport-facts dt { font-weight: 700; }
.samf-sport-facts dd { margin-inline-start: 0; margin-block-end: .75rem; color: var(--samf-color-muted); }
.samf-sport-event { background: var(--samf-color-surface); border: 1px solid var(--samf-color-border); border-radius: 16px; color: var(--samf-color-text); }
.samf-sport-event a { color: inherit; }
.samf-sport-event__date { color: var(--samf-color-muted); direction: ltr; unicode-bidi: isolate; }
.samf-sport-all-events { color: var(--samf-color-primary); }
.samf-sport-btn {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 1.5rem;
  background: var(--samf-color-primary); color: var(--samf-color-on-primary); border-radius: 8px; font-weight: 600; text-decoration: none;
}
.samf-sport-btn:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-on-primary); }
.samf-sport-btn:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-body img { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  .samf-sports-wrap, .samf-sport-wrap { padding-inline: 24px; }
  .samf-sports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .samf-sports-hero, .samf-sport-hero { block-size: 300px; padding-block: 120px 0; }
  .samf-sport-menu__link { min-block-size: 44px; }
  .samf-sports-body { padding-block: 40px; }
  .samf-sport-body { flex-direction: column; align-items: stretch; padding-block: 24px 56px; }
  .samf-sport-aside { position: static; flex: none; padding-inline-end: 0; }
}
@media (max-width: 375px) {
  .samf-sports-wrap, .samf-sport-wrap { padding-inline: 16px; }
  .samf-sports-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .samf-sport-card__body { padding: 1rem; }
}

/* CMS header: photo behind the title and the colour-burn texture (DisciplinesPage item). */
.samf-sports-hero:has(.samf-sport-hero__bg)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(17, 31, 29, 0) 40%, var(--samf-color-page) 100%), linear-gradient(to top, rgba(3, 3, 3, .35), rgba(3, 3, 3, .55)); }
.samf-sports-hero[style*="--samf-hero-texture"]::after, .samf-sport-hero[style*="--samf-hero-texture"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--samf-hero-texture) center / cover; mix-blend-mode: color-burn; pointer-events: none; }

/* ui-web-pages-1105: Figma mobile 775:18394 selector = full-width bordered box, 8 radius, regular weight, chevron at the end */
@media (max-width: 991.98px) {
  .samf-sport-aside, .samf-sport-menu { inline-size: 100%; max-inline-size: 100%; padding-inline-end: 0; position: static; }
  .samf-sport-menu__toggle { inline-size: 100%; min-block-size: 48px; border-radius: 8px; background: transparent; font-weight: 400; padding: 12px 16px; }
}
@media (max-width: 991.98px) {
  .samf-sport-menu .samf-sport-menu__toggle.btn { border: 1px solid rgba(255, 255, 255, .35); color: var(--samf-color-text); }
}

/* ui-web-pages-1105: Figma 618:7652 - photo runs under the transparent header; the brush texture sits low in the header (fading in), it must not cover the photo */
.samf-sport-hero, .samf-sports-hero { margin-block-start: -125px; block-size: 525px; }
@media (max-width: 1024px) { .samf-sport-hero, .samf-sports-hero { block-size: 425px; } }
.samf-sports-hero[style*="--samf-hero-texture"]::after, .samf-sport-hero[style*="--samf-hero-texture"]::after {
  inset: 55% 0 0 0; background-position: center bottom; mix-blend-mode: multiply; opacity: .45;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 70%); mask-image: linear-gradient(to bottom, transparent, black 70%);
}
/* ui-web-pages-1105 (AR review): texture is dark mud on white, so multiply drops the white; keep title descenders off the hero edge; mirror texture in RTL */
.samf-sport-hero, .samf-sports-hero { padding-block-end: 28px; }
[dir="rtl"] .samf-sports-hero[style*="--samf-hero-texture"]::after, [dir="rtl"] .samf-sport-hero[style*="--samf-hero-texture"]::after { transform: scaleX(-1); }
.samf-sport-menu__link { font-weight: 400; }
/* ui-web-pages-1105: Figma 775:18394 selector text is regular weight, start aligned, chevron at the end */
@media (max-width: 991.98px) {
  .samf-sport-menu .samf-sport-menu__toggle.btn { font-weight: 400; text-align: start; justify-content: space-between; font-family: var(--samf-font-body); }
}

/* ui-web-pages-1105: Figma 41px rows stay; hit area reaches 44px */
.samf-sport-menu__link { position: relative; }
.samf-sport-menu__link::before { content: ""; position: absolute; inset-block: -2px; inset-inline: 0; }

/* ---------- visual-fix-1108: details and list measured against Figma Discipline Details 618:7652 / mobile 775:18394 ---------- */
/* The header is sticky and in the flow (125px from 1400px, 100px below); the Figma Page Header (400 tall, photo under the transparent pill, title at the bottom
   with nothing under it) starts at y=0, so the hero pulls up by the header height: title at 332-400 and the body at 480 (it was 193px lower). */
.samf-sports, .samf-sport-layout { --samf-header-h: 6.25rem; position: relative; overflow-x: clip; }
@media (min-width: 1400px) { .samf-sports, .samf-sport-layout { --samf-header-h: 7.8125rem; } }
.samf-sport-hero, .samf-sports-hero { margin-block-start: calc(-1 * var(--samf-header-h)); block-size: 400px; padding-block: 155px 0; }
@media (max-width: 1024px) { .samf-sport-hero, .samf-sports-hero { block-size: 400px; padding-block: 120px 0; } }
/* Figma overlays: 40% -> #111f1d fade plus a near-black .8 veil that is strongest at the TOP (under the header) and clear at the bottom (was a flat .35 -> .55 wash) */
.samf-sport-hero:has(.samf-sport-hero__bg)::before, .samf-sports-hero:has(.samf-sport-hero__bg)::before {
  background: linear-gradient(to bottom, rgba(17, 31, 29, 0) 40%, var(--samf-color-page) 100%), linear-gradient(to top, rgba(27, 30, 4, 0), rgba(3, 3, 3, .8));
}
/* Figma crops the 1728x971 header asset to 66% of its height (the car sits in the lower half) */
.samf-sport-hero__bg { object-position: 50% 66%; }
/* Figma 64/68 -1.28 at every desktop width (the token scales it down to 57px at 1440) */
@media (min-width: 1200px) { .samf-sports-title, .samf-sport-title { font-size: 4rem; line-height: 68px; letter-spacing: -1.28px; } :lang(ar) .samf-sports-title, :lang(ar) .samf-sport-title { letter-spacing: 0; } }
@media (max-width: 600px) {
  .samf-sports-title, .samf-sport-title { font-size: 2rem; line-height: 36px; }
  .samf-sports-wrap, .samf-sport-wrap { padding-inline: 20px; }
  .samf-sport-image { border-radius: 8px; }
  .samf-sport-content { gap: 24px; }
}
/* Figma 618:7652 has no breadcrumb: it stays for screen readers and keyboard users (it was already hidden behind the photo, only its 68px of height remained) and shows when focused */
.samf-breadcrumb:has(+ .samf-discipline) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.samf-breadcrumb:has(+ .samf-discipline):focus-within { inset-block-start: var(--samf-header-h); inline-size: auto; block-size: auto; margin: 0; padding-inline: 40px; overflow: visible; clip-path: none; z-index: 5; background: rgba(17, 31, 29, .85); }
/* Figma "section": the colour-burn grit photo over the lower 55% of the page, replacing the CMS texture strip in the header */
.samf-sports-hero[style*="--samf-hero-texture"]::after, .samf-sport-hero[style*="--samf-hero-texture"]::after { content: none; }
.samf-sports::before, .samf-sport-layout::before { content: ""; position: absolute; inset-block-start: 44.77%; inset-inline-start: 0; block-size: 55.23%; inline-size: 125.99%; background: url("../images/samf-page-grit.png") 0 0 / 100% 100% no-repeat; mix-blend-mode: color-burn; pointer-events: none; }
[dir="rtl"] .samf-sports::before, [dir="rtl"] .samf-sport-layout::before { transform: scaleX(-1); inset-inline-start: auto; inset-inline-end: 0; }
.samf-sport-layout > *, .samf-sports > * { position: relative; z-index: 1; }
/* Mobile 775:18394 (dark look): 40px under the 400px header, the sport selector is a white 8px-radius field (px 12, 14/20 Light, text rgba(0,0,0,.5)); .65 here keeps 4.5:1 on white */
@media (max-width: 600px) {
  .samf-sport-body { padding-block-start: 40px; }
  html:not([data-theme="light"]) .samf-sport-menu .samf-sport-menu__toggle.btn { background: var(--samf-figma-white); border-color: transparent; color: rgba(0, 0, 0, .65); font-size: .875rem; line-height: 20px; font-weight: 300; padding: 8px 12px; min-block-size: 44px; }
  html:not([data-theme="light"]) .samf-sport-menu .samf-sport-menu__toggle.btn::after { margin-block-end: .25rem; }
}
html[data-theme="light"] .samf-sport-menu .samf-sport-menu__toggle.btn { border-color: var(--samf-color-border-strong); }