/**
 * @file
 * Filter bar — quick chips + advanced disclosure.
 *
 * The outgoing site presented two competing filter systems at once: a Select2
 * "Genre / Venue / Date" panel with three custom-styled dropdowns, and a row of
 * quick tabs (SHOW ALL / TODAY / FREE / COUNCIL / LIBRARY / ART GALLERY /
 * SENIORS CENTRE / YOUTH CENTRE) wired to Isotope. They filtered independently
 * and could contradict each other.
 *
 * Here they are one control. The chips are the fast path and stay visible; the
 * full genre / venue / date form is a disclosure below them. Both write to the
 * same state, and the active filters are echoed back as removable pills so it
 * is always clear what is being applied. Every quick filter from the old site
 * is preserved — none removed.
 */

/**
 * The bar itself.
 *
 * It is not sticky. A sticky filter bar plus a sticky header ate ~180px of a
 * laptop viewport, and the bar is short enough that scrolling back to it costs
 * nothing. It sits inside the listing, above the grid.
 */
.filter-bar {
  display: grid;
  /* Grid and flex items both default to min-width:auto, so every wrapper on the
     way down to the scrolling chip row has to opt out or the row's full content
     width propagates back up and widens the page. */
  min-inline-size: 0;
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid var(--border-subtle);
}

/* Chips and the keyword box share one row; the box drops below on narrow
   screens rather than squeezing the chips. */
.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
  gap: var(--space-xs) var(--space-m);
}

/* Row of quick chips. Scrolls horizontally on narrow screens instead of
   wrapping into four ragged lines. */
.filter-chips {
  display: flex;
  flex: 1 1 auto;
  /* A flex item defaults to min-width:auto, which lets it grow to its content
     rather than scroll — eight chips then pushed the page 800px wide on a
     phone. This is what makes overflow-x below actually take effect. */
  min-inline-size: 0;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  /* Fade the right edge so it reads as scrollable. */
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

@media (min-width: 60rem) {
  .filter-chips {
    flex-wrap: wrap;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  flex: none;
  /* Was 0.55rem/1rem — a row of eight ran the full width of the page and
     read as heavier than the events underneath it. */
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.chip:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

/* Active chip: white label on a solid accent fill, so it uses --accent-solid
   (via --chip-bg-active) rather than the lighter brand magenta. */
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--chip-bg-active);
  border-color: var(--chip-bg-active);
  color: var(--chip-text-active);
}

.chip[aria-pressed="true"]:hover,
.chip.is-active:hover {
  background: var(--accent-solid-hover);
  border-color: var(--accent-solid-hover);
}

.chip__count {
  padding: 0 0.35em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

/**
 * Keyword box.
 *
 * Sized to its content rather than stretched: at full width it was the widest
 * thing on the page and read as the site's main search, which it is not — that
 * is the header panel. This one narrows what is already listed.
 */
.filter-search {
  position: relative;
  flex: 0 1 16rem;
  min-inline-size: 0;
  margin-inline-start: auto;
}

@media (max-width: 47.999rem) {
  .filter-search {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}

/* Type selector included so this beats the equal-specificity
   `input[type="search"]` rule in form.css, which loads later. */
.filter-search input[type="search"] {
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding-block: 0.4rem;
  padding-inline-start: 2.35rem;
  font-size: var(--step--1);
  background: transparent;
  border: 1px solid var(--border-subtle);
}

.filter-search input[type="search"]:focus {
  background: var(--input-bg);
}

.filter-search__icon {
  position: absolute;
  inset-inline-start: var(--space-2xs);
  top: 50%;
  translate: 0 -50%;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* Result count sits with the section heading, not in the bar. */
.filter-toolbar__count {
  color: var(--text-secondary);
  font-size: var(--step--1);
  white-space: nowrap;
}

.filter-toolbar__count b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Applied-filter pills, rendered by js/filters.js once something is set. */
.filter-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-applied:empty {
  display: none;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);

  /* Room on the trailing side for the button, which is a circle rather than a
     glyph and needs its own space to sit in. */
  padding: 0.2rem 0.3rem 0.2rem var(--space-2xs);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--me-magenta) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--me-magenta) 40%, transparent);
  color: var(--text-primary);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/**
 * The remove button.
 *
 * It was a grey disc with a "×" character in it: a flat blob that matched
 * nothing else on the pill, with the glyph sitting low because a multiplication
 * sign is positioned by the font rather than by the box. It is now the pill's
 * own colour — transparent with a magenta edge, filling with the accent on
 * hover — and the cross is an SVG drawn to the button's box, so it is centred
 * and the same weight at every size.
 */
.filter-pill__remove {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--me-magenta) 45%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--me-magenta-300);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.filter-pill__remove svg {
  inline-size: 0.6rem;
  block-size: 0.6rem;
}

.filter-pill__remove:focus-visible {
  outline: 2px solid var(--me-magenta);
  outline-offset: 2px;
}

.filter-pill__remove:hover {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: var(--me-white);
}

/* Advanced disclosure */
.filter-advanced {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}

.filter-advanced__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  list-style: none;
}

.filter-advanced__summary::-webkit-details-marker {
  display: none;
}

.filter-advanced__summary::after {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-base) var(--ease-out);
  flex: none;
}

.filter-advanced[open] .filter-advanced__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.filter-advanced__body {
  padding: 0 var(--space-s) var(--space-s);
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  align-items: end;
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: var(--space-s);
}

/**
 * The view's exposed form.
 *
 * It renders inside the bar's disclosure when the display exposes filters, and
 * as a standalone block otherwise. Both cases get the same treatment: the
 * form's own elements are laid out as an auto-fitting grid, so adding a filter
 * in the Views UI needs no CSS. The outgoing theme styled each one by ID.
 */
/**
 * The grid has to reach the fields, not stop at a wrapper.
 *
 * js/search.js encloses whatever it finds — often a `.block` around the form —
 * so between `.exposed-form` and the fields there can be one or two wrappers.
 * Each level repeats the same grid: a level holding a single child gives it the
 * whole row, and the level that actually holds the fields lays them out. The
 * alternative, `display: contents` on the wrappers, drops them from the
 * accessibility tree in some browsers.
 */
.exposed-form,
.exposed-form > .block,
.exposed-form > .block > form,
.exposed-form > form,
.search-panel .views-exposed-form {
  display: grid;
  gap: var(--space-m) var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  /* `start`, not `end`: labels wrap to different heights, and bottom-aligning
     them left the row of controls visibly ragged. */
  align-items: start;
}

/* A wrapper carrying only the form should not add its own box. */
.exposed-form > .block {
  padding: 0;
  border: 0;
  background: none;
}

/* A checkbox group (the "Buttons" set: Free / Council / Featured) is wider than
   a single control, reads better on its own row, and should not carry the heavy
   panel styling a standalone fieldset gets. */
.exposed-form fieldset {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* A date range needs room for two fields side by side. */
.exposed-form .form-daterange {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 60rem) {
  .exposed-form .form-item:has(.form-daterange) {
    grid-column: span 2;
  }

  /* The keyword field is the one people use most; give it the width that
     implies rather than leaving it as one narrow column in an empty row. */
  .exposed-form .form-item:has(input[type="text"], input[type="search"]) {
    grid-column: span 2;
  }
}

.exposed-form legend {
  margin: 0 0 var(--space-3xs);
  padding: 0;
}

/* The submit row spans the grid so the button never sits alone in a column. */
.exposed-form .form-actions {
  grid-column: 1 / -1;
  margin-block-start: 0;
}

/* Placed as a standalone block with no panel around it — give it a surface so
   it does not float on the page background. Inside the search panel it needs
   nothing: the panel is already the box. */
.block > .exposed-form:not(.search-panel *) {
  padding: var(--space-m);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--surface-1);
}

/* ---------------------------------------------------------------------------
 * "See more".
 *
 * Under the grid, centred, and hidden by the script when every matching card is
 * already on screen. It is a real <button> in the flow rather than a pager: the
 * cards are all in the document already and nothing is fetched, so a link with
 * a page number would be a lie about what happens when it is pressed.
 * ------------------------------------------------------------------------ */
.filter-more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-l);
}

.filter-more[hidden] {
  display: none;
}

.filter-more__button {
  min-inline-size: min(18rem, 100%);
}