/* ==========================================================================
   people_grid — Board of Directors / Leadership (board-members CPT)
   Staggered card grid + optional office/role/discipline filter bar + load-more.
   ========================================================================== */

.people-grid {
  padding-block: var(--section-y) var( --sp-5xl);
}

/* Section sits on the 12-col grid like the Projects toolbar: every row spans the
   full width, and vertical rhythm stays on the children's margins (row-gap zeroed
   so the grid doesn't double the spacing). */
.people-grid__inner {
  row-gap: 0;
}
.people-grid__inner > * {
  grid-column: 1 / -1;
}

.people-grid__header {
  position: relative; /* anchor the top-rule divider */
  padding-top: var(--sp-lg);
  margin-block-end: var(--sp-2xl);
}
/* Top hairline divider above the header (mirrors expertise-grid). currentColor +
   opacity so it reads on both light (#team → steel) and dark (default → alabaster)
   bands, matching the shared .section-divider recipe. */
.people-grid__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
}

.people-grid--leadership .people-grid__header::before {
  display: none;
}

.people-grid__eyebrow {
  color: var(--color-white);
  margin: 0 0 0.75rem;
}

#team .people-grid__eyebrow {
  color: var(--color-steel);
}

.people-grid__heading {
  margin: 0;
  /* max-width: 18ch; */
  font-size: var(--text-h5);
  font-weight: var(--fw-regular);
}

/* --------------------------------------------------------------------------
   FILTER BAR — mirrors the Projects toolbar. The shared label/select/chip/clear
   visuals come from the global .pf-* rules in _projects.css; only People's own
   layout (selects row, status row, closing divider) lives here.
   -------------------------------------------------------------------------- */
.people-filter {
  margin-block-end: clamp(2rem, 4vw, 3rem);
  /* Lift the whole bar into its own stacking context above the card grid below, so
     an open dropdown (.pf-menu) overlays the list instead of being painted over by
     the person cards. Stays under the fixed header (z-index 50). */
  position: relative;
  z-index: 20;
}
.people-filter__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.people-filter .pf-chip {
  background-color: var(--color-alabaster);
}
/* Status row: "Showing N" + active chips + clear, closed by the design divider. */
.people-filter__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-top: clamp(2rem, 6vw, 6rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(30 23 17 / 0.12);
}
/* .pf-clear sets display:inline-flex (beats the UA [hidden] rule) — restore it. */
.people-filter .pf-clear[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   GRID — 3-column editorial scatter: cards sit on a 3×N grid with holes,
   repeating every 10 cards as rows of [c1 c2] · [c2 c3] · [c1 c2 c3] · [c1 c2 c3].
   Placement (--col/--row) is emitted per cell by PHP; consumed at desktop only.
   -------------------------------------------------------------------------- */
.people-grid__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-xl) var(--grid-gap);
}
.people-grid__cell {
  min-width: 0;
}
.people-grid__cell.is-paged {
  display: none;
}

@media (min-width: 861px) {
  /* --col 1/2/3 → 12-col start lines 1/5/9, each card spanning 4 columns. */
  .people-grid__cell {
    grid-column: calc((var(--col, 1) - 1) * 4 + 1) / span 4;
    grid-row: var(--row, auto);
  }
  /* While filtering, drop the scatter and pack matches 3-across. */
  .people-grid__grid.is-flow .people-grid__cell {
    grid-column: span 4;
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   PERSON CARD — portrait photo with an Alabaster hover overlay that reveals
   the bio; name/role + LinkedIn share a footer beneath the photo.
   -------------------------------------------------------------------------- */
.card-person {
  display: flex;
  flex-direction: column;
  color: var(--color-alabaster);
}
.card-person__media {
  position: relative;
  aspect-ratio: 493 / 528;
  overflow: clip;
  /* background: var(--color-skyline); */
}
/* Constant 10% black tint over the photo. */
.card-person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.card-person__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-person:hover .card-person__img {
  transform: scale(1.04);
}
.card-person__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-skyline);
}

/* Top-left dot motif → rotates 45° on hover (matches value-cards). */
.card-person__mark {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  --motif-size: var(--text-body-lg);
  color: var(--color-alabaster);
  opacity: 0.85;
  transition: transform 0.4s ease;
}
.card-person:hover .card-person__mark {
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .card-person__mark {
    transition: none;
  }
}

/* Alabaster overlay + bio, revealed on hover. */
.card-person__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-md);
  background: var(--color-alabaster);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card-person:hover .card-person__overlay {
  opacity: 0.85;
}
.card-person__bio {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-main);
  line-height: var(--lh-body);
  color: var(--color-steel);
}

/* Footer — name/role left, LinkedIn right. */
.card-person__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: var(--sp-md);
}

#team .card-person__body, #team .card-person__bio, #team .card-person__linkedin {
  color: var(--color-steel);
}

.card-person__linkedin svg.ttw-ico {
  width: var(--text-h5);
  height: var(--text-h5);
}

.card-person__meta {
  min-width: 0;
}
.card-person__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-h6);
  line-height: var(--lh-snug);
  margin: 0 0 0.2rem;
}
.card-person__role {
  font-family: var(--font-body);
  font-size: var(--text-body-main);
  opacity: 0.6;
  margin: 0;
}

/* LinkedIn — the badge icon carries its own ring, so no wrapper box. 50% at rest, 100% on hover. */
.card-person__linkedin {
  flex: none;
  display: inline-flex;
  color: var(--color-alabaster);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.card-person__linkedin:hover,
.card-person__linkedin:focus-visible {
  opacity: 1;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   LOAD MORE
   -------------------------------------------------------------------------- */
.people-grid__loadmore {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
  display: none; /* hidden by default, shown by JS if more pages exist */
}
.people-grid__loadmore .pf-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-steel);
}
.people-grid__loadmore .pf-loadmore:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .people-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .people-grid__cell:nth-child(2n) {
    margin-block-start: clamp(1.5rem, 5vw, 3rem);
  }
}
@media (max-width: 520px) {
  .people-grid__grid {
    grid-template-columns: 1fr;
  }
  .people-grid__cell {
    margin-block-start: 0 !important;
  }
}