/*Filters / Attractions
   =========================== */
.filters{
  display: flex; flex-wrap: wrap; gap: 5px;
}
.filter{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Merriweather Sans", system-ui;
  transition:
    background .18s var(--ease),
    color .18s var(--ease),
    border-color .18s var(--ease),
    transform .18s var(--ease),
    box-shadow .18s var(--ease),
    filter .18s var(--ease);
    padding: 14px;
    font-size:15px;
}
.filter:hover{ transform: translateY(-1px); }
.filter[aria-pressed="true"]{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  filter: saturate(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.attract{
  display: grid;
  grid-template-rows: auto 1fr;
  /* contain: paint;  <-- consider removing if Safari feels clippy */
}
.attract .heroimg{
  height: auto; width: 100%; background: #f3f4f6;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  position: relative; overflow: hidden;
}
.attract .heroimg img{ width: 100%; height: 100%; object-fit: cover; }
.attract .meta{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.attract .distance{ font-size: .9rem; color: var(--muted); }
.attract .actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ======================================
   FLIP filter animations (no blank rows)
====================================== */
#attraction-list .attract{
  transition:
    transform var(--filter-dur) var(--filter-ease),
    opacity var(--filter-dur) var(--filter-ease),
    filter var(--filter-dur) var(--filter-ease);
  will-change: transform, opacity, filter;
}

/* removed from layout immediately */
#attraction-list .attract.hidden-card{
  display: none !important;
}

/* pre-enter state for newly shown cards */
#attraction-list .attract.will-show{
  opacity: 0;
  transform: translateY(10px) scale(.985);
  filter: saturate(.95);
}

/* enter animation */
#attraction-list .attract.will-show.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}

/* Reduced motion (scoped) */
@media (prefers-reduced-motion: reduce){
  #attraction-list .attract,
  .filters .filter{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================*/


#attraction-list .attraction-title {
  grid-column: 1 / -1;
}