/* /about (W8, Figma About 295:7246). Dark theme tokens only (samf-tokens.css). Logical properties; breakpoints 1728 / 1024 / 575 / 375. */
.samf-about { color: var(--samf-color-text); font-family: var(--samf-font-body); background: var(--samf-color-page); overflow-x: clip; }
.samf-about :is(h1, h2, h3, h4, h5) { font-family: var(--samf-font-display); }
.samf-about-wrap { inline-size: min(100%, 1500px); margin-inline: auto; padding-inline: 40px; }
.samf-about-block { padding-block-start: 80px; }
.samf-about-accent { color: var(--samf-color-performance); font-weight: 300; } /* Figma H3 Light 46/50: accent words are the same Light weight, only green */

/* Header: 700 tall, photo (optional) under a fade to the page colour, eyebrow + display title at the bottom. */
.samf-about-header {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  box-sizing: border-box; min-block-size: 700px;
  padding-block: 155px 0;
  background:
    linear-gradient(to bottom, transparent 22%, var(--samf-color-page) 100%),
    radial-gradient(ellipse 70% 100% at 85% 0%, var(--samf-color-services) 0%, transparent 70%),
    var(--samf-color-page);
}
.samf-about-hero-bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.samf-about-header:has(.samf-about-hero-bg)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(17, 31, 29, 0) 22%, var(--samf-color-page) 100%);
}
.samf-about-header .samf-about-wrap { max-inline-size: 1420px; }
@media (min-width: 1025px) { .samf-about-header .samf-about-wrap { padding-inline: 0; } } /* Figma Page Header: 1420 wide section at x=154, text flush with its edge */
.samf-about-title { max-inline-size: 879px; font-size: var(--samf-fs-h1); line-height: var(--samf-lh-h1); letter-spacing: -0.04em; font-weight: 600; margin-block: 0; text-transform: uppercase; } /* Figma H1 code: tracking -3.2px = -4% (token --samf-ls-h1 is -0.05em: TOKEN REQUEST) */
.samf-about .samf-eyebrow { max-inline-size: 879px; color: var(--samf-color-primary); font-family: var(--samf-font-display); font-size: 2rem; line-height: 36px; font-weight: 300; letter-spacing: 0; text-transform: uppercase; margin-block: 0 16px; }
.samf-about:lang(ar) :is(.samf-eyebrow, .samf-about-title) { letter-spacing: 0; text-transform: none; }

/* Section headings (46/50, last words in green). */
.samf-about .samf-section-title { font-size: var(--samf-fs-h3); line-height: 50px; font-weight: 300; color: var(--samf-color-text); margin: 0; padding: 0; border: 0; text-transform: uppercase; letter-spacing: 0; }
.samf-about:lang(ar) .samf-section-title { text-transform: none; line-height: 1.3; }

/* Intro: photo left (rounded, shadow), heading + text right. */
.samf-about-intro { display: flex; align-items: center; gap: 24px; }
.samf-about-intro__image { flex: 1 1 0; min-inline-size: 0; aspect-ratio: 648 / 364; object-fit: cover; border-radius: 32px; border: 1px solid var(--samf-color-border); box-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.samf-about-intro__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 40px; padding-inline: 24px; }
.samf-about-overview { font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; color: var(--samf-color-text); margin: 0; }

/* Mission / vision: two big rounded cards. */
.samf-about-mv { display: flex; gap: 24px; align-items: stretch; }
.samf-about-mv__card { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 32px; }
.samf-about-mv__card p { margin: 0; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; }
.samf-about-mv__title { margin: 0; color: inherit; font-size: var(--samf-fs-h3); line-height: 50px; font-weight: 600; text-transform: uppercase; } /* Figma: OUR light, MISSION/VISION SemiBold */
.samf-about:lang(ar) .samf-about-mv__title { text-transform: none; line-height: 1.3; }
.samf-about-mv__card--mission { gap: 32px; background: var(--samf-color-services); color: var(--samf-color-text); }
.samf-about-mv__card--vision { background: linear-gradient(151deg, var(--samf-color-primary) 0%, var(--samf-color-performance) 100%); color: var(--samf-color-ink); }

/* Heading row used by board and committees: title left, short paragraph right. */
.samf-about-headrow { display: flex; gap: 24px; align-items: flex-start; }
.samf-about-headrow .samf-section-title { flex: 1 1 0; min-inline-size: 0; }
.samf-about-board .samf-about-headrow__text { flex: 0 0 578px; }
.samf-about-committees .samf-section-title { flex: 0 0 879px; }
.samf-about-committees .samf-about-headrow__text { flex: 1 1 0; }
.samf-about-headrow__text { flex: 0 1 578px; min-inline-size: 0; margin: 0; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; }

/* Board: wide chairman card, then four cards per row. */
.samf-about-board { padding-block-end: 80px; }
.samf-about-board__cards { display: flex; flex-direction: column; gap: 24px; margin-block-start: 40px; }
.samf-about-board__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.samf-about-member { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; text-align: center; background: var(--samf-figma-black-50); border: 1px solid var(--samf-figma-white-15); border-radius: 16px; }
.samf-about-member--large { flex-direction: row; gap: 32px; padding: 32px; text-align: start; }
.samf-about .samf-portrait { flex: none; inline-size: 150px; block-size: 150px; border-radius: 50%; border: 1px solid var(--samf-color-on-dark); object-fit: cover; background: var(--samf-color-services); display: block; }
.samf-about-member--large .samf-portrait { inline-size: 200px; block-size: 200px; }
.samf-about figcaption { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.samf-about figcaption strong { font-family: var(--samf-font-display); font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; }
.samf-about-member--large figcaption strong { font-size: var(--samf-fs-h6); line-height: 22px; }
.samf-about .samf-role { color: var(--samf-color-primary); font-size: var(--samf-fs-small); line-height: 16px; font-weight: 500; }

/* Committees: green band, white cards, three per row. */
.samf-about-committees { padding-block: 80px; background: linear-gradient(203deg, var(--samf-color-performance) 26%, var(--samf-color-primary) 64%); color: var(--samf-color-ink); }
.samf-about-committees .samf-section-title { color: var(--samf-color-ink); }
.samf-about-committees .samf-about-headrow__text { color: var(--samf-figma-black); }
.samf-about-committees .samf-about-accent { color: var(--samf-color-services); }
.samf-about-committees__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 40px; } /* Figma committee-cards: 3 x 462.67 + 2 x 16 = 1420 */
.samf-about-committee { display: flex; align-items: center; gap: 24px; padding: 32px; background: var(--samf-color-on-dark); color: var(--samf-color-ink); border-radius: var(--samf-radius-card); } /* Figma CommiteeCard 1351:15203 */
.samf-about-committee__no { flex: none; display: grid; place-items: center; inline-size: 95px; block-size: 95px; box-sizing: border-box; border: 2px solid var(--samf-figma-black); border-radius: 100px; font-family: var(--samf-font-display); font-size: 48px; line-height: 64px; letter-spacing: -0.96px; font-weight: 500; color: var(--samf-color-ink); text-box: trim-both cap alphabetic; }
.samf-about-committee__text { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-block-size: 60px; min-inline-size: 0; flex: 1 1 0; }
.samf-about .samf-about-committee__title { margin: 0; font-size: 18px; line-height: 18px; font-weight: 500; color: var(--samf-color-services); overflow-wrap: anywhere; } /* Figma the Figma green is 2.4:1 on white (AA needs 4.5 at 18px): deliberate exception, services green 9.6:1 */
.samf-about-committee__desc, .samf-about-committee__desc p { font-size: var(--samf-fs-small); line-height: 16px; font-weight: 500; margin: 0; color: var(--samf-figma-black); }

/* Latest news (white band, Figma News Carousel 1351:15401): py 80, heading row then cards gap 40; card = glass 1%, radius 8, image 376:251 with a white
   badge (p 10/6, radius 20) on it, details p16 gap 4 (date 12/16, title 14/20 racing charcoal). Figma shows 4 cards; the page rule is "three newest"
   (AboutLayout.LatestNews, tested), so 3 columns stay. the Figma green on white is 2.4:1 (heading 46px needs 3:1, date 12px needs 4.5:1): services green 9.6:1. */
.samf-about-news { padding-block: 80px; background: var(--samf-color-on-dark); color: var(--samf-color-ink); }
.samf-about-news .samf-section-title { color: var(--samf-color-ink); }
.samf-about-news .samf-about-accent { color: var(--samf-color-services); }
.samf-about-news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-block-end: 40px; }
.samf-about-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.samf-about-news__card { position: relative; display: flex; flex-direction: column; align-items: stretch; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.samf-about-news__media { position: relative; border-radius: 8px; overflow: hidden; }
.samf-about-news__image { display: block; inline-size: 100%; aspect-ratio: 376 / 251; object-fit: cover; border-radius: 8px; }
.samf-about-news__image--placeholder { background: linear-gradient(135deg, var(--samf-color-surface), var(--samf-color-services)); }
.samf-about-news__badges { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: 16px; }
.samf-about-news__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; }
.samf-about .samf-date { color: var(--samf-color-services); font-size: var(--samf-fs-small); line-height: 16px; font-weight: 400; margin: 0; } /* Figma 300; the repo a11y rule forbids small text lighter than 400: deliberate exception */
.samf-about .samf-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--samf-figma-white); color: var(--samf-figma-black); border-radius: 20px; padding: 6px 10px; font-size: var(--samf-fs-small); line-height: 16px; font-weight: 400; } /* Figma 300; repo a11y rule: small text is never lighter than 400 */
.samf-about .samf-about-news__title { margin: 0; font-family: var(--samf-font-body); font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; color: var(--samf-color-ink); }
.samf-about-news__excerpt { margin: 0; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; color: var(--samf-color-ink); }
.samf-about .samf-btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 44px; padding: 15px 20px; background: var(--samf-color-ink); color: var(--samf-color-text); border: 0; border-radius: 8px; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; text-decoration: none; flex: none; } /* Figma button dark 1351:13943: 50 tall, 14/20 SemiBold, 12px icon */
.samf-about .samf-btn-dark svg { flex: none; }
.samf-about:lang(ar) .samf-btn-dark svg { transform: scaleX(-1); }
.samf-about .samf-btn-dark:hover { background: var(--samf-color-services); color: var(--samf-color-text); }
.samf-about .samf-about-news__title a { color: inherit; text-decoration: none; }
.samf-about .samf-about-news__title a:hover { text-decoration: underline; }
.samf-about .samf-empty { color: var(--samf-color-muted); text-align: center; padding-block: 2rem; }
.samf-about-news .samf-empty { color: var(--samf-color-page); }
.samf-about :is(a, button):focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-about-news :is(a, button):focus-visible { outline-color: var(--samf-color-page); }

/* Tablet (<= 1024) and mobile (<= 575). */
@media (max-width: 1024px) {
  .samf-about-wrap { padding-inline: 24px; }
  .samf-about-block { padding-block-start: 56px; }
  .samf-about-header { min-block-size: 480px; padding-block: 120px 32px; }
  .samf-about .samf-eyebrow { font-size: 1.5rem; line-height: 28px; margin-block-end: 24px; }
  .samf-about .samf-section-title { font-size: var(--samf-fs-h4); line-height: 1.2; }
  .samf-about-mv__title { font-size: var(--samf-fs-h4); line-height: 1.2; }
  .samf-about-intro, .samf-about-mv, .samf-about-headrow { flex-direction: column; align-items: stretch; }
  .samf-about-intro__text { padding-inline: 0; gap: 24px; }
  .samf-about-headrow__text, .samf-about-board .samf-about-headrow__text, .samf-about-committees .samf-about-headrow__text, .samf-about-committees .samf-section-title { flex: none; }
  .samf-about-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samf-about-committees { padding-block: 56px; }
  .samf-about-committees__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samf-about-news { padding-block: 56px; }
  .samf-about-board { padding-block-end: 56px; }
}
@media (max-width: 767.98px) {
  .samf-about-committees__grid { grid-template-columns: minmax(0, 1fr); }
  .samf-about-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samf-about-news__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .samf-about-header { min-block-size: 360px; padding-block: 96px 24px; }
  .samf-about-mv__card { padding: 24px; border-radius: 24px; }
  .samf-about-intro__image { border-radius: 24px; }
  .samf-about-member--large { flex-direction: column; text-align: center; }
  .samf-about-board__grid, .samf-about-committees__grid, .samf-about-news__grid { grid-template-columns: minmax(0, 1fr); }
  .samf-about-committee { padding: 24px; gap: 16px; }
  .samf-about-news__head { flex-direction: column; align-items: stretch; }
  .samf-about .samf-btn-dark { inline-size: 100%; }
}
@media (max-width: 375px) {
  .samf-about-wrap { padding-inline: 16px; }
  .samf-about-title { font-size: var(--samf-fs-h3); }
}

/* Board member / committee content views rendered outside /about (Content-BoardMember*, Content-Committee*). */
.samf-board-member { background: rgba(0, 0, 0, .5); border: 1px solid var(--samf-color-border); border-radius: 16px; padding: 24px; margin: 0; color: var(--samf-color-text); }
.samf-board-member .samf-portrait { inline-size: 150px; block-size: 150px; object-fit: cover; border-radius: 50%; border: 1px solid var(--samf-color-on-dark); background: var(--samf-color-services); display: block; margin-inline: auto; }
.samf-board-member figcaption { margin-block-start: 1.5rem; }
.samf-board-member figcaption strong { font-family: var(--samf-font-display); font-size: var(--samf-fs-body); font-weight: 600; }
.samf-board-member .samf-role { color: var(--samf-color-primary); font-size: var(--samf-fs-small); font-weight: 500; }
.samf-card { background: var(--samf-color-on-dark); border: 0; border-radius: 16px; color: var(--samf-color-page); }
.samf-card .card-title { font-family: var(--samf-font-display); color: var(--samf-color-services); font-weight: 500; }
.samf-about-mv__lead { font-weight: 300; }

/* Mobile frame 766:9890: board members and committees in two columns, committee ring above the text */
@media (max-width: 575.98px) {
  .samf-about .samf-about-board__grid, .samf-about .samf-about-committees__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .samf-about .samf-about-committee { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
  .samf-about .samf-about-committee__no { inline-size: 64px; block-size: 64px; font-size: 32px; line-height: 40px; }
}

/* ui-web-pages-1105 Figma 766:9890 / 295:7246: chairman bio is light body copy with its paragraph break, start-aligned; committee cards on mobile size to their content (the shared flex-basis 0 collapsed the column and the ring overlapped the title). */
.samf-about-member__bio { font-family: var(--samf-font-body); font-size: var(--samf-fs-body); line-height: var(--samf-lh-body); font-weight: var(--samf-fw-light); white-space: pre-line; margin-block-start: 8px; color: var(--samf-color-text); }
@media (max-width: 575.98px) {
  .samf-about .samf-about-member--large { align-items: stretch; gap: 16px; text-align: start; padding: 16px; }
  .samf-about .samf-about-member--large .samf-portrait { align-self: center; inline-size: 200px; block-size: 200px; }
  .samf-about .samf-about-committee__text { flex: none; min-block-size: 0; inline-size: 100%; }
}

/* ui-web-pages-1105: Figma's 700 (desktop) / 600 (mobile) header includes the nav; the sticky site header (125 at 1400+, 100 below) is in the flow, so pull the header up under it. */
.samf-about-header { margin-block-start: -100px; }
@media (min-width: 1400px) { .samf-about-header { margin-block-start: -125px; } }
@media (max-width: 575.98px) {
  .samf-about-header { min-block-size: 600px; padding-block: 120px 0; }
  .samf-about .samf-about-title { font-size: 2.5rem; line-height: 36px; font-weight: 500; letter-spacing: -.02em; }
  .samf-about:lang(ar) .samf-about-title { letter-spacing: 0; }
  .samf-about .samf-eyebrow { margin-block-end: 8px; }
}

/* W4: committee circle shows a photo (Figma CommiteeCard) when the editor set one; the number stays as the fallback. */
.samf-about-committee__img { object-fit: cover; padding: 0; background: var(--samf-color-services); }

/* W4: committee circle shows a photo (Figma CommiteeCard) when the editor set one; the number stays as the fallback. */
.samf-about-committee__img { object-fit: cover; padding: 0; background: var(--samf-color-services); }

/* visual-fix-1108 (G2): Figma 295:7246 / 766:9890 */
/* 1. The dark part of the page (header .. board) carries the colour-burn grit photo: bottom 55.23% of that section, 125.99% wide, flush left (Figma mirrors it in RTL).
      It is anchored to the top edge of the committees band (where the dark section ends) and painted under the content. */
.samf-about { position: relative; isolation: isolate; }
.samf-about-committees { position: relative; }
.samf-about-committees::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 100%; block-size: 1305px; 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-about-committees::before { transform: scaleX(-1); }
@media (max-width: 1024px) { .samf-about-committees::before { block-size: 1700px; } }
@media (max-width: 575.98px) { .samf-about-committees::before { block-size: 2000px; } }
/* 2. The overview keeps the paragraph break the editor typed (Figma shows two paragraphs with a blank line between). */
.samf-about-overview { white-space: pre-line; }
/* 3. Intro: two equal halves of the 1420 container (698 + 24 + 698); the text column's own 24 padding sits inside its half (Figma 398:10331: image flex 1, right-column flex 1 with px 24). */
@media (min-width: 1025px) {
  .samf-about-intro__image { flex: 0 0 calc(50% - 12px); }
  .samf-about-intro__text { flex: 0 0 calc(50% - 12px); box-sizing: border-box; }
}
/* Light theme (the default): the mission card keeps its dark fill, so its text stays white (it followed the dark page text colour and vanished). */
html[data-theme="light"] .samf-about-mv__card--mission { color: var(--samf-figma-white); }