/*
 * Exposed filter bar of views that group their filters with views_ef_fieldset
 * (today only the concerts list, block_2 of the concerts view).
 *
 * Replaces the float layout from sass/drupal/_views.scss. There the filter
 * container floated right with a shrink-to-fit width, so its width followed
 * the natural width of its selects. The artist select holds thousands of
 * options and the widest artist name alone made the container as wide as the
 * form, so the filters dropped below the Upcoming/Past links. The country
 * select of the shs widget had no width limit and ran into the venue select.
 *
 * Now one wrapping flex row (status links, filters, sort order) with the
 * filters in an auto-fit grid and every control capped to its cell, so no
 * option text can widen the layout. Visual order follows the DOM, except the
 * sort order, which keeps its old place at the end of the row (it floated
 * right before).
 *
 * views_ef_fieldset moves the submit button into the root container right
 * after the filters, so a visible button (no JavaScript, or a BEF release
 * that does not hide it under auto-submit) lands at the end of the filters.
 * With auto-submit and "hide submit button" on, BEF hides it.
 *
 * Utopia fluid spacing between the 360px and 1280px viewport anchors (values
 * from fluid_clamp, the same 14px => 16px scale as koba-cookie-banner.css).
 * Loaded standalone after css/styles.css: the theme's main stylesheet is
 * built with Compass/Ruby SASS, which cannot be compiled locally. The
 * selectors outrank the compiled float rules without !important; browsers
 * without :has() keep the old float layout.
 */

.region-content .view-filters .bef-exposed-form .form--inline:has(> .views-ef-fieldset-root) {
  /* Utopia space scale (360px => 1280px). */
  --koba-filters-space-xs: clamp(0.6562rem, 0.6196rem + 0.163vw, 0.75rem);
  --koba-filters-space-s: clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem);
  --koba-filters-space-m: clamp(1.3125rem, 1.2391rem + 0.3261vw, 1.5rem);
  /* Layout threshold, not a size: room for four 10.5rem filter cells and
     their gaps. Below it the filters wrap under the status links; the same
     value is the 4-column step of the container query further down. */
  --koba-filters-group-min: 45rem;

  display: flex;
  flex-wrap: wrap;
  /* Last baseline: the sort order shares the text baseline of the filter
     row, also when the filters wrap under the status links, so it reads as
     the end of that row instead of floating between two lines. */
  align-items: last baseline;
  gap: var(--koba-filters-space-s) var(--koba-filters-space-m);
}

/* The clearfix pseudo-element would become an empty flex item. */
.region-content .view-filters .bef-exposed-form .form--inline:has(> .views-ef-fieldset-root)::after {
  content: none;
}

/* The theme sets .form--inline > .form-actions to inline-block, which beats
   core's .js .js-hide. views_ef_fieldset leaves only a hidden copy of the
   submit button in there, so the wrapper would become an empty flex item. */
.js .region-content .view-filters .bef-exposed-form .form--inline:has(> .views-ef-fieldset-root) > .form-actions.js-hide {
  display: none;
}

.region-content .view-filters .bef-exposed-form .form--inline:has(> .views-ef-fieldset-root) > .form-item-sort-order {
  order: 1;
  margin-inline: auto 0;
}

.region-content .view-filters .bef-exposed-form .form--inline:has(> .views-ef-fieldset-root) > .views-ef-fieldset-root {
  flex: 1 1 0%;
  min-inline-size: min(100%, var(--koba-filters-group-min));
}

/* views_ef_fieldset renders an empty description div in every container. */
.region-content .view-filters .bef-exposed-form .views-ef-fieldset-container > .details-wrapper > .details-description:empty {
  display: none;
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-root > .details-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--koba-filters-space-s) var(--koba-filters-space-m);
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-root > .details-wrapper > .views-ef-fieldset-container-0 {
  flex: 0 0 auto;
  float: none;
  margin: 0;
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-root > .details-wrapper > .views-ef-fieldset-container-1 {
  flex: 1 1 var(--koba-filters-group-min);
  min-inline-size: 0;
  float: none;
  margin: 0;
  text-align: start;
  container: koba-filters / inline-size;
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-root > .details-wrapper > .form-submit {
  flex: 0 0 auto;
  margin: 0;
}

/* One column on phones, two from 22rem (two 10.5rem cells and a gap), and
   one row from 45rem. Explicit steps instead of auto-fit, so four filters
   never break into an orphan 3 + 1. Container query values cannot read
   custom properties, hence the literal rem values. */
.region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 > .details-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--koba-filters-space-xs) var(--koba-filters-space-s);
}

@container koba-filters (min-width: 22rem) {
  .region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 > .details-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* One equal column per filter, whatever the number of exposed filters. */
@container koba-filters (min-width: 45rem) {
  .region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 > .details-wrapper {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 > .details-wrapper > .form-item {
  float: none;
  inline-size: auto;
  min-inline-size: 0;
  margin: 0;
}

/* Cap every control to its grid cell: a select is otherwise as wide as its
   longest option, and the shs widget wraps its select in an inline-block. */
.region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 .form-item :is(select, .form-text, .shs-container, .shs-field-container, .shs-widget-container) {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.region-content .view-filters .bef-exposed-form .views-ef-fieldset-container-1 .shs-widget-container {
  display: block;
}