/* Elson 1.8.8: /projects/ filter bar (Annika mockup Ver1 10/26/2026).
   One horizontally scrolling row of pills, hidden scrollbar, #faaf43 chevrons over white fades.
   Isotope filtering is untouched: the <li><span data-vc-grid-filter-value=".vc_grid-term-ID"> items are moved, never re-created. */
.esap-fb{position:relative;box-sizing:border-box;width:auto;max-width:none;margin:0 -15px 30px 15px}
/* lines up with the card edges: WPBakery's vc_grid row starts 15px left of the first card's image */
.esap-fb ul.vc_grid-filter.esap-fb-track{display:flex !important;flex-wrap:nowrap;align-items:center;gap:12px;
  margin:0 !important;padding:0 !important;list-style:none;overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  width:100% !important;max-width:100% !important;box-sizing:border-box;text-align:left;background:none !important;border:0 !important;--vc-filter-bg:transparent}
.esap-fb ul.esap-fb-track::-webkit-scrollbar{display:none}
.esap-fb ul.esap-fb-track::before,.esap-fb ul.esap-fb-track::after{display:none !important;content:none !important}
.esap-fb ul.esap-fb-track > li.vc_grid-filter-item{flex:0 0 auto;display:block !important;float:none !important;
  margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
.esap-fb ul.esap-fb-track > li.vc_grid-filter-item > span{display:flex !important;align-items:center;justify-content:center;
  box-sizing:border-box;height:35px !important;padding:0 17px !important;margin:0 !important;border:0 !important;border-radius:999px !important;
  white-space:nowrap;cursor:pointer;background:#f5f5f5 !important;color:#9e9e9d !important;
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif !important;font-weight:500 !important;font-size:14px !important;
  line-height:1 !important;letter-spacing:.02em !important;text-transform:uppercase !important;
  transition:background-color .2s ease,color .2s ease;user-select:none}
.esap-fb ul.esap-fb-track > li.esap-fb-all > span{padding:0 27px !important;background:#c2c0be !important;color:#fff !important}
.esap-fb ul.esap-fb-track > li.vc_grid-filter-item:hover > span{background:#ebebeb !important;color:#7d7d7c !important}
.esap-fb ul.esap-fb-track > li.esap-fb-all:hover > span{background:#b3b1af !important;color:#fff !important}
.esap-fb ul.esap-fb-track > li.vc_grid-filter-item.vc_active > span,
.esap-fb ul.esap-fb-track > li.vc_grid-filter-item.vc_active:hover > span{background:#faaf43 !important;color:#fff !important}
.esap-fb ul.esap-fb-track > li > span:focus-visible{outline:2px solid #faaf43;outline-offset:2px}
.esap-fb ul.esap-fb-track > li.esap-fb-spacer{flex:0 0 1px;width:1px;height:1px;pointer-events:none}
/* fades + chevrons */
.esap-fb-fade{position:absolute;top:0;bottom:0;width:150px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease}
.esap-fb-fade-r{right:0;background:linear-gradient(to right,rgba(255,255,255,0) 0%,#fff 83%,#fff 100%)}
.esap-fb-fade-l{left:0;background:linear-gradient(to left,rgba(255,255,255,0) 0%,#fff 83%,#fff 100%)}
.esap-fb-btn{position:absolute;top:50%;z-index:3;width:30px;height:35px;margin-top:-17.5px;padding:0;border:0;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;
  visibility:hidden;transition:opacity .2s ease,visibility .2s}
.esap-fb-btn svg{width:9px;height:15px;display:block;overflow:visible}
.esap-fb-btn:focus-visible{outline:2px solid #faaf43;outline-offset:2px;border-radius:4px}
.esap-fb-btn-r{right:0}
.esap-fb-btn-l{left:0}
.esap-fb.can-r .esap-fb-fade-r,.esap-fb.can-l .esap-fb-fade-l{opacity:1}
.esap-fb.can-r .esap-fb-btn-r,.esap-fb.can-l .esap-fb-btn-l{opacity:1;visibility:visible}
/* WPBakery's mobile <select> is replaced by the same pill bar */
.vc_grid-filter-select.esap-fb-replaced{display:none !important}
@media (max-width:767px){
  .esap-fb{margin:0 0 20px 15px;width:calc(100vw - 30px);max-width:calc(100vw - 30px)}
  .esap-fb ul.esap-fb-track{gap:8px}
  .esap-fb ul.esap-fb-track > li.vc_grid-filter-item > span{height:30px !important;padding:0 13px !important;font-size:12px !important}
  .esap-fb ul.esap-fb-track > li.esap-fb-all > span{padding:0 18px !important}
  .esap-fb-fade{width:70px}
  .esap-fb-btn{height:30px;margin-top:-15px;width:26px}
}
@media (prefers-reduced-motion:reduce){.esap-fb ul.esap-fb-track{scroll-behavior:auto}}
/* 1.8.9: hide WPBakery's native filter until filter-bar.js has rebuilt it (also after each grid AJAX re-render).
   Fallback: the native filter is revealed after 3s even if the script never runs. */
ul.vc_grid-filter[data-vc-grid-filter]:not(.esap-fb-track),.vc_grid-filter-select:not(.esap-fb-replaced){visibility:hidden;animation:esapFbReveal 0s linear 3s forwards}
html.esap-fb-off ul.vc_grid-filter[data-vc-grid-filter],html.esap-fb-off .vc_grid-filter-select{visibility:visible !important;animation:none}
@keyframes esapFbReveal{to{visibility:visible}}
/* 1.9.1: the wrapper <li> never gets a background; only the rounded <span> pill changes on hover/active.
   Beats the theme's dynamic CSS (Prague Theme Options): "ul.vc_grid-filter li.vc_grid-filter-item:not(.vc_active):hover{background-color:#b0b0b0 !important}"
   (specificity 0,4,2) and "ul.vc_grid-filter li.vc_active.vc_grid-filter-item{background-color:#E8951F !important}" (0,3,2), plus WPBakery's
   filled/custom li:hover backgrounds. :is() adds one class of specificity: 0,5,2. */
.esap-fb ul.vc_grid-filter.esap-fb-track > li.vc_grid-filter-item:is(.vc_grid-filter-item,:hover,.vc_active,:focus-within){
  background:none !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;transition:none !important}
.esap-fb ul.vc_grid-filter.esap-fb-track > li.vc_grid-filter-item:not(.vc_active):hover > span{background:#ebebeb !important;color:#7d7d7c !important}
.esap-fb ul.vc_grid-filter.esap-fb-track > li.esap-fb-all:not(.vc_active):hover > span{background:#b3b1af !important;color:#fff !important}
.esap-fb ul.vc_grid-filter.esap-fb-track > li.vc_grid-filter-item.vc_active > span,
.esap-fb ul.vc_grid-filter.esap-fb-track > li.vc_grid-filter-item.vc_active:hover > span{background:#faaf43 !important;color:#fff !important}
