/* About Leadership — four-member layout (handoff AriseVida-Mike-Fagan-Leadership,
   Oct 2026). Linked from about.html only, after styles.min.css and the phone
   leadership stylesheet. Scoped to the tablet/laptop/desktop grid in
   #leadership and to Mike Fagan's portrait framing; nothing here is global.

   Grid (styles.css .al-grid): 3 columns, 2 at <=980px, 1 at <=720px. With a
   fourth member that would leave a lone card under a row of three above
   980px, so the grid becomes a balanced two-by-two from 768px (the phone
   branch serves below 768px) and four equal columns from 1280px. */

@media (min-width: 768px) {
  #leadership .al-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Let the card body and the short bio absorb spare height so the
     "View profile" controls stay aligned across a row when one title
     wraps to more lines than its neighbours'. */
  #leadership .al-grid > .al-card > .al-body {
    flex: 1 1 auto;
  }
  #leadership .al-grid > .al-card > .al-body > .al-bio {
    flex: 1 1 auto;
  }
}

@media (min-width: 1280px) {
  #leadership .al-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mike's photograph is a 1167x1347 portrait whose hair sits close to the
   top edge; the square cover crops (card, phone portrait, both profile
   dialogs) anchor it to the top instead of the centre so the face and the
   top of the hair stay inside the frame. The original file is untouched.
   The phone dialog has no per-person attribute (leadership-mobile.js copies
   the card image's currentSrc into .avcl-dialog-portrait), so that hook is
   keyed to the asset filename prefix, which matches the relative and the
   absolute URL alike; if the asset is ever renamed, update this selector. */
#leadership img[data-leader-photo="mike"],
#leaderModal img[data-leader-photo="mike"],
#avcl-dialog .avcl-dialog-portrait[src*="about-leadership-04-mike-fagan"] {
  object-position: 50% 0%;
}