/* "How SAMF operates" (Figma 398:10257, section of the About page). Own file: the page CSS (samf-about.css) belongs to the page junior.
   Measures from the Figma node: section padding 80, gap 40; chart 1024 wide with 20 side padding; person max 235, photo 95, gap 8;
   name 16/20 tracking -0.32; role 12/16; connector lines 35 high, 1px light green; boxes 1px light green, radius 12, padding 16. */
.samf-operates { display: flex; flex-direction: column; align-items: center; gap: var(--samf-space-10); padding-block: var(--samf-space-20); color: var(--samf-color-text); }
.samf-operates__title { width: 100%; max-width: 1420px; margin: 0; padding-inline: var(--samf-space-4); text-align: center; font-family: var(--samf-font-display); font-size: var(--samf-fs-h3); line-height: 50px; font-weight: 300; letter-spacing: -2.4px; text-transform: uppercase; color: var(--samf-color-text); }
[dir="rtl"] .samf-operates__title { letter-spacing: 0; text-transform: none; }
.samf-operates__accent { font-weight: 600; color: var(--samf-color-primary); }
.samf-operates__chart { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 1024px; padding-inline: 20px; }
.samf-operates__person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--samf-space-2); width: 100%; max-width: 235px; text-align: center; }
.samf-operates__photo { inline-size: 95px; block-size: 95px; border-radius: 50%; object-fit: cover; flex: none; }
.samf-operates__photo--placeholder { display: block; background: #D9D9D9; object-fit: cover; }
.samf-operates__name { margin: 0; font-family: var(--samf-font-display); font-size: 1rem; line-height: 20px; font-weight: 400; letter-spacing: -0.32px; color: var(--samf-color-text); }
.samf-operates__role { margin: 0; font-family: var(--samf-font-body, var(--samf-font-display)); font-size: .75rem; line-height: 16px; font-weight: 400; color: var(--samf-color-primary); }
[dir="rtl"] .samf-operates__name { letter-spacing: 0; }
.samf-operates__stem { display: block; inline-size: 1px; block-size: 35px; background: var(--samf-color-primary); }
.samf-operates__tier2 { display: flex; flex-direction: column; align-items: center; inline-size: 100%; padding-inline: 119px; }
.samf-operates__connectors { display: flex; flex-direction: column; align-items: center; inline-size: 100%; padding-inline: 117px; }
.samf-operates__bar { display: block; inline-size: 100%; block-size: 1px; background: var(--samf-color-primary); }
.samf-operates__drops { display: flex; justify-content: space-between; inline-size: 100%; }
.samf-operates__row { display: flex; justify-content: space-between; align-items: flex-start; inline-size: 100%; }
.samf-operates__row .samf-operates__person { flex: 1 1 0; min-inline-size: 0; }
.samf-operates__boxes { display: flex; align-items: flex-start; gap: 20px; inline-size: 100%; }
.samf-operates__group { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-inline-size: 0; }
.samf-operates__box { display: flex; align-items: center; gap: 20px; inline-size: 100%; padding-block: var(--samf-space-4); border: 1px solid var(--samf-color-primary); border-radius: 12px; }
.samf-operates__box .samf-operates__person { flex: 1 1 0; min-inline-size: 0; }
@media (max-width: 991.98px) {
  .samf-operates { padding-block: var(--samf-space-12); }
  .samf-operates__tier2 { padding-inline: 0; }
  .samf-operates__connectors { padding-inline: 25%; }
  .samf-operates__boxes { flex-direction: column; align-items: stretch; }
  .samf-operates__box { flex-wrap: wrap; justify-content: center; }
  .samf-operates__box .samf-operates__person { flex: 1 1 140px; }
}

/* Required tablet and phone breakpoints (A11yRulesTests); the rules above are already fluid at these widths. */
@media (max-width: 1024px) { }
@media (max-width: 375px) { }