/* SAMF membership page (Figma 295:7316 desktop 1728, 950:85555 mobile 375; story 126710). Exact values measured with the Figma MCP (wf-spec).
   Dark theme tokens only (samf-tokens.css). Logical properties keep RTL/LTR correct. Headings and body use "29LT Bukra" (Figma family; the font files are
   delivered by SAMF, until then --samf-font-display / Cairo render). Breakpoints 1728 / 1024 / 375. */
.samf-membership {
  --_dark: var(--samf-palette-charcoal);
  --_display: var(--samf-font-display);
  --_body: var(--samf-font-body);
  --_glass: rgba(0, 0, 0, .01);
  color: var(--samf-color-text); font-family: var(--_body); font-size: var(--samf-fs-body); line-height: var(--samf-lh-body); font-weight: var(--samf-fw-light);
}
.samf-membership :is(h1, h2, h3, h4, h5) { font-family: var(--_display); }
.samf-mb-wrap { inline-size: 100%; max-inline-size: 1500px; margin-inline: auto; padding-inline: 40px; box-sizing: border-box; }
.samf-mb-body { margin: 0; font-size: var(--samf-fs-body); line-height: var(--samf-lh-body); font-weight: var(--samf-fw-light); }

/* Page header (Figma "Page Header" 736:13784): 370 high, title 64/68 Wide Medium, 80 above the bottom, 1420 content. */
.samf-membership-hero {
  block-size: 370px; box-sizing: border-box; display: flex; align-items: flex-end; padding-block: 155px 80px;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--samf-figma-black) 80%, var(--samf-figma-page-background)), var(--samf-figma-page-background)),
    var(--samf-color-page);
}
.samf-membership-hero__title {
  inline-size: min(879px, 100%); max-inline-size: 100%; margin: 0; font-size: var(--samf-fs-h2); line-height: var(--samf-lh-h2); font-weight: var(--samf-fw-medium);
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
:lang(ar) .samf-membership-hero__title { letter-spacing: 0; }

/* Two-tone section heading (Figma "section heading"): Wide Light lead + Wide SemiBold green accent, 46/50. */
.samf-membership .samf-section-title {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin: 0; padding: 0; border: 0;
  font-size: var(--samf-fs-h3); line-height: var(--samf-lh-h3); font-weight: var(--samf-fw-light); text-transform: uppercase; color: var(--samf-color-text);
}
.samf-membership .samf-heading__lead { font-weight: var(--samf-fw-light); }
.samf-membership .samf-heading__lead:empty { display: none; }
.samf-membership .samf-heading__accent { font-weight: var(--samf-fw-semibold); color: var(--samf-color-performance); }
:lang(ar) .samf-membership .samf-section-title { text-transform: none; }
.samf-membership .samf-subtitle { margin: 0; font-size: var(--samf-fs-h5); line-height: var(--samf-lh-h5); font-weight: var(--samf-fw-medium); color: var(--samf-color-text); }
.samf-membership .samf-label { color: inherit; font-weight: var(--samf-fw-semibold); }
.samf-membership .samf-empty { color: var(--samf-color-muted); text-align: center; padding-block: 2rem; grid-column: 1 / -1; margin: 0; }

/* Buttons (Figma Button): 50 high = 15 + 20 + 15, 20 sides, radius 8, 12px chevron after a 12px gap. The 1px border sits inside the 50 (padding 14/19). */
.samf-membership .btn { --bs-btn-border-radius: var(--samf-radius-btn); }
.samf-membership :is(.samf-btn-primary, .samf-btn-dark, .samf-btn-outline) {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box;
  padding: 14px 19px; border: 1px solid transparent; border-radius: var(--samf-radius-btn);
  font-family: var(--_body); font-size: var(--samf-fs-body); line-height: var(--samf-lh-body); font-weight: var(--samf-fw-semibold);
  text-decoration: none; letter-spacing: 0; cursor: pointer; white-space: nowrap;
}
.samf-membership :is(.samf-btn-primary, .samf-btn-outline) { text-transform: uppercase; }
.samf-membership .samf-btn-dark { letter-spacing: .01em; }
:lang(ar) .samf-membership :is(.samf-btn-primary, .samf-btn-dark, .samf-btn-outline) { text-transform: none; letter-spacing: 0; }
.samf-membership :is(.samf-btn-primary, .samf-btn-dark, .samf-btn-outline)::after {
  content: ""; inline-size: 12px; block-size: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
}
[dir="rtl"] .samf-membership :is(.samf-btn-primary, .samf-btn-dark, .samf-btn-outline)::after { transform: scaleX(-1); }
.samf-membership .samf-btn-primary { background: var(--samf-color-primary); border-color: var(--samf-color-primary); color: var(--samf-color-ink); }
.samf-membership .samf-btn-primary:hover, .samf-membership .samf-btn-primary:focus { background: var(--samf-color-primary-hover); border-color: var(--samf-color-primary-hover); color: var(--samf-color-ink); }
.samf-membership .samf-btn-dark { background: var(--_dark); border-color: var(--_dark); color: var(--samf-color-text); }
.samf-membership .samf-btn-dark:hover, .samf-membership .samf-btn-dark:focus { background: var(--samf-color-page); border-color: var(--samf-color-page); color: var(--samf-color-primary); }
.samf-membership .samf-btn-outline { background: transparent; border-color: var(--samf-color-primary); color: var(--samf-color-primary); }
.samf-membership .samf-btn-outline:hover, .samf-membership .samf-btn-outline:focus { background: var(--samf-color-primary); color: var(--samf-color-ink); }

/* Overview (Figma 863:41111): 648x364 image slot + 724 text column, gap 48, text centred on the image. */
.samf-mb-overview { margin-block-start: 80px; }
.samf-mb-overview__row { display: flex; align-items: center; gap: 48px; }
.samf-mb-overview__image {
  flex: none; inline-size: min(648px, 100%); block-size: 364px; box-sizing: border-box; border: 1px solid var(--samf-color-border); border-radius: var(--samf-radius-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
  background: linear-gradient(135deg, var(--samf-color-services), var(--samf-color-surface) 60%, var(--samf-color-page));
}
.samf-mb-overview__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.samf-mb-overview__text > .samf-section-title, .samf-mb-overview__text > .samf-mb-body { inline-size: 100%; }
.samf-mb-overview__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

/* Member types (Figma 950:85554): 458 intro column (24 gap, 24 end padding) + 2-column grid, gap 24; cards radius 32, padding 24, four brand fills. */
.samf-mb-types { margin-block: 80px; }
.samf-mb-types__row { display: flex; align-items: flex-start; gap: 24px; }
.samf-mb-types__intro { flex: none; inline-size: min(458px, 100%); box-sizing: border-box; padding-inline-end: 24px; display: flex; flex-direction: column; gap: 24px; }
.samf-mb-types__grid { flex: 1 1 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.samf-member-card, .samf-licence-card { border: 0; border-radius: var(--samf-radius-xl); color: var(--samf-color-text); }
.samf-member-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; box-sizing: border-box; }
.samf-member-card > * { margin: 0; }
.samf-member-card__title { align-self: stretch; font-size: var(--samf-fs-h4); line-height: var(--samf-lh-h4); font-weight: var(--samf-fw-medium); text-transform: uppercase; overflow-wrap: anywhere; }
:lang(ar) .samf-member-card__title { text-transform: none; }
.samf-member-card--0 { background: var(--samf-color-services); }
.samf-member-card--1 { background: var(--samf-color-performance); color: var(--_dark); }
.samf-member-card--2 { background: var(--samf-color-primary); color: var(--_dark); }
/* Fixed dark card in both themes (was --samf-color-text with dark text: unreadable in light theme). */
.samf-member-card--3 { background: var(--_dark); color: var(--samf-color-on-dark); }
.samf-member-card--3 .samf-btn-dark { background: var(--samf-color-primary); border-color: var(--samf-color-primary); color: var(--_dark); }
.samf-member-card .samf-member-card__title, .samf-member-card .samf-label { color: inherit; }
.samf-member-card .samf-btn-dark { margin-block-start: auto; }
.samf-member-card__conditions { padding-inline-start: 1.25rem; }
.samf-member-card:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--samf-color-primary) 55%, transparent); }

.samf-fees { align-self: stretch; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding-block: .75rem 8px; margin: 0; border-block-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: var(--samf-fs-body); }
.samf-fees dt { font-weight: var(--samf-fw-semibold); }
.samf-fees dd { margin: 0; font-weight: var(--samf-fw-semibold); }

/* How to apply (Figma 863:41184): white band, 5 charcoal cards (radius 12, padding 24, gap 16) with a 95px numbered circle. */
.samf-mb-apply { background: var(--samf-color-text); color: var(--samf-color-ink); padding-block: 80px; }
.samf-mb-apply .samf-mb-wrap { display: flex; flex-direction: column; gap: 40px; }
.samf-mb-apply .samf-heading__lead { color: var(--samf-palette-charcoal); }
.samf-mb-apply__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.samf-mb-apply__step { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; box-sizing: border-box; border-radius: var(--samf-radius); background: var(--samf-palette-charcoal); color: var(--samf-color-text); }
.samf-mb-apply__num {
  display: flex; align-items: center; justify-content: center; flex: none; inline-size: 95px; block-size: 95px; box-sizing: border-box;
  border: 2px solid var(--samf-color-text); border-radius: 100px; font-size: 48px; line-height: 64px; font-weight: var(--samf-fw-medium); letter-spacing: -.02em;
}
:lang(ar) .samf-mb-apply__num { letter-spacing: 0; }
.samf-mb-apply__text { margin: 0; align-self: stretch; text-align: center; font-size: var(--samf-fs-small); line-height: var(--samf-lh-small); font-weight: var(--samf-fw-medium); }

/* Licensing (Figma 873:41272): 80 padding, heading 56 high, tabs 40 high, glass panel (radius 32, padding 32, gap 24). */
.samf-membership-section { padding-block: 80px; }
.samf-membership-section .samf-section-title { block-size: 56px; margin-block-end: 24px; }
.samf-membership .samf-tabs { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; margin: 0 0 24px; padding: 0; border: 0; box-shadow: inset 0 -1px 0 var(--samf-color-text); }
.samf-membership .samf-tabs .nav-link {
  flex: none; box-sizing: border-box; block-size: 40px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 10px 24px; margin: 0; background: transparent; border: 0; border-block-end: 1px solid var(--samf-color-text); border-radius: 0;
  color: var(--samf-color-text); font-family: var(--_display); font-size: var(--samf-fs-h6); line-height: var(--samf-lh-h6); font-weight: var(--samf-fw-medium);
}
.samf-membership .samf-tabs .nav-link:hover { color: var(--samf-color-primary); }
.samf-membership .samf-tabs .nav-link.active { background: transparent; border-block-end: 3px solid var(--samf-color-primary); color: var(--samf-color-primary); }
.samf-membership .samf-tabpanel:not([hidden]) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; box-sizing: border-box;
  background: var(--_glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--samf-color-border); border-radius: var(--samf-radius-xl);
}
.samf-membership .samf-tabpanel > * { margin: 0; align-self: stretch; }
.samf-membership .samf-tabpanel > .samf-mb-panel-cta { align-self: flex-start; }

/* Steps: plain decimal list, 12 between items (Figma tab-content). */
.samf-steps { padding-inline-start: 1.25rem; display: block; }
.samf-steps li { margin-block-end: 12px; }
.samf-steps li:last-child { margin-block-end: 0; }

/* Licence cards: glass panel with a hairline, radius 32. */
.samf-licence-card { background: var(--_glass); border: 1px solid var(--samf-color-border); }
.samf-licence-card:hover { border-color: var(--samf-color-primary); }
.samf-licence-card .card-body { padding: 32px; }
.samf-licence-card h4 { color: var(--samf-color-primary); font-weight: var(--samf-fw-medium); font-size: var(--samf-fs-h5); }
.samf-membership .samf-pill { background: var(--samf-color-services); color: var(--samf-color-text); border: 1px solid var(--samf-color-border); font-size: var(--samf-fs-small); font-weight: var(--samf-fw-semibold); }
.samf-membership .samf-badge { background: var(--samf-color-primary); color: var(--samf-color-on-primary); margin-inline-end: .25rem; }
.samf-table thead th { color: var(--samf-color-primary); }
.samf-table { --bs-table-border-color: var(--samf-color-border); }
.samf-membership a:focus-visible,
.samf-membership button:focus-visible,
.samf-membership .samf-tabpanel:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }

@media (max-width: 1024px) {
  .samf-mb-overview__row, .samf-mb-types__row { flex-direction: column; align-items: stretch; }
  .samf-mb-overview__image { inline-size: 100%; block-size: auto; aspect-ratio: 648 / 364; }
  .samf-mb-types__intro { inline-size: auto; padding-inline-end: 0; }
  .samf-mb-apply__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile frame 950:85555 (375): header 230, 20 gutters, sections 40 apart, cards radius 16 / padding 16, buttons 12/8 radius 6, 44 touch targets. */
@media (max-width: 575.98px) {
  .samf-mb-wrap { padding-inline: 20px; }
  .samf-membership-hero { block-size: 230px; padding-block: 120px 0; }
  .samf-membership-hero__title { inline-size: 100%; font-size: 32px; line-height: 36px; letter-spacing: 0; }
  .samf-mb-overview { margin-block-start: 40px; }
  .samf-mb-overview__row { gap: 24px; }
  .samf-mb-overview__image { border-radius: var(--samf-radius-btn); }
  .samf-mb-overview__text { gap: 24px; }
  .samf-membership .samf-section-title { font-size: var(--samf-fs-h5); line-height: var(--samf-lh-h5); gap: 4px; }
  .samf-membership .samf-heading__accent { font-weight: var(--samf-fw-medium); }
  .samf-mb-types { margin-block: 40px; }
  .samf-mb-types__row { gap: 24px; }
  .samf-mb-types__intro { padding-inline-end: 24px; }
  .samf-mb-types__grid { grid-template-columns: minmax(0, 1fr); }
  .samf-member-card { padding: 16px; border-radius: var(--samf-radius-card); }
  .samf-member-card__title { font-size: var(--samf-fs-h5); line-height: 1; letter-spacing: -.04em; }
  :lang(ar) .samf-member-card__title { letter-spacing: 0; line-height: var(--samf-lh-h5); }
  .samf-membership :is(.samf-btn-primary, .samf-btn-dark, .samf-btn-outline) { min-block-size: 44px; padding: 7px 11px; border-radius: .375rem; font-size: var(--samf-fs-small); line-height: var(--samf-lh-small); font-weight: var(--samf-fw-medium); }
  .samf-mb-apply { padding-block: 40px; }
  .samf-mb-apply .samf-mb-wrap { gap: 24px; }
  .samf-mb-apply__steps { grid-template-columns: minmax(0, 1fr); }
  .samf-membership-section { padding-block: 40px; }
  .samf-membership-section .samf-section-title { block-size: 28px; margin-block-end: 24px; }
  .samf-membership .samf-tabs .nav-link { min-block-size: 44px; padding-inline: 16px; }
  .samf-membership .samf-tabpanel:not([hidden]) { padding: 16px; border-radius: var(--samf-radius-card); }
}

@media (max-width: 375px) {
  .samf-membership .samf-tabs { gap: 0; }
  .samf-membership .samf-tabs .nav-link { padding-inline: 12px; }
}

/* Requirements and Membership Fees (Figma 873:41272): white band, two columns, fees on a light grey card with dark text */
.samf-membership .samf-mb-info { background: var(--samf-color-text); color: var(--samf-palette-charcoal); padding-block: 40px 80px; }
.samf-membership .samf-mb-info .samf-mb-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.samf-membership .samf-mb-info__col { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 12px; }
.samf-membership .samf-mb-info__col:nth-child(2) { background: color-mix(in srgb, white 95%, var(--samf-palette-charcoal)); }
.samf-membership .samf-mb-info .samf-subtitle { margin: 0 0 8px; font-size: 32px; line-height: 36px; color: var(--samf-palette-charcoal); }
.samf-membership .samf-mb-info .samf-mb-body { margin: 0; line-height: 1.5; color: var(--samf-palette-charcoal); }
@media (max-width: 767.98px) {
  .samf-membership .samf-mb-info { padding-block: 24px 40px; }
  .samf-membership .samf-mb-info .samf-mb-wrap { grid-template-columns: minmax(0, 1fr); }
  .samf-membership .samf-mb-info__col { padding: 16px; }
  .samf-membership .samf-mb-info .samf-subtitle { font-size: 24px; line-height: 24px; }
}

/* 1105 Figma review: Requirements column has no fill, so its text aligns with the container edge (only the Fees column is padded); Member types heading stacks lead over accent. */
.samf-membership .samf-mb-info__col:nth-child(1) { padding-inline: 0; }
@media (min-width: 992px) { .samf-mb-types__intro .samf-section-title { flex-direction: column; align-items: flex-start; gap: 0; } }

/* ui-web-pages-1105: Figma's 370 / 230 page header includes the nav, but the sticky site header (125 at 1400+, 100 below) sits in the flow, so pull the hero up under it. */
.samf-membership-hero { margin-block-start: -100px; }
@media (min-width: 1400px) { .samf-membership-hero { margin-block-start: -125px; } }

/* visual-fix-1108 (G2): Figma 295:7316 / 950:85555 */
/* 1. Motorsport clubs card (4th) is white with charcoal text and a charcoal button on the dark theme (Figma 295:10698). Light theme keeps the dark card (a white card would vanish on the white page). */
html:not([data-theme="light"]) .samf-member-card--3 { background: var(--samf-figma-white); color: var(--_dark); }
html:not([data-theme="light"]) .samf-member-card--3 .samf-btn-dark { background: var(--_dark); border-color: var(--_dark); color: var(--samf-figma-white); }
/* 2. Colour-burn grit photo under the dark part of the page (header .. member types): bottom 55.23% of that section, 125.99% wide, flush left; ends at the top of the white How-to-apply band. */
.samf-membership { position: relative; isolation: isolate; background: var(--samf-color-page); }
.samf-mb-apply { position: relative; }
.samf-mb-apply::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 100%; block-size: 885px; pointer-events: none;
  background: url("../images/samf-page-grit.png") 0 0 / 125.99% 100% no-repeat; mix-blend-mode: color-burn;
}
[dir="rtl"] .samf-mb-apply::before { transform: scaleX(-1); }
@media (max-width: 1024px) { .samf-mb-apply::before { block-size: 1100px; } }
@media (max-width: 575.98px) { .samf-mb-apply::before { block-size: 1190px; } }
/* Light theme (the default theme of the site): these surfaces are fixed dark/white in Figma, so their text must not follow the page text colour
   (title on the dark header, text on the dark Competitors card, the apply band and its charcoal cards all became invisible). */
html[data-theme="light"] .samf-membership-hero__title { color: var(--samf-figma-white); }
html[data-theme="light"] .samf-member-card--0 { color: var(--samf-figma-white); }
html[data-theme="light"] .samf-member-card--2 { background: var(--samf-figma-light-green); }
html[data-theme="light"] :is(.samf-member-card--0, .samf-member-card--1, .samf-member-card--2) .samf-btn-dark { color: var(--samf-figma-white); }
html[data-theme="light"] .samf-mb-apply, html[data-theme="light"] .samf-membership .samf-mb-info { background: var(--samf-figma-white); color: var(--samf-figma-racing-charcoal); }
html[data-theme="light"] .samf-mb-apply__step { color: var(--samf-figma-white); }
html[data-theme="light"] .samf-mb-apply__num { border-color: var(--samf-figma-white); }