/* Cinematographers.ch — Search Overlay Refinements
   Load AFTER the existing search-overlay.css. */

/* Search suggestions are easiest to scan in a single column until many results. */
.cs-search-overlay .cs-search-results,
.cs-search-overlay .cs-search-results:has(.cs-search-suggestion:nth-of-type(6)) {
  grid-template-columns: minmax(0, 1fr);
  gap: .22rem;
  margin-top: .9rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 1150px) {
  .cs-search-overlay .cs-search-results:has(.cs-search-suggestion:nth-of-type(13)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cs-search-overlay .cs-search-results .cs-search-suggestion {
  border-bottom: 1px solid rgba(0, 0, 0, .13);
  border-radius: 2px;
  padding: .7rem .85rem;
  transition: background-color .12s ease;
}

/* Important: place/canton with profile count — restrained light blue. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind="place"],
.cs-search-overlay .cs-search-suggestion[data-cs-kind="canton"] {
  background: #d8eafa;
  color: #172d3d;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind="place"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="place"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="place"]:focus-visible,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="canton"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="canton"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="canton"]:focus-visible {
  background: #bdddf4;
  color: #112a40;
}

/* Individual profiles — light green. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile"] {
  background: #e2f0df;
  color: #17321b;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile"]:focus-visible {
  background: #cce6c7;
  color: #16331a;
}

/* A location mentioned ONLY in biography/PDF/equipment is a text match.
   It is not a local professional: retain it, but do not colour it green. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile-text"] {
  background: rgba(255, 255, 255, .86);
  color: #151515;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile-text"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile-text"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="profile-text"]:focus-visible {
  background: #ededed;
  color: #151515;
}

/* Upcoming talent — preserve purple as a distinct signal. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind="upcoming"] {
  background: #e9def3;
  color: #3d2753;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind="upcoming"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="upcoming"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="upcoming"]:focus-visible {
  background: #d8c4e9;
  color: #352048;
}

/* Ordinary pages remain white rather than inheriting the coloured categories. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind="page"] {
  background: rgba(255, 255, 255, .86);
  color: #151515;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind="page"]:hover,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="page"].is-active,
.cs-search-overlay .cs-search-suggestion[data-cs-kind="page"]:focus-visible {
  background: #ededed;
  color: #151515;
}

/* Preserve visible keyboard focus and readable metadata on pastel backgrounds. */
.cs-search-overlay .cs-search-suggestion[data-cs-kind]:focus-visible {
  outline: 2px solid #476477;
  outline-offset: -2px;
}
.cs-search-overlay .cs-search-suggestion[data-cs-kind] .cs-search-suggestion-meta,
.cs-search-overlay .cs-search-suggestion[data-cs-kind] .cs-search-suggestion-type {
  color: inherit;
  opacity: .75;
}