/* ==========================================================================
   People pages — About, Leadership, Get Involved (Altai design system).
   Loaded on every page: every selector is scoped to .page-about /
   .page-leadership / .page-involve.
   ========================================================================== */

/* About — story / structure without a photo: single readable column */
.page-about .story-grid--solo,
.page-about .intro-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

/* About — mission / vision / values cards: values as a compact checklist */
.page-about .about-mvv .service-card .checklist { margin: 4px 0 0; gap: 10px; }
.page-about .about-mvv .service-card .checklist li { color: var(--text); }

/* About — leadership preview: five portraits in one row on desktop */
.page-about .about-team .team-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Governance cards: multi-paragraph text inside .value */
.page-about .about-gov .value .prose { grid-column: 2; color: var(--muted); font-size: .94rem; }
.page-about .about-gov .value .prose p { margin: 0; }
.page-about .about-gov .value .prose p + p { margin-top: .8em; }
.page-about .about-gov .value-n { grid-row: span 2; align-self: start; }

/* Leadership — card contact links + biography contact row */
.page-leadership .member-links { display: flex; gap: 8px; margin: 0 0 14px; }
.page-leadership .member-links a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grey); color: var(--navy); transition: background .2s, color .2s; }
.page-leadership .member-links a:hover { background: var(--grad); color: var(--ink); }
.page-leadership .member-links .ico { width: 17px; height: 17px; }
.page-leadership .dark .member-links a { background: rgba(255, 255, 255, .08); color: #fff; }
.page-leadership .dark .member-links a:hover { background: var(--grad); color: var(--ink); }
.page-leadership .member-photo-btn { display: block; padding: 0; border: 0; width: 100%; cursor: pointer; }
.page-leadership .member-photo-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: var(--radius); }

.page-leadership .bio-contact { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; }
.page-leadership .bio-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); word-break: break-word; }
.page-leadership .bio-contact a:hover { color: var(--blue-2); }
.page-leadership .bio-contact .ico { width: 18px; height: 18px; color: var(--amber-2); flex: none; }

/* Get Involved — photo band with label */
.page-get-involved .involve-photo .media { aspect-ratio: 21 / 8; }
@media (max-width: 700px) {
  .page-get-involved .involve-photo .media { aspect-ratio: 4 / 3; }
}
.page-get-involved .involve-photo--flush { padding-top: 0; }
.page-get-involved .involve-photo { padding-bottom: 0; }

/* Phones: two portraits per row instead of one very tall column */
@media (max-width: 600px) {
  .page-about .about-team .team-grid, .page-leadership .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .page-about .member h3, .page-leadership .member h3 { font-size: .95rem; }
  .page-leadership .member > p { font-size: .84rem; }
  .page-about .member-role, .page-leadership .member-role { font-size: .64rem; letter-spacing: .1em; }
}