/* "Get Involved: Marshals & Volunteers" band (Figma 543:8058): full-width photo, glass card on the start side. */
.samf-involved { background: var(--samf-color-page) url("../images/get-involved-marshals.jpg") center / cover no-repeat; padding-block: 64px; color: var(--samf-color-text); }
.samf-involved__card { max-inline-size: 686px; padding: 40px 32px; border-radius: 32px; background: linear-gradient(180deg, rgba(17, 31, 29, .35), rgba(17, 31, 29, .8)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: grid; gap: 16px; justify-items: start; }
.samf-involved__kicker { margin: 0; font-size: 32px; line-height: 40px; font-weight: 300; }
.samf-involved__title { margin: 0; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; font-weight: 500; text-transform: uppercase; }
:lang(ar) .samf-involved__title { text-transform: none; }
.samf-involved__text { margin: 0; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; }
.samf-involved a:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
@media (max-width: 575px) { .samf-involved { padding-block: 32px; } .samf-involved__card { padding: 24px 16px; } }
@media (max-width: 1024px) { .samf-involved { padding-block: 48px; } .samf-involved__card { max-inline-size: 100%; padding: 32px 24px; } .samf-involved__kicker { font-size: 28px; line-height: 36px; } }
@media (max-width: 375px) { .samf-involved { padding-block: 24px; } .samf-involved__card { padding: 20px 12px; border-radius: 24px; } .samf-involved__kicker { font-size: 24px; line-height: 32px; } .samf-involved__title { font-size: 32px; } }

/* visual-fix-1108 (G7), measured against Figma Volunteers (1351:14086 desktop, 1351:14088 mobile).
   1. get-involved-marshals.jpg has 92 px black letterbox bars top and bottom (rows 92..748 of 840): the old `cover` background showed them as black strips.
      The photo moves to ::before, sized like Figma (box 100.97% x 138.18%, top -19.09%) so the bars fall outside the clipped band; ::after = Figma rgba(0,0,0,.2) scrim.
   2. Card: 698 (half of the 1420 container minus the 24 gap), glass rgba(0,0,0,.15) blur 20, radius 16, padding 32, gap 40; kicker 32/36; "Learn more" is a light-green
      button (p15/20 r8, ink 14 semibold + chevron): the bare `.btn` had no background (white text on the photo).
   3. Mobile (375): band 670 tall, p40/20, card p24/20 r16 gap 24, kicker 24/28, title 32/36, button p8/12 r6; photo in the lower part on #aa7e4a. */
.samf-involved { position: relative; isolation: isolate; overflow: hidden; background: var(--samf-figma-black); padding-block: 80px; --_chev: 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"); }
.samf-involved::before { content: ""; position: absolute; z-index: -2; inset-block-start: -19.09%; inset-inline-start: -0.48%; inline-size: 100.97%; block-size: 138.18%; background: url("../images/get-involved-marshals.jpg") center / cover no-repeat; }
:lang(ar) .samf-involved::before, .samf-involved[dir="rtl"]::before { transform: scaleX(-1); }
.samf-involved::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .2); }
.samf-involved > .container { max-inline-size: 1500px; padding-inline: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.samf-involved__card { max-inline-size: none; padding: 32px; border-radius: 16px; background: rgba(0, 0, 0, .15); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); gap: 40px; overflow: hidden; }
.samf-involved__card > * { margin: 0; }
.samf-involved__kicker { font-family: var(--samf-font-display); font-size: 32px; line-height: 36px; margin-block-end: -24px; }
.samf-involved__title { font-family: var(--samf-font-display); font-size: 64px; line-height: 68px; letter-spacing: -1.28px; margin-block-end: -24px; }
:lang(ar) .samf-involved__title, .samf-involved[dir="rtl"] .samf-involved__title { letter-spacing: 0; line-height: 1.2; }
.samf-involved__text { font-family: var(--samf-font-body); }
.samf-involved .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-block-size: 50px; padding: 15px 20px; border: 0; border-radius: 8px; background: var(--samf-figma-light-green); color: var(--samf-color-ink); font-family: var(--samf-font-body); font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; text-decoration: none; }
.samf-involved .btn::after { content: ""; inline-size: 12px; block-size: 12px; flex: none; background: currentColor; -webkit-mask: var(--_chev) center / contain no-repeat; mask: var(--_chev) center / contain no-repeat; }
[dir="rtl"].samf-involved .btn::after { transform: scaleX(-1); }
.samf-involved .btn:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-ink); }
@media (max-width: 1024px) {
  .samf-involved { padding-block: 64px; }
  .samf-involved > .container { grid-template-columns: minmax(0, 1fr); }
  .samf-involved__card { max-inline-size: 600px; padding: 32px 24px; }
  .samf-involved__kicker { font-size: 28px; line-height: 32px; }
  .samf-involved__title { font-size: clamp(36px, 7vw, 56px); line-height: 1.1; }
}
@media (max-width: 575px) {
  .samf-involved { min-block-size: 670px; padding-block: 40px; background: #aa7e4a; }
  .samf-involved::before { inset-block: auto -42px; inset-inline: 0; inline-size: auto; block-size: 384px; background-position: 80% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 10.95%, #000 28%, #000 89.05%, transparent 89.05%); mask-image: linear-gradient(to bottom, transparent 10.95%, #000 28%, #000 89.05%, transparent 89.05%); }
  .samf-involved > .container { padding-inline: 20px; }
  .samf-involved__card { padding: 24px 20px; gap: 24px; max-inline-size: 600px; }
  .samf-involved__kicker { font-size: 24px; line-height: 28px; margin-block-end: -13px; }
  .samf-involved__title { font-size: 32px; line-height: 36px; letter-spacing: 0; margin-block-end: -13px; }
  .samf-involved .btn { min-block-size: 32px; padding: 8px 12px; border-radius: 6px; font-size: var(--samf-fs-small); line-height: 16px; font-weight: 500; }
}