/* =============================================================================
   FILTER BAR
   =============================================================================
   Shared by the jobs, job seekers and tenders archives, and by the job_category
   taxonomy template.

   Each of those page stylesheets used to carry its own copy of

       grid-template-columns: 2fr repeat(4, 1fr) auto;

   which cannot wrap: a `1fr` track has an implicit `min-width: auto`, so it
   refuses to shrink below its content. One long <select> option (the Category
   filter lists "Case Goods - Solid timber, Board Products & Steel Processing")
   forced that track to ~600px and pushed the whole bar past the right edge of
   the page, taking the document's horizontal scrollbar with it.

   Flex wrapping instead: filters keep a readable width and drop to the next line
   rather than overflowing.

   NOTE ON LOAD ORDER: the per-page stylesheets in assets/css/pages/ are enqueued
   AFTER this file, so at equal specificity they win. Keep filter bar *layout*
   here and leave only colour/typography in the page files - do not re-declare
   .filter-bar layout there or this fix is silently undone.
   ============================================================================= */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: end;
}

.filter-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1 1 200px;
  min-width: 0;
  /* Stops a filter left alone on a wrapped row from stretching the full width */
  max-width: 340px;
}

/* The search field gets roughly double the width of the other filters */
.filter-bar .filter-group:first-child {
  flex: 2 1 300px;
  max-width: 520px;
}

.filter-bar > .btn {
  flex: 0 0 auto;
}

/* A long option must never dictate the width of its filter */
.filter-bar .filter-input,
.filter-bar .filter-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1200px) {
  .filter-bar {
    gap: var(--spacing-md);
  }
}

@media (max-width: 1024px) {
  /* Two per row, all the same width - flex-grow off so the last filter on a row
     doesn't stretch into the space left beside the Clear Filters button. */
  .filter-bar .filter-group,
  .filter-bar .filter-group:first-child {
    flex: 0 1 calc(50% - (var(--spacing-md) / 2));
    max-width: none;
  }
}

@media (max-width: 768px) {
  .filter-bar {
    gap: var(--spacing-sm);
  }

  .filter-bar .filter-group,
  .filter-bar .filter-group:first-child {
    flex-basis: 100%;
    max-width: none;
  }

  .filter-bar > .btn {
    width: 100%;
  }
}