/* ------------------------------------------------------------------
   Artist Directory – Search results
   ------------------------------------------------------------------
   The results container is #artist-search-results and carries the
   Webflow class .artistd-column-light-search. Webflow styled that class
   with hard per-breakpoint display values, independent of any state:
     base (desktop, >=992px):  display:none   -> results NEVER showed
     max-width:991px (tablet): display:block  -> always shown
     max-width:767px (mobile): display:flex   -> always shown

   The search JS toggles the ".visible" class, but the old rules here
   targeted class names that don't exist on the element, so:
     - Desktop: results never appeared (empty results page).
     - Tablet/mobile: container was force-shown regardless of .visible, so
       closeResults() (which only removes .visible) could not hide it — the
       "_RESULTS / Close [x]" header stayed and the close button felt broken.

   Fix: make ".visible" the single source of truth on ALL breakpoints.
   The #id base rule (specificity #id = 1,0,0) overrides Webflow's
   .artistd-column-light-search breakpoint rules (0,1,0), so the container
   is hidden by default everywhere and only shown while a search is active.
   Mobile keeps Webflow's intended flex layout when open.
   ------------------------------------------------------------------ */
#artist-search-results {
  display: none;
}

#artist-search-results.visible {
  display: block;
}

@media screen and (max-width: 767px) {
  #artist-search-results.visible {
    display: flex;
  }
}

.result-item {
  opacity: 0;
  transform: translateY(10px);
}

.result-item.visible {
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}