/* =============================================================
   Universal search — clustered coloured-tile results
   /search-research (global_search). Overrides the html_list style via
   templates/views/views-view-list--global-search.html.twig +
   preprocess_views_view_list__global_search(). Tiles reuse .np-teaser
   (css/project-teaser.css); this file adds the content-type colour axis
   (data-ct → --hue) + the cluster / tab layout.
   ============================================================= */

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

/* ---------- type tabs ---------- */
.np-search-tabs {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 2px solid #2c2c2b;
}
.np-search-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-search-tab::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--hue, #6c675f); flex: none;
}
.np-search-tab--all::before { background: #6c675f; }
.np-search-tab-n { color: #6c675f; font-weight: 700; }
.np-search-tab:hover { border-color: #6c675f; }
.np-search-tab[aria-current="page"] {
  background: #2c2c2b; border-color: #2c2c2b; color: #fff;
}
.np-search-tab[aria-current="page"] .np-search-tab-n { color: rgba(255,255,255,.75); }
.np-search-tab[aria-current="page"]::before { background: #fff; }

/* ---------- cluster section ---------- */
.np-search-cluster { margin-bottom: 32px; scroll-margin-top: 90px; }
.np-search-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-search-cluster-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #2c2c2b;
  letter-spacing: -.1px;
}
.np-search-cluster-n { color: #6c675f; font-weight: 600; font-size: 14px; }
.np-search-seeall {
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--hue-dk, #2c2c2b);
}
.np-search-seeall:hover { text-decoration: underline; }

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

/* ---------- content-type hue axis (data-ct) ---------- */
.np-teaser[data-ct="person"],               .np-search-tab[data-ct="person"],               .np-search-cluster[data-ct="person"]               { --hue: var(--np-ct-person);               --hue-dk: var(--np-ct-person-dk); }
.np-teaser[data-ct="project"],              .np-search-tab[data-ct="project"],              .np-search-cluster[data-ct="project"]              { --hue: var(--np-ct-project);              --hue-dk: var(--np-ct-project-dk); }
.np-teaser[data-ct="featured_publication"], .np-search-tab[data-ct="featured_publication"], .np-search-cluster[data-ct="featured_publication"] { --hue: var(--np-ct-featured_publication); --hue-dk: var(--np-ct-featured_publication-dk); }
.np-teaser[data-ct="npm_grant"],            .np-search-tab[data-ct="npm_grant"],            .np-search-cluster[data-ct="npm_grant"]            { --hue: var(--np-ct-npm_grant);            --hue-dk: var(--np-ct-npm_grant-dk); }
.np-teaser[data-ct="embedded_video"],       .np-search-tab[data-ct="embedded_video"],       .np-search-cluster[data-ct="embedded_video"]       { --hue: var(--np-ct-embedded_video);       --hue-dk: var(--np-ct-embedded_video-dk); }
.np-teaser[data-ct="arotahi_paper"],        .np-search-tab[data-ct="arotahi_paper"],        .np-search-cluster[data-ct="arotahi_paper"]        { --hue: var(--np-ct-arotahi_paper);        --hue-dk: var(--np-ct-arotahi_paper-dk); }
.np-teaser[data-ct="newsletter"],           .np-search-tab[data-ct="newsletter"],           .np-search-cluster[data-ct="newsletter"]           { --hue: var(--np-ct-newsletter);           --hue-dk: var(--np-ct-newsletter-dk); }
.np-teaser[data-ct="e_panui"],              .np-search-tab[data-ct="e_panui"],              .np-search-cluster[data-ct="e_panui"]              { --hue: var(--np-ct-e_panui);              --hue-dk: var(--np-ct-e_panui-dk); }
.np-teaser[data-ct="page"],                 .np-search-tab[data-ct="page"],                 .np-search-cluster[data-ct="page"]                 { --hue: var(--np-ct-page);                 --hue-dk: var(--np-ct-page-dk); }
/* Article sub-clusters (M6) — News/Events/Our-Stories under one warm-terracotta family
   from css/colors.css; Archive uses a neutral grey to signal "older/less prominent". */
.np-teaser[data-ct="article-news"],         .np-search-tab[data-ct="article-news"],         .np-search-cluster[data-ct="article-news"]         { --hue: var(--np-ct-article-news);         --hue-dk: var(--np-ct-article-news-dk); }
.np-teaser[data-ct="article-events"],       .np-search-tab[data-ct="article-events"],       .np-search-cluster[data-ct="article-events"]       { --hue: var(--np-ct-article-events);       --hue-dk: var(--np-ct-article-events-dk); }
.np-teaser[data-ct="article-our-stories"],  .np-search-tab[data-ct="article-our-stories"],  .np-search-cluster[data-ct="article-our-stories"]  { --hue: var(--np-ct-article-our-stories);  --hue-dk: var(--np-ct-article-our-stories-dk); }
.np-teaser[data-ct="article-archive"],      .np-search-tab[data-ct="article-archive"],      .np-search-cluster[data-ct="article-archive"]      { --hue: #8a857c;                           --hue-dk: #605c56; }

/* apply the hue to the reused teaser chrome (search tiles carry data-ct) */
.np-teaser[data-ct] .np-teaser-strip { background: var(--hue); }
.np-teaser[data-ct] .np-teaser-badge { background: var(--hue); }
.np-teaser[data-ct] .np-teaser-cta   { color: var(--hue-dk); }

/* Meta line on search-cluster tiles — matches .np-teaser--article
   .np-teaser-meta from css/article-teaser.css but scoped here because
   the search-tile template doesn't carry the .np-teaser--article class. */
.np-search-cluster .np-teaser-meta {
  font-size: .875rem;
  color: #6c6a63;
  margin: .25rem 0 .5rem;
}