/* fx.css · layout/filter-grid, filters that slide the remaining cards into place · owner: Lizzy East · all rights reserved */

/* Without script every card shows and the filter buttons stay disabled (the page has
   the same height either way); fx.js switches them on. A press hides the cards that
   do not match, and the rest glide from where they were to where they now sit
   (FLIP: transforms only), while the ones leaving fade out in place. */
[data-fx~="layout/filter-grid"] { display: grid; gap: var(--fx-filter-gap, clamp(1rem, 2.5vw, 2rem)); }
[data-fx~="layout/filter-grid"] [data-fx-filters] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin: 0; }
[data-fx~="layout/filter-grid"] [data-fx-filter][aria-pressed="false"] { background: transparent; color: inherit; }
[data-fx~="layout/filter-grid"] [data-fx-filter]:disabled { cursor: default; }
[data-fx~="layout/filter-grid"] [data-fx-grid] {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fx-filter-card, 17rem)), 1fr));
  gap: var(--fx-filter-gap, clamp(1rem, 2.5vw, 2rem));
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-fx~="layout/filter-grid"] [data-fx-grid] > [hidden] { display: none; }
[data-fx~="layout/filter-grid"] [data-fx-grid] > [data-fx-leaving] { z-index: -1; pointer-events: none; }