/* The staff directory page.

   A directory, not a gallery: one person per line, circular portrait, role
   and office in aligned columns, contact on the right. Fifty-seven people
   read as a list you scan down, where the same people as photo cards read
   as the public website's team page.

   Controls mirror the announcements page (search on its own row, filter
   chips beneath) so the two pages are learned once. */

.ppl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}
/* Search takes the row. A search box plus ten office chips will not share
   a line at any width we care about — the announcements page learned this. */
.ppl-search-box { flex: 1 1 100%; }

.ppl-filters { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* Label beside the chips, not among them: the chips get their own flex box
   so they wrap against each other's left edge instead of against the row's. */
.ppl-filter-row { display: flex; align-items: flex-start; gap: 8px; }
.ppl-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  /* Fixed so the office and team labels start on the same vertical line,
     and nudged down to sit level with the first row of chips. */
  flex: 0 0 76px;
  padding-top: 9px;
}
.ppl-chip-set {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppl-chip {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.ppl-chip:hover { border-color: var(--sir-blue-3); color: var(--sir-blue); }
.ppl-chip.is-active {
  background: var(--sir-blue);
  border-color: var(--sir-blue);
  color: var(--white);
}
.ppl-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The headcount rides inside the chip; it dims rather than shouts. */
.ppl-chip-count { font-weight: 400; opacity: 0.62; margin-left: 6px; font-variant-numeric: tabular-nums; }

.ppl-result-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Results */
.ppl-group { display: flex; flex-direction: column; gap: 2px; }
.ppl-group + .ppl-group { margin-top: 30px; }
.ppl-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sir-blue-5);
}
.ppl-group-name {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--sir-blue);
}
.ppl-group-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* One hairline between neighbours rather than a box around each: a list
   reads as a list, and 57 outlined boxes read as 57 objects. */
.ppl-list { list-style: none; margin: 0; padding: 0; }
.ppl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 14px 11px 10px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.ppl-row:last-child { border-bottom: 0; }
.ppl-row:hover { background: var(--sir-blue-tint); }

.ppl-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sir-blue-tint);
  box-shadow: inset 0 0 0 1px var(--sir-blue-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppl-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The files are already the square head-and-shoulders window, rendered
     at 1x, 2x and 3x by scripts/fetch-headshots.py, so this is a straight
     fit. Letting the browser crop and shrink a 450x600 portrait into 44px
     is what made the first version blurry. */
  object-fit: cover;
}
.ppl-monogram {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--sir-blue-3);
  user-select: none;
}

/* Name, role and office in fr columns. Every row gets the same track set,
   so the roles line up down the page instead of hanging off each name. */
.ppl-who {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  /* The name column is capped rather than proportional. Shared out as
     fractions it grew to 270px on a wide monitor and left "Paul Arthur"
     stranded a long way from his job title. */
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr) minmax(0, 140px);
  align-items: center;
  gap: 2px 24px;
}
.ppl-who.has-office {
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr) minmax(0, 148px) minmax(0, 140px);
}

.ppl-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wraps rather than truncates. Between the stacking breakpoint and about
   1200px the four-column row is tight enough to cut "Executive Assistant,
   Tyson Clarke Team" in half, and the role is the one thing someone came
   to this line to read. The row grows by a line instead. */
.ppl-title {
  font-size: 13px;
  line-height: 1.32;
  color: var(--text);
}
/* Right-aligned against the contact buttons, and tabular so the digits
   stack in a column rather than wandering line to line. */
.ppl-phone {
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Rendered only in the flat view, where no office heading sits above.
   Wraps for the same reason the role does — someone filed in two offices
   carries both names here. */
.ppl-office {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Fixed width, right aligned: someone with no mobile on file has two
   buttons rather than three, and a shrinking column would pull that whole
   row's columns out of line with its neighbours. */
.ppl-contact {
  flex: 0 0 auto;
  width: 108px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
/* Holds the place of a button this person does not have. */
.ppl-contact-gap { width: 32px; height: 32px; flex: 0 0 auto; }
.ppl-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--sir-blue-3);
  transition: background 0.12s ease, color 0.12s ease;
}
.ppl-row:hover .ppl-contact a { color: var(--sir-blue); }
.ppl-contact a:hover { background: var(--white); color: var(--sir-blue-ink); box-shadow: 0 1px 3px rgba(0, 35, 73, 0.14); }
.ppl-contact a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Office mailboxes — reach an office rather than a person. */
.ppl-mailbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
}
.ppl-mailbox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  color: var(--text);
}
a.ppl-mailbox:hover { border-color: var(--sir-blue-4); color: var(--text); }
.ppl-mailbox-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--sir-blue-tint);
  color: var(--sir-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppl-mailbox-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppl-mailbox-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ppl-mailbox-sub {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No address on file yet. Visible, reachable by keyboard, not a dead link. */
.ppl-mailbox.is-unlinked { opacity: 0.72; }

/* The flat view carries a fourth column, so it runs out of room first.
   Under about 1200px its role column is down to ninety-odd pixels, which
   is narrower than the words going in it. Stack that variant early and
   leave the grouped three-column view alone until it needs the same. */
@media (max-width: 1200px) {
  .ppl-who.has-office { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .ppl-who.has-office .ppl-phone { text-align: left; }
  .ppl-who.has-office .ppl-office { color: var(--sir-blue-3); }
}

/* Below this the columns have no room to be columns, so the role and
   office stack under the name and the row grows a second line. */
@media (max-width: 820px) {
  .ppl-who,
  .ppl-who.has-office { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .ppl-title, .ppl-office { font-size: 12px; }
  .ppl-office { color: var(--sir-blue-3); }
  /* Stacked, a right-aligned number floats away from its own row. */
  .ppl-phone { text-align: left; font-size: 12px; }
  /* Narrow enough that a 76px gutter costs a chip per line — the label
     takes its own line instead. */
  .ppl-filter-row { flex-wrap: wrap; }
  .ppl-filter-label { flex: 1 1 100%; padding-top: 0; margin-bottom: -2px; }
  .ppl-group-name { font-size: 18px; }
}

@media (max-width: 520px) {
  .ppl-row { gap: 12px; padding: 10px 4px; }
  .ppl-avatar { width: 38px; height: 38px; }
  .ppl-contact { width: 76px; gap: 2px; }
  .ppl-contact a, .ppl-contact-gap { width: 28px; height: 28px; }
  .ppl-mailbox-grid { grid-template-columns: minmax(0, 1fr); }
}