/* Page-header glow for this page. */
.phead { --phead-glow: radial-gradient(80% 90% at 12% 0%, rgba(255,46,107,.20), transparent 62%),
              radial-gradient(70% 80% at 88% 30%, rgba(77,140,255,.16), transparent 60%); }

/* ==========================================================================
   Events — the dated list. Shares .evt* and .phead with the rest of the site;
   only the filter bar and the full-list grid are page-specific.
   ========================================================================== */


/* Decorative lights, same vocabulary as the home hero. */
.pulse {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .45;
  animation: pulse 7s ease-in-out infinite;
}
.pulse--1 { width: 300px; height: 300px; background: var(--hot);      top: -20%; left: 6%; }
.pulse--2 { width: 240px; height: 240px; background: var(--electric); bottom: -30%; right: 10%; animation-delay: -3.2s; }

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: .30; }
  50%      { transform: scale(1.2);  opacity: .55; }
}

/* --- Filter bar ----------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ink-line);
}
.filter {
  padding: .55rem 1.15rem;
  border: 2px solid var(--ink-line);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--on-dark-mute);
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background-color .18s var(--ease);
}
.filter:hover { border-color: var(--on-dark-mute); color: var(--on-dark); }
.filter.is-on {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--on-light);
}

/* --- Full list ------------------------------------------------------------ */
/* Every event on this page is equal weight — the lead treatment belongs on
   the home page, where we're choosing one thing to point at. */
.evt-grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evt-grid--all .evt--featured {
  grid-column: auto;
  flex-direction: column;
  border-color: var(--ink-line);
}
.evt-grid--all .evt--featured .evt__media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.evt-grid--all .evt--featured .evt__body { padding: 1.4rem; }
.evt-grid--all .evt--featured h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }

@media (max-width: 980px) { .evt-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .evt-grid--all { grid-template-columns: minmax(0, 1fr); } }