/* SAMF disciplines listing (W7, Figma Disciplines 295:7248). Tokens only (samf-tokens.css), logical properties only so RTL and LTR share one sheet. Breakpoints: 1728 / 1024 / 375. */
.samf-disciplines { color: var(--samf-color-text); font-family: var(--samf-font-body); background: var(--samf-color-page); }
.samf-disciplines__wrap { inline-size: min(100%, 1500px); margin-inline: auto; padding-inline: 40px; }

/* Page header: 400 tall, title at the bottom, page-colour fade (no photo for a listing: a green wash instead). */
.samf-disciplines__hero {
  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-disciplines__hero .samf-disciplines__wrap { inline-size: min(100%, 1500px); }
.samf-disciplines__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-disciplines__title { letter-spacing: 0; }

.samf-disciplines__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block: 80px;
}
.samf-disciplines__grid > li { display: flex; }

/* Card (Figma discipline-card 538:7309): 337 square at 1728, radius 16, no border, photo fills it, glass caption at the bottom
   (p24, blur 12, hairline top 15%, white 0 -> 1% gradient, 32/36 Wide Medium). The 0 -> .7 black fade is Figma's Hill Climb card
   applied to every card: white 32px text must hold 3:1 over any CMS photo (WCAG AA). */
.samf-disciplines__card {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--samf-radius-card);
  overflow: hidden;
  background: var(--samf-figma-black);
}
.samf-disciplines__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-disciplines__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.samf-disciplines__image--placeholder { background: linear-gradient(135deg, var(--samf-color-surface), var(--samf-color-services)); }
.samf-disciplines__label {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  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-disciplines__name { font-family: var(--samf-font-display); font-size: 2rem; line-height: 36px; letter-spacing: 0; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.samf-disciplines__name a { color: var(--samf-color-text); text-decoration: none; display: block; }
.samf-disciplines__name a::after { content: ""; position: absolute; inset: 0; }
.samf-disciplines__card:hover .samf-disciplines__name a { color: var(--samf-color-primary); }
.samf-disciplines__card:focus-within { outline: 3px solid var(--samf-color-focus); outline-offset: 3px; }
.samf-disciplines__name a:focus-visible { outline: none; }

/* Empty state (own design): surface panel, ring mark, message */
.samf-disciplines__empty {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
  padding: 4rem 1.5rem;
  margin-block: 40px 80px;
  background: var(--samf-color-surface);
  border: 1px dashed var(--samf-color-border-strong);
  border-radius: 16px;
  color: var(--samf-color-muted);
}
.samf-disciplines__empty-mark { inline-size: 4rem; block-size: 4rem; border-radius: var(--samf-radius-pill); border: 2px solid var(--samf-color-primary); }
.samf-disciplines__empty p { margin: 0; font-size: 1rem; }

@media (max-width: 1024px) {
  .samf-disciplines__wrap { padding-inline: 24px; }
  .samf-disciplines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 40px; }
  .samf-disciplines__hero { block-size: 300px; padding-block: 120px 0; }
  .samf-disciplines__name { font-size: 1.5rem; line-height: 28px; }
  .samf-disciplines__label { padding: 16px; }
}
@media (max-width: 375px) {
  .samf-disciplines__wrap { padding-inline: 16px; }
  .samf-disciplines__grid { grid-template-columns: minmax(0, 1fr); }
  .samf-disciplines__name { font-size: 1.25rem; line-height: 24px; }
}

/* ui-web-pages-1105: Figma 295:7248 header is a photo under the transparent header (no breadcrumb); the CMS championship hero photo is the same Porsche image */
.samf-disciplines__hero {
  margin-block-start: -125px; block-size: 525px; padding-block-end: 12px;
  background:
    linear-gradient(to bottom, rgba(17, 31, 29, .35) 0%, var(--samf-color-page) 100%),
    url("/media/events/championship-hero.jpg") center 30% / cover no-repeat,
    radial-gradient(ellipse 70% 120% at 85% 0%, var(--samf-color-services) 0%, transparent 70%),
    var(--samf-color-page);
}

/* ui-web-pages-1105: Figma mobile 773:15486 keeps a 2-column grid of square cards (16 gap), caption 16/20 */
@media (max-width: 600px) {
  .samf-disciplines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .samf-disciplines__name { font-size: 1rem; line-height: 20px; }
  .samf-disciplines__label { padding: 12px; }
  .samf-disciplines__hero { block-size: 425px; }
}
@media (max-width: 1024px) { .samf-disciplines__hero { block-size: 425px; } }

/* ---------- visual-fix-1108: listing measured against Figma Disciplines 295:7248 / mobile 773:15486 ---------- */
/* The header is sticky and in the flow (125px from 1400px, 100px below), the Figma Page Header (400 tall, photo under the transparent pill) starts at y=0:
   the hero pulls up by the header height and is 400 tall, so the title sits at y 332-400 and the grid at 480 (Figma), not 193px lower. */
.samf-disciplines { --samf-header-h: 6.25rem; }
@media (min-width: 1400px) { .samf-disciplines { --samf-header-h: 7.8125rem; } }
.samf-disciplines { position: relative; }
.samf-disciplines__hero { margin-block-start: calc(-1 * var(--samf-header-h)); block-size: 400px; padding-block: 155px 0; }
@media (max-width: 1024px) { .samf-disciplines__hero { padding-block: 120px 0; } }
/* Figma 295:7248 has no breadcrumb: it stays in the page for screen readers / keyboard (SEO, WCAG 2.4.8) but is visually hidden until focused */
.samf-disciplines > .samf-breadcrumb { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.samf-disciplines > .samf-breadcrumb:focus-within { inset-block-start: var(--samf-header-h); inset-inline-start: 0; 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); }
/* Page Header photo: Figma overlays a 40% -> #111f1d fade and a 0.8 black hard-light fade from the bottom */
.samf-disciplines__hero {
  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: transparent at the bottom, .8 near-black at the top (under the header) */
    url("/media/events/championship-hero.jpg") center / cover no-repeat,
    radial-gradient(ellipse 70% 120% at 85% 0%, var(--samf-color-services) 0%, transparent 70%),
    var(--samf-color-page);
}
/* Figma 64/68 -1.28 at every desktop width (the token scales it down to 57px at 1440) */
@media (min-width: 1200px) { .samf-disciplines__title { font-size: 4rem; line-height: 68px; letter-spacing: -1.28px; } :lang(ar) .samf-disciplines__title { letter-spacing: 0; } }
/* Mobile 773:15490: hero 400 (pt 120), 20px page padding, 16 gap, 8 radius cards, caption px16 py10 */
@media (max-width: 600px) {
  .samf-disciplines__wrap { padding-inline: 20px; }
  .samf-disciplines__hero { block-size: 400px; padding-block-start: 120px; }
  .samf-disciplines__card { border-radius: 8px; }
  .samf-disciplines__label { padding: 10px 16px; }
}
@media (max-width: 1024px) { .samf-disciplines__hero { block-size: 400px; } }
/* Figma "section" 295:10490 lays the colour-burn grit photo (tyre marks) over the lower 55% of the page (same layer geometry as the M2 pages' grit--b) */
.samf-disciplines { overflow-x: clip; }
.samf-disciplines::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-disciplines::before { transform: scaleX(-1); transform-origin: 50% 50%; inset-inline-start: auto; inset-inline-end: 0; }
.samf-disciplines > .samf-disciplines__hero, .samf-disciplines > .samf-disciplines__wrap { position: relative; z-index: 1; }

/* visual-fix-1108 (G3): the caption sits on the photo's dark gradient in both themes, so the title stays white (light theme showed dark green on dark) */
.samf-disciplines__name a { color: var(--samf-figma-white); }
.samf-disciplines__card:hover .samf-disciplines__name a, .samf-disciplines__name a:focus-visible { color: var(--samf-figma-light-green); }