/* =============================================================
   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;
}
/* White pill tabs with coloured dot + coloured border matching the
   cluster hue. Iteration on the filled-pill treatment (retired
   2026-08-06 — contrast too heavy per user feedback); keeps the
   coloured-border addition so the pill still reads as "this cluster"
   at a glance without dominating the page. Active state falls back
   to the original dark-grey filled treatment (high-contrast "you're
   here" signal). */
.np-pubsearch-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 3px solid var(--hue, #6c675f);
  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-n { color: #6c675f; font-weight: 700; }
.np-pubsearch-tab:hover { border-color: var(--hue-dk, #2c2c2b); }
.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;
}

/* ---------- videos cluster, focus state — 5-up thumbnail grid ----------
   Scoped to [data-focus-cluster="videos"], NOT to the section's own
   [data-cluster], because the two states want different densities:

     · focus (?cluster=videos)  — uncapped, so 5-up divides evenly
     · "All" (no cluster pill)  — CAP_PER_SECTION = 6, which in a 5-wide
                                  grid renders a full row plus one orphan

   The attribute is emitted only in the focus state (see
   views-view-list--publication-search--block-all.html.twig), so the All
   state keeps the shared auto-fill rule above untouched.

   Explicit column counts rather than auto-fill: the tile is a fixed-ratio
   video thumbnail, so the column count is the design decision — letting
   auto-fill choose it would make the "5" incidental to the container width.

   `minmax(0, 1fr)` not `1fr` — grid items default to `min-width: auto`, so
   a long unbroken word in a title can otherwise push its own track wider
   and break the 5-up. Cheap insurance; no downside. */
.np-pubsearch-results[data-focus-cluster="videos"] .np-pubsearch-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
/* Responsive ladder — co-located with the component per
   documentation/css-organisation.md §2 (responsive.css is for overrides
   that cut across components; this one doesn't). Tile width stays in a
   ~215-265px band the whole way down, so the card only has to read well
   at one rough size. Bootstrap container widths: 1140 / 960 / 720 / 540. */
@media (max-width: 1199.98px) {
  .np-pubsearch-results[data-focus-cluster="videos"] .np-pubsearch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* ~230px */
  }
}
@media (max-width: 991.98px) {
  .np-pubsearch-results[data-focus-cluster="videos"] .np-pubsearch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* ~231px */
  }
}
@media (max-width: 767.98px) {
  .np-pubsearch-results[data-focus-cluster="videos"] .np-pubsearch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* ~263px */
  }
}

/* A/B toggle retired 2026-07-14 to the shared .np-page-toggle in
   css/page-toggle.css — extended to a two-visible-button pair covering
   publications + people + kōrero (4-way). See documentation/
   page-toggle-shared-plan.md. */

/* ---------- publication-cluster hue axis (data-cluster) ----------
   The seven publication_cluster keys. Tokens live in css/colors.css. Both
   the pill and the section carry data-cluster, so the pill fill + section-
   head border + see-all link pick up the cluster hue; the active sub-pill
   fill uses --hue-dk. Main pill row now fills with --hue-dk directly
   (2026-08-06 per pub-cluster-tab-filled-pill-plan.md D2 — WCAG AA
   contrast requires the darker variant when text is white). */
.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="annual-reports"], .np-pubsearch-cluster[data-cluster="annual-reports"], .np-pubsearch-subtabs[data-cluster="annual-reports"] { --hue: var(--np-pub-annual-reports); --hue-dk: var(--np-pub-annual-reports-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); }

/* ─── The pill row on /publications/landing (2026-08-17) ──────────────────
   The tile-browse sibling wears the same .np-pubsearch-tab look as the
   landing-list row above, so the two publications landings read as one
   system. Its markup keeps .np-people-tab as well — that class is
   js/tile-filter.js's selector, i.e. the JS contract, not a style.

   These two rules exist because css/role-browse.css loads AFTER this file
   and its generic `.np-tile-filter .np-people-tab.is-active` rule (0-2-0)
   would otherwise take the active pill's border-colour while this file's
   `[aria-current]` rule kept the dark fill — half of each. Restating the
   active state at 0-3-0 makes it deterministic regardless of load order.

   Groups with no data-cluster (papers, panui — each spans two clusters)
   fall through to the component's neutral by design; nothing to add. */
.np-tile-filter .np-pubsearch-tab { cursor: pointer; }
.np-tile-filter .np-pubsearch-tab.is-active,
.np-tile-filter .np-pubsearch-tab[aria-current="page"] {
  background: #2c2c2b;
  border-color: #2c2c2b;
  color: #fff;
  font-weight: 600;
}
.np-tile-filter .np-pubsearch-tab.is-active::before,
.np-tile-filter .np-pubsearch-tab[aria-current="page"]::before { background: #fff; }