/* ============================================================
   BonVoyage — collection filter + sort bar
   ------------------------------------------------------------
   Loaded only by the generated collection pages (c/<slug>.html).
   The whole block ships with [hidden] on it: without JS there is
   nothing to operate, so the page shows the full grid and no
   dead controls. filters.js unhides it on boot.

   Rules it keeps:
     - every colour and radius comes from brand.css custom props
     - the panel collapses behind a button below 860px and is
       always open above it, so aria-expanded is only ever set
       on a button that is actually shown
     - prefers-reduced-motion: no transitions, no panel fade
   ============================================================ */

/* Every block below sets an explicit display, which outranks the UA's
   [hidden] rule — so [hidden] has to be re-stated here or the bar would
   still be drawn on a page where JS never ran. */
.fltr[hidden],
.fltr-toggle[hidden],
.fltr-panel[hidden],
.fltr-clear[hidden],
.fltr-empty[hidden],
.grid-p .pcard[hidden]{display:none}

.fltr{
  display:flex;flex-direction:column;gap:14px;
  padding-block:14px 18px;border-bottom:1px solid var(--hair);margin-bottom:22px;
}

/* ---------- the always-visible bar ---------- */
.fltr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fltr-spacer{flex:1}

.fltr-toggle{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;
  border:1.5px solid var(--hair);border-radius:var(--r-pill);background:var(--canvas);
  color:var(--charcoal);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.fltr-toggle:hover{border-color:var(--sky-ink);background:var(--tint-sky);color:var(--sky-ink)}
.fltr-toggle[aria-expanded=true]{background:var(--sky);border-color:var(--sky-ink);color:var(--sky-ink)}
.fltr-toggle svg{flex:none}
.fltr-toggle .fltr-on{
  display:none;min-width:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--sky-ink);color:var(--canvas);font-size:12px;font-weight:700;line-height:20px;text-align:center;
}
.fltr-toggle[data-active] .fltr-on{display:inline-block}

.fltr-count{font-size:14px;color:var(--muted)}
.fltr-count b{color:var(--charcoal);font-variant-numeric:tabular-nums}

.fltr-sort{display:flex;align-items:center;gap:9px}
.fltr-sort label{font-size:14px;font-weight:600;color:var(--charcoal)}

/* ---------- the panel ---------- */
.fltr-panel{
  display:grid;gap:14px 26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:start;
  padding:16px 0 4px;border-top:1px solid var(--hair);
  animation:fltr-open .2s ease;
}
@keyframes fltr-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.fltr-group{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fltr-group legend{
  padding:0;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tangerine-ink);
}
.fltr-opts{display:flex;flex-direction:column;gap:2px;max-height:212px;overflow-y:auto}

.fltr-opt{
  display:flex;align-items:center;gap:9px;min-height:34px;padding:4px 8px;
  border-radius:var(--r-btn);font-size:14.5px;color:var(--charcoal);cursor:pointer;
  transition:background .16s ease;
}
.fltr-opt:hover{background:var(--tint-gray)}
.fltr-opt input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--sky-ink);cursor:pointer}
.fltr-opt-label{flex:1;min-width:0}
.fltr-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fltr-opt input:checked ~ .fltr-opt-label{font-weight:700}

.fltr-actions{grid-column:1/-1}
.fltr-clear{
  min-height:42px;padding:8px 16px;border:1.5px solid var(--charcoal);border-radius:var(--r-pill);
  background:transparent;color:var(--charcoal);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  transition:background .16s ease;
}
.fltr-clear:hover{background:var(--gray)}

/* ---------- grid + empty state ---------- */

.fltr-empty{
  padding:36px 0;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}

@media (min-width:860px){
  /* the panel is permanent here, so the toggle is removed entirely
     rather than left on screen claiming to collapse something */
  .fltr-panel{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .fltr-toggle,.fltr-opt,.fltr-clear{transition:none}
  .fltr-panel{animation:none}
}