/* =============================================================
   Videos search — clustered results with pill + sub-pill filter
   /videos (VideoSearchClustersSection rendered via
   templates/content/curated-sections/video_search_clusters.html.twig
   + src/Search/VideoSearchPreprocess.php).

   Sibling of publication-search.css. Reuses the shipped
   .np-video-facet coloured-legend pill styling (video-listing.css
   from the pill-legend ship 2026-08-06) — this file adds only the
   NEW chrome not carried by the shared pill class: form,
   tabs-row container, sub-pill row, section chrome, grid, empty
   state. Sub-pill hue cascade via [data-collection=<slug>] keys
   off --np-vid-* tokens (colors.css from the pill-legend ship).

   Ships with the videos-search-merge Phase 2c per
   documentation/videos-search-merge-plan.md D1 + §10 Phase 2.
   ============================================================= */

/* ---------- search form (D4) ---------- */
.np-vidsearch-form {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  max-width: 640px;
}
.np-vidsearch-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid #d9d3c7;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: #2c2c2b;
}
.np-vidsearch-form input[type="search"]:focus {
  outline: none;
  border-color: #6c675f;
  box-shadow: 0 0 0 2px rgba(108, 103, 95, .15);
}
.np-vidsearch-form button[type="submit"] {
  padding: 8px 18px;
  border: 1px solid #2c2c2b;
  border-radius: 999px;
  background: #2c2c2b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.np-vidsearch-form button[type="submit"]:hover {
  background: #4c4842;
  border-color: #4c4842;
}
/* "Clear search" link — visible only when a keys filter is active
   (Phase 2b, videos-search-type-unify-plan.md D5 §4). Sits after the
   Search button; low-emphasis text link so it doesn't compete with
   the primary submit affordance. */
.np-vidsearch-clear {
  align-self: center;
  padding: 0 10px;
  color: #6c675f;
  font-size: 13px;
  text-decoration: underline;
}
.np-vidsearch-clear:hover,
.np-vidsearch-clear:focus-visible {
  color: #2c2c2b;
  text-decoration: none;
}

/* ---------- cluster pill tabs container ----------
   The pills themselves inherit the shipped .np-video-facet chrome
   from video-listing.css (border-coloured, dotted, active-flip);
   this rule owns only the outer container. */
.np-vidsearch-tabs {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 2px solid #2c2c2b;
}

/* ---------- cluster section ---------- */
.np-vidsearch-results { margin: 6px 0 24px; }

.np-vidsearch-cluster { margin-bottom: 32px; scroll-margin-top: 90px; }

.np-vidsearch-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-vidsearch-cluster-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #2c2c2b;
  letter-spacing: -.1px;
}
.np-vidsearch-cluster-n { color: #6c675f; font-weight: 600; font-size: 14px; }

.np-vidsearch-seeall {
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--hue-dk, #2c2c2b);
}
.np-vidsearch-seeall:hover { text-decoration: underline; }

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

@media (max-width: 767.98px) {
  .np-vidsearch-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------- empty state (query with no matches) ---------- */
.np-vidsearch-empty {
  margin: 24px 0;
  padding: 20px;
  text-align: center;
  color: #6c675f;
  font-size: 14px;
}

/* ---------- video-cluster hue cascade for cluster sections + composite filter ----
   The pill row's own hue cascade lives in video-listing.css (already
   ships from the pill-legend ship for .np-video-facet[data-collection=…]).
   This adds the same --hue / --hue-dk mapping for .np-vidsearch-cluster
   (section-head border-bottom + see-all colour on /videos bare) and
   .np-cvl-composite-filter (per-cluster tint on sub-category pill row
   on /videos/type/<slug> — Phase 4 restyle 2026-08-06, replaces the
   retired .np-vidsearch-subtabs selector). */
.np-vidsearch-cluster[data-collection="wananga-paetukutuku"],
.np-cvl-composite-filter[data-collection="wananga-paetukutuku"]     { --hue: var(--np-vid-wananga-paetukutuku);     --hue-dk: var(--np-vid-wananga-paetukutuku-dk); }
.np-vidsearch-cluster[data-collection="workshops-and-webinars"],
.np-cvl-composite-filter[data-collection="workshops-and-webinars"]  { --hue: var(--np-vid-workshops-and-webinars);  --hue-dk: var(--np-vid-workshops-and-webinars-dk); }
.np-vidsearch-cluster[data-collection="conferences"],
.np-cvl-composite-filter[data-collection="conferences"]             { --hue: var(--np-vid-conferences);             --hue-dk: var(--np-vid-conferences-dk); }
.np-vidsearch-cluster[data-collection="seminars"],
.np-cvl-composite-filter[data-collection="seminars"]                { --hue: var(--np-vid-seminars);                --hue-dk: var(--np-vid-seminars-dk); }
.np-vidsearch-cluster[data-collection="symposia"],
.np-cvl-composite-filter[data-collection="symposia"]                { --hue: var(--np-vid-symposia);                --hue-dk: var(--np-vid-symposia-dk); }
.np-vidsearch-cluster[data-collection="media"],
.np-cvl-composite-filter[data-collection="media"]                   { --hue: var(--np-vid-media);                   --hue-dk: var(--np-vid-media-dk); }
.np-vidsearch-cluster[data-collection="documentaries"],
.np-cvl-composite-filter[data-collection="documentaries"]           { --hue: var(--np-vid-documentaries);           --hue-dk: var(--np-vid-documentaries-dk); }
.np-vidsearch-cluster[data-collection="events"],
.np-cvl-composite-filter[data-collection="events"]                  { --hue: var(--np-vid-events);                  --hue-dk: var(--np-vid-events-dk); }