/* Section component: PEOPLE GRID (people in groups). First built for Leadership & Staff
   (WO-14); shared, so any page with a team/staff/board list can use it.
   One group = one self-contained <section class="people" data-section="people-…">:
     .section-head.people__head  a hairline, the group's word eyebrow + staging's member
                                 count on the left, the group's H2 on the right (≥1024px)
     ul.people__grid             portrait cards: li.person > .person__photo + .person__body
                                 (name H3, role, optional contact links)
       .people__grid--feature    the top group: taller 4:5 portraits, larger names
     ul.people__list             compact rows (small round photo + name + role) for long
                                 staff lists
   Photos: byte copies from staging; alt="" because the name is the adjacent H3 (no
   double announcement). Crop: aspect-ratio + object-fit: cover; the focal point is
   object-position 50% 30% (faces sit in the upper third of these portraits), overridable
   per photo with style="--focus: X% Y%".
   No photo: a dark tile with the person's initials (aria-hidden).
   Never a stock or generated face.
   Cards are not links, so there's no hover state. Motion: the shared data-reveal fade-up
   with a short stagger (--i); reduced motion shows everything at once (base.css).
   Tokens only; no new colours. */

/* Symmetric padding: 64–128px between groups; the first group after the sub-nav gets the
   same top space as other sub-pages' first section */
.people { padding-block: clamp(32px, 22px + 2.6vw, 64px); }
.subnav + .people { padding-top: clamp(48px, 36px + 3vw, 88px); }

/* ---- Group head --------------------------------------------------------- */
.people__head { margin-bottom: clamp(32px, 22px + 2.6vw, 64px); }
.people__meta { display: grid; gap: 10px; justify-items: start; }
.people__count {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1.33;
  letter-spacing: var(--tr-eyebrow); color: var(--color-text-2);
}
.people__head .h2 { max-width: 14em; }
.people__lead { max-width: var(--measure-lead); color: var(--color-text-2); }

@media (min-width: 1024px) {
  .people__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .people__head > .rule { grid-column: 1 / -1; }
  .people__meta { grid-column: 1 / span 4; padding-top: 0.6em; }
  .people__head > .h2, .people__head > .people__lead { grid-column: 5 / span 8; }
}

/* ---- Portrait cards ----------------------------------------------------- */
.people__grid {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 26px + 2.6vw, 64px) var(--grid-gap);
}
.person { display: grid; align-content: start; gap: 18px; min-width: 0; }
.person__body { display: grid; align-content: start; gap: 6px; min-width: 0; }

.person__photo {
  position: relative; margin: 0;
  aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--color-surface-3);
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 30%);
}
/* Staff element only: one black & white treatment so differing photo quality reads as one set */
.people--staff .person__photo img { filter: grayscale(1) contrast(1.05); }
.person__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-title);
  text-wrap: balance;
}
.person__role {
  max-width: 34ch;
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-2);
  text-wrap: pretty;
}
.person__contact { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; justify-items: start; }
.person__contact a {
  display: inline-block; padding-block: 3px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.01em;
  color: var(--color-link); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.person__contact a:hover { text-decoration-color: currentColor; }

/* The top group: taller portraits, larger names */
.people__grid--feature .person__photo { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.people__grid--feature .person__name { font-size: var(--fs-h3-list); line-height: var(--lh-h3-list); letter-spacing: -0.02em; }

/* No photo on staging: the initials on a dark tile (decorative; the name is the H3) */
.person__photo--initials { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--color-border-on-dark); }
.person__initials {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 22px + 2.6vw, 60px); line-height: 1; letter-spacing: 0.02em;
  color: var(--color-on-dark-muted);
}

/* "First 3 large, rest 4 across" (Top row option): the rest sit in one row of four, same card */
.people__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.people__grid + .people__grid { margin-top: clamp(36px, 26px + 2.6vw, 64px); }

@media (max-width: 1023px) {
  .people__grid, .people__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .people__grid, .people__grid--four { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Compact rows (long staff lists) ------------------------------------ */
.people__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap);
}
.person--row {
  grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px;
  padding-block: 18px; border-top: 1px solid var(--color-border);
}
.person--row .person__body { gap: 2px; }
.person--row .person__photo { width: 64px; border-radius: 50%; }
.person--row .person__name { font-size: var(--fs-menu); line-height: var(--lh-menu); }
.person--row .person__role { font-size: 14px; line-height: 1.43; }
.person--row .person__contact { margin: 0; }
.person--row .person__initials { font-size: 20px; letter-spacing: 0.04em; }

@media (max-width: 1023px) {
  .people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .people__list { grid-template-columns: minmax(0, 1fr); }
}

/* Ministry teams reuse the Leadership four-card row; phones use one full-width card. */
@media (max-width: 599px) {
  .people__grid--team { grid-template-columns: minmax(0, 1fr); }
}