/* =============================================================
   Publications search — clustered results with pill + sub-pill filter
   /publications/landing-list (publication_search:block_all). Overrides the
   html_list style output via
   templates/views/views-view-list--publication-search--block-all.html.twig
   + templates/views/views-view--publication-search--block-all.html.twig
   + preprocess_views_view*__publication_search__block_all()
   (Phase C/D — src/Search/PublicationSearchPreprocess.php).

   Sibling of people-search.css. Reuses the shipped per-bundle card chrome
   (publication-listing.css / video-listing.css / …) for the cards themselves;
   this file owns the np-pubsearch-* chrome: the pill row, the contextual
   sub-pill row, the section chrome, the grid, the A/B toggle, and the
   publication-cluster hue cascade via data-cluster (tokens in colors.css).
   ============================================================= */

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

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

/* ---------- cluster sub-pill tabs (contextual — shown under the active pill) --
   Smaller, lower-emphasis than the top pills; tinted by the active cluster's
   hue (the row carries --hue from the active .np-pubsearch-cluster context). */
.np-pubsearch-subtabs {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 0 0 22px; padding-left: 2px;
}
.np-pubsearch-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid #e4e0d8; background: #faf8f4;
  color: #4a453d; font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.np-pubsearch-subtab-n { color: #8a857c; font-weight: 700; }
.np-pubsearch-subtab:hover { border-color: var(--hue, #6c675f); }
.np-pubsearch-subtab[aria-current="page"] {
  background: var(--hue-dk, #2c2c2b); border-color: var(--hue-dk, #2c2c2b); color: #fff;
}
.np-pubsearch-subtab[aria-current="page"] .np-pubsearch-subtab-n { color: rgba(255,255,255,.8); }

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

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

/* ---------- A/B toggle (tiles landing <-> search landing) ---------- */
.np-pubsearch-abtoggle {
  margin: 4px auto 18px;
}
.np-pubsearch-abtoggle a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid #d8d3ca; background: #fff;
  color: #2c2c2b; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.np-pubsearch-abtoggle a:hover { border-color: #2c2c2b; background: #faf8f4; }

/* ---------- publication-cluster hue axis (data-cluster) ----------
   The six publication_cluster keys. Tokens live in css/colors.css. Both the
   pill and the section carry data-cluster, so the pill dot + section-head
   border + see-all link pick up the cluster hue; the active sub-pill fill uses
   --hue-dk. */
.np-pubsearch-tab[data-cluster="publications"], .np-pubsearch-cluster[data-cluster="publications"], .np-pubsearch-subtabs[data-cluster="publications"] { --hue: var(--np-pub-publications); --hue-dk: var(--np-pub-publications-dk); }
.np-pubsearch-tab[data-cluster="arotahi"],      .np-pubsearch-cluster[data-cluster="arotahi"],      .np-pubsearch-subtabs[data-cluster="arotahi"]      { --hue: var(--np-pub-arotahi);      --hue-dk: var(--np-pub-arotahi-dk); }
.np-pubsearch-tab[data-cluster="newsletters"],  .np-pubsearch-cluster[data-cluster="newsletters"],  .np-pubsearch-subtabs[data-cluster="newsletters"]  { --hue: var(--np-pub-newsletters);  --hue-dk: var(--np-pub-newsletters-dk); }
.np-pubsearch-tab[data-cluster="e-panui"],      .np-pubsearch-cluster[data-cluster="e-panui"],      .np-pubsearch-subtabs[data-cluster="e-panui"]      { --hue: var(--np-pub-e-panui);      --hue-dk: var(--np-pub-e-panui-dk); }
.np-pubsearch-tab[data-cluster="videos"],       .np-pubsearch-cluster[data-cluster="videos"],       .np-pubsearch-subtabs[data-cluster="videos"]       { --hue: var(--np-pub-videos);       --hue-dk: var(--np-pub-videos-dk); }
.np-pubsearch-tab[data-cluster="reports"],      .np-pubsearch-cluster[data-cluster="reports"],      .np-pubsearch-subtabs[data-cluster="reports"]      { --hue: var(--np-pub-reports);      --hue-dk: var(--np-pub-reports-dk); }