/**
 * @file
 * Empty state.
 *
 * The old listing rendered nothing at all when a filter combination matched no
 * events — the grid simply emptied and the page looked broken. Every listing
 * now has a labelled empty state that offers a way out.
 */

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xl) var(--space-m);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  background: var(--surface-well);
  text-align: center;
}

.empty-state__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--text-muted);
}

.empty-state__title {
  font-size: var(--step-1);
}

.empty-state__text {
  color: var(--text-secondary);
  max-inline-size: 36ch;
}

.empty-state__actions {
  margin-block-start: var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
}


/* ---------------------------------------------------------------------------
 * The search results page's empty state
 *
 * DECIDED BY THE BROWSER, NOT BY A SCRIPT
 * ---------------------------------------
 * This is the fourth attempt at one small thing: showing "Nothing matched" only
 * when nothing matched. The first three all tried to keep a JavaScript flag in
 * step with the filtering — js/filters.js owned the element, then the results
 * page owned it and listened for an event, then it counted the cards itself —
 * and on the live site the panel STILL sat under a page of results, which means
 * every one of those was a race or a second opinion.
 *
 * There is no flag now. The question "are any cards visible?" is asked of the
 * DOM by the browser, continuously, with `:has()`. Nothing can get it out of
 * step, because there is no state to get out of step: the panel is displayed
 * exactly when the container holds no card that the filter has not hidden.
 *
 * js/search-results.js still sets `hidden` on it, which is what a screen reader
 * reads — but what is PAINTED is decided here.
 * ------------------------------------------------------------------------ */

/* Scoped to the CONTAINER'S ATTRIBUTE, not to a class. The attribute is in the
   template and is set again by the script; a class is one rename away from
   turning this off silently. */
[data-me-search-results] .empty-state {
  display: none;
}

[data-me-search-results]:not(:has([data-me-filter-item]:not(.is-filtered-out))) .empty-state {
  display: grid;
}

/* And the grid goes when there is nothing in it to show, so an empty row of
   gaps does not sit above the panel. */
[data-me-search-results]:not(:has([data-me-filter-item]:not(.is-filtered-out))) [data-me-filter-grid] {
  display: none;
}