/* =============================================================
   People search — clustered results with pill filter
   /our-people (people_search:block_our_people). Overrides the
   html_list style output via
   templates/views/views-view-list--people-search--block-our-people.html.twig
   + preprocess_views_view_list__people_search__block_our_people()
   (Phase C — src/Search/PeopleSearchPreprocess.php).

   Reuses Phase 1's shipped .np-person-card chrome (css/detail.css) for
   the cards themselves; this file adds the pill row, section chrome,
   grid layout, and the role-cluster hue cascade via data-cluster.
   ============================================================= */

.np-people-results { margin: 6px 0 24px; }

/* ---------- role-cluster pill tabs ---------- */
.np-people-tabs {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 2px solid #2c2c2b;
}
.np-people-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid #e4e0d8; background: #fff;
  color: #2c2c2b; font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.np-people-tab::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--hue, #6c675f); flex: none;
}
.np-people-tab--all::before { background: #6c675f; }
.np-people-tab-n { color: #6c675f; font-weight: 700; }
.np-people-tab:hover { border-color: #6c675f; }
.np-people-tab[aria-current="page"] {
  background: #2c2c2b; border-color: #2c2c2b; color: #fff;
}
.np-people-tab[aria-current="page"] .np-people-tab-n { color: rgba(255,255,255,.75); }
.np-people-tab[aria-current="page"]::before { background: #fff; }

/* ---------- cluster section ---------- */
.np-people-cluster { margin-bottom: 32px; scroll-margin-top: 90px; }
.np-people-cluster-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--hue, #e4e0d8);
}
.np-people-cluster-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #2c2c2b;
  letter-spacing: -.1px;
}
.np-people-cluster-n { color: #6c675f; font-weight: 600; font-size: 14px; }
.np-people-seeall {
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--hue-dk, #2c2c2b);
}
.np-people-seeall:hover { text-decoration: underline; }

.np-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* ---------- role-cluster hue axis (data-cluster) ----------
   The four current clusters + Other (residue). Tokens live in
   css/colors.css. Future clusters listed in people-search-pills-plan.md
   §10.1 (local-community, international-community) are pre-allocated
   below so adding them is a map edit + reindex, no colour pass. */
.np-people-tab[data-cluster="leadership"],  .np-people-cluster[data-cluster="leadership"]  { --hue: var(--np-role-leadership);  --hue-dk: var(--np-role-leadership-dk); }
.np-people-tab[data-cluster="kaumatua"],    .np-people-cluster[data-cluster="kaumatua"]    { --hue: var(--np-role-kaumatua);    --hue-dk: var(--np-role-kaumatua-dk); }
.np-people-tab[data-cluster="researchers"], .np-people-cluster[data-cluster="researchers"] { --hue: var(--np-role-researchers); --hue-dk: var(--np-role-researchers-dk); }
.np-people-tab[data-cluster="support"],     .np-people-cluster[data-cluster="support"]     { --hue: var(--np-role-support);     --hue-dk: var(--np-role-support-dk); }
.np-people-tab[data-cluster="other"],       .np-people-cluster[data-cluster="other"]       { --hue: var(--np-role-other);       --hue-dk: var(--np-role-other-dk); }
.np-people-tab[data-cluster="local-community"],         .np-people-cluster[data-cluster="local-community"]         { --hue: var(--np-role-local-community);         --hue-dk: var(--np-role-local-community-dk); }
.np-people-tab[data-cluster="international-community"], .np-people-cluster[data-cluster="international-community"] { --hue: var(--np-role-international-community); --hue-dk: var(--np-role-international-community-dk); }