/* v65 (10 Nov 2026) - club pages with MANY upcoming events (first use: O Beach Ibiza, 150 dates).
   Nothing here is a new look: every rule is the existing house recipe, scoped to the club page's #events section.
   - .filter-block / .filter-buttons  = the city-page club/residency filter buttons (src/public-demo.css, Liquid Glass, active = red tint)
   - .list-more / .list-note / .liquid-button.compact = the city-page "Showing N of M events. / Show more" control (src/public-demo.css)
   - .kx-events-scroll = same scroll settings as the Past events box (.club-events in club-events-r19.css): native scroll, thin bar
   Cards stay the house .event-card. All events are in the HTML; cards outside the current batch/filter carry the hidden attribute. */
#events{--liquid-reflection-angle:18deg;--liquid-highlight-x:20%;--liquid-highlight-y:0%;--liquid-reflection-start:-70%;--liquid-reflection-end:128%}
#events .filter-block{display:grid;gap:8px;margin:18px 0 14px;justify-items:center}
#events .filter-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#events .filter-buttons button,#events .liquid-button{position:relative;overflow:hidden;isolation:isolate;min-height:40px;padding:0 11px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff8ef;font:inherit;font-size:13px;cursor:pointer;
  background:radial-gradient(circle at var(--liquid-highlight-x) var(--liquid-highlight-y),rgba(255,255,255,.12),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(237,28,36,.055) 50%,rgba(255,255,255,.04)),rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.06),0 7px 16px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px) saturate(128%);backdrop-filter:blur(14px) saturate(128%);text-decoration:none;
  transition:color 1500ms ease,background 1500ms ease,border-color 1500ms ease,box-shadow 1500ms ease,transform 1500ms ease}
#events .filter-buttons button:hover,#events .liquid-button:hover{color:#fff;border-color:rgba(255,255,255,.52);
  background:radial-gradient(circle at var(--liquid-highlight-x) var(--liquid-highlight-y),rgba(255,255,255,.18),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(237,28,36,.23) 58%,rgba(255,255,255,.08)),rgba(237,28,36,.24);transform:translateY(-1px)}
#events .filter-buttons button.active,#events .filter-buttons button.active:hover{color:#fff;border-color:rgba(237,28,36,.74);
  background:radial-gradient(circle at var(--liquid-highlight-x) var(--liquid-highlight-y),rgba(255,255,255,.16),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.1),rgba(237,28,36,.38) 58%,rgba(255,255,255,.07)),rgba(237,28,36,.5);transform:none}
#events .filter-buttons button:focus-visible,#events .liquid-button:focus-visible,#events .kx-events-scroll:focus-visible{outline:3px solid #fff;outline-offset:2px}
#events .filter-buttons button::after,#events .liquid-button::after{position:absolute;inset:-45% auto -45% var(--liquid-reflection-start);width:42%;transform:rotate(var(--liquid-reflection-angle));background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);content:"";opacity:0;pointer-events:none}
#events .filter-buttons button:hover::after,#events .liquid-button:hover::after{animation:kxLiquidReflection 1500ms ease forwards}
@keyframes kxLiquidReflection{0%{left:var(--liquid-reflection-start);opacity:0}18%{opacity:.62}100%{left:var(--liquid-reflection-end);opacity:0}}
#events .liquid-button.compact{min-height:40px;padding:9px 16px;font-size:13px}
#events .list-more{display:grid;gap:10px;justify-items:center;padding:10px 0 4px}
#events .list-note{margin:4px 2px 0;font-size:12px}
#events .kx-events-scroll{max-height:1040px;overflow-y:auto;padding-right:6px;overscroll-behavior:auto;scrollbar-width:thin}
#events .event-card[hidden]{display:none!important}
/* official landscape artwork keeps its own shape (house rule: a landscape poster never sits inside a square box) */
#events .kx-events-scroll .event-card img{aspect-ratio:auto;height:auto;object-fit:contain;background:none}
@media(max-width:640px){#events .kx-events-scroll{max-height:760px}}
@media(prefers-reduced-motion:reduce){#events .filter-buttons button,#events .liquid-button{transition:none}#events .filter-buttons button:hover,#events .liquid-button:hover{transform:none}#events .filter-buttons button:hover::after,#events .liquid-button:hover::after{animation:none}}