/*
 * UX-MOBILE-1: FilterPanel — collapsible filter drawer on mobile.
 *
 * Desktop (>=768px): toggle hidden, drawer shows as display:contents so its
 *   children participate directly in the parent .filters flex row.
 * Mobile (<768px): searchField inline, then toggle button. Tap opens a full-
 *   width drawer (flex column) with the remaining filters + reset button.
 */

/* ── Mobile default ── */
.filter-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.filter-panel__drawer {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.25rem;
}

.filter-panel--open .filter-panel__drawer {
  display: flex;
}

/* ── Desktop ── */
@media (min-width: 768px) {
  .filter-panel__toggle {
    display: none;
  }

  .filter-panel__drawer {
    /* Let children participate directly in the parent flex row. */
    display: contents;
  }

  /* Reset button sits in the flex row on desktop when active filters exist. */
  .filter-panel__reset-btn {
    align-self: flex-end;
  }
}

/* ── Mobile reset button ── */
@media (max-width: 767px) {
  .filter-panel__reset-btn {
    align-self: flex-start;
    margin-top: 0.25rem;
  }
}
