/* ═══════════════════════════════════════════════════════════════
   EVENTS  (/events/ and /event/{slug}/)

   Uses the sitewide tokens from assets/css/style.css — the sketch's
   own palette is dropped because its navy (#072f68) and green
   (#168b52) are just off-brand versions of --primary and --accent.
   Its fonts are dropped for the same reason: the site is Inter.

   Astra override discipline (see CLAUDE.md): every heading inside a
   coloured band declares its own `color`, and every anchor that sets
   a `color` also sets one on `:hover` — Astra's `a:hover{color:#191970}`
   is (0,1,1) and beats a plain class selector otherwise.
   ═══════════════════════════════════════════════════════════════ */

/* ── Astra container reset ───────────────────────────────────── */
.events-index-page .ast-container,
.event-detail-page .ast-container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ── Site gutter ──────────────────────────────────────────────
   Other NHL pages inset their content by a FIXED 200px (.cta-min in
   components.css, .articles / .conditions on the homepage) rather than
   centring a max-width container. The events pages were using a centred
   1320/1240px container, which put their content ~140px further left than
   the logo and every other section on the site.

   One definition, breakpoints matching components.css, consumed as
   var(--ev-gutter) by every full-bleed section below. */
.events-index-page,
.event-detail-page {
  --ev-gutter: 200px;
}

@media (max-width: 1200px) {

  .events-index-page,
  .event-detail-page {
    --ev-gutter: 40px;
  }
}

@media (max-width: 680px) {

  .events-index-page,
  .event-detail-page {
    --ev-gutter: 18px;
  }
}

/* Astra's .ast-container is a FLEX row (main column + sidebar), so <main> is a
   flex item and shrink-to-fits its widest child. That capped the whole page at
   .events-browser's 1320px max-width, leaving the full-bleed hero and CTA band
   short of the viewport edge on wide screens — visible as a pale strip down the
   right. Claiming the full row fixes it; min-width:0 keeps long content (the
   calendar's min-width:660px table) shrinking rather than overflowing. */
.events-index-page .ast-container > main,
.event-detail-page .ast-container > main {
  flex: 1 1 100%;
  min-width: 0;
}

/* ═══════════════ SHARED ═══════════════ */

.event-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  background: hsl(var(--accent) / 0.12);
  color: hsl(var(--accent));
  font: 700 10.5px/1.3 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.event-tag--featured {
  background: hsl(var(--accent) / 0.14);
  color: hsl(var(--accent));
}

.event-tag--onDark {
  background: hsl(0 0% 100% / 0.16);
  color: #fff;
}

.event-tag--muted {
  background: hsl(0 0% 100% / 0.1);
  color: hsl(0 0% 100% / 0.75);
}

.breadcrumb--onDark,
.breadcrumb--onDark a,
.breadcrumb--onDark .breadcrumb__current {
  color: hsl(0 0% 100% / 0.75);
}

.breadcrumb--onDark a:hover {
  color: #fff !important;
  /* beat Astra's a:hover and the theme's global a:hover */
}

.breadcrumb--onDark .breadcrumb__current {
  color: #fff;
  font-weight: 500;
}

/* ── Buttons ──────────────────────────────────────────────────
   Defined here rather than reusing .ip-btn, which only exists inside
   patient-support.css / international-page-styles.css / wellness.css —
   enqueueing one of those whole page stylesheets to borrow two classes
   would drag their page-scoped rules onto this page too.

   Both variants set `color` on :hover as well as at rest: Astra's
   `a:hover { color:#191970 }` is (0,1,1) and beats a plain class. */
.event-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 9999px;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.event-btn--primary {
  /* The booking cyan the site reserves for "act now" CTAs. */
  background: hsl(194 100% 46%);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.event-btn--primary:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08);
  box-shadow: var(--shadow-lg);
}

.event-btn--primary:active {
  transform: translateY(1px);
}

.event-btn--ghost {
  background: transparent;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--border));
}

.event-btn--ghost:hover {
  color: hsl(var(--primary));
  text-decoration: none;
  background: hsl(var(--primary-light));
  border-color: hsl(var(--primary) / 0.35);
}

/* On a dark band the ghost button inverts — but ONLY inside the hero's copy
   column. Scoping this to `.events-hero` instead would also hit the spotlight
   panel, which is a WHITE card sitting inside that dark band: the button would
   inherit white-on-white and vanish. Same trap as Astra's `a:hover`, just
   self-inflicted, so the selector names the light-on-dark region explicitly. */
.events-hero__inner .event-btn--ghost,
.event-hero__inner .event-btn--ghost {
  color: #fff;
  border-color: hsl(0 0% 100% / 0.35);
}

.events-hero__inner .event-btn--ghost:hover,
.event-hero__inner .event-btn--ghost:hover {
  color: #fff;
  background: hsl(0 0% 100% / 0.1);
  border-color: hsl(0 0% 100% / 0.55);
}

.event-btn:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

/* ═══════════════ LISTING HERO ═══════════════ */
/* A carousel where the WHOLE hero is the slide: each featured event brings
   its own background, flag, title, copy and CTA. Slides share one grid cell
   so they stack without absolute positioning, the tallest sets the height,
   and they crossfade in place. */

.events-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: 440px;
  background: hsl(var(--primary));
}

.events-hero__slide {
  /* All slides in the same cell — no absolute positioning, so the container
     is sized by the tallest slide and nothing jumps between them. */
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding: 54px var(--ev-gutter);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.events-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.events-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A navy wash over the whole photograph, deepened on the left so the copy
   column stays legible whatever the image behind it. */
.events-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      hsl(216 72% 16% / 0.92) 0%,
      hsl(216 68% 18% / 0.78) 38%,
      hsl(216 64% 22% / 0.6) 100%),
    linear-gradient(0deg,
      hsl(216 70% 14% / 0.35) 0%,
      transparent 60%);
}

.events-hero__inner {
  position: relative;
  max-width: 620px;
}

.events-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 25px;
  padding: 0 12px;
  border-radius: 6px;
  background: hsl(var(--accent));
  color: #fff;
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.events-hero__flag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.events-hero__title {
  margin: 18px 0 0;
  color: #fff;
  font: 700 clamp(1.9rem, 3.4vw, 2.7rem)/1.18 var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.events-hero__lead {
  max-width: 34rem;
  margin: 16px 0 0;
  color: hsl(0 0% 100% / 0.82);
  font-size: 14.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Circular arrow — the slide's "view this event" action. */
.events-hero__go {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: 26px;
  border: 1px solid hsl(0 0% 100% / 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.events-hero__go:hover {
  color: #fff;
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
  transform: translateX(3px);
}

.events-hero__go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Slide dots ── */
.events-hero__dots {
  position: absolute;
  right: var(--ev-gutter);
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
}

.events-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.45);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.events-hero__dot:hover {
  background: hsl(0 0% 100% / 0.75);
}

.events-hero__dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

.events-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ═══════════════ CATEGORY PILL BAR ═══════════════ */

.events-cats {
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}

.events-cats__inner {
  padding: 14px var(--ev-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}

.events-cats__label {
  flex: 0 0 auto;
  color: hsl(var(--accent));
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Scrolls sideways rather than wrapping to a second row: the bar stays one
   line tall at every width, so the listing below never shifts down as
   categories are added. */
.events-cats__list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.events-cats__list::-webkit-scrollbar {
  display: none;
}

.events-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font: 600 12.5px/1 var(--font-sans);
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.events-cat:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary-light));
}

.events-cat.is-active,
.events-cat.is-active:hover {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.events-cat:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* ═══════════════ BROWSER ═══════════════ */

.events-browser {
  padding: 56px var(--ev-gutter) 96px;
}

.events-browser__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
}

.events-browser__head h2 {
  margin-bottom: 0;
}

.events-browser__head h2 {
  margin: 6px 0 0;
  color: hsl(var(--foreground));
  font: 600 clamp(2rem, 3.6vw, 3rem)/1.1 var(--font-sans);
  letter-spacing: -0.025em;
}

/* ── Grid / calendar switch ── */
.events-switch {
  display: flex;
  padding: 4px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--card));
}

.events-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: hsl(var(--muted-foreground));
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.events-switch button:hover {
  color: hsl(var(--primary));
}

.events-switch button.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ── Two-column body ── */
.events-browser__grid {
  /* The period tabs used to sit between the heading and this grid and were
     the only thing separating them; removing them left the H2 resting on the
     sidebar panel. This restores the gap explicitly. */
  margin-top: 36px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* ── Filters ── */
.events-filters {
  position: sticky;
  top: 20px;
  padding: 22px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
}

.events-filters__search {
  display: flex;
  width: 100%;
}

.events-filters__group {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid hsl(var(--border));
}

/* The first group sits flush against the panel top — no rule above it. */
.events-filters__group--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.events-filters__legend {
  display: block;
  padding: 0;
  margin-bottom: 11px;
  color: hsl(var(--primary));
  font: 600 13px/1 var(--font-sans);
}

/* ── Timeframe: Upcoming / Past ── */
.events-timeframe {
  display: flex;
  padding: 3px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--surface));
}

.events-timeframe__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  font: 600 12.5px/1 var(--font-sans);
  transition: background 0.18s, color 0.18s;
}

.events-timeframe__btn:hover {
  color: hsl(var(--primary));
}

/* Navy fill, like the category pills and the Grid/Calendar switch — a
   selected control should look the same wherever it appears on the page. */
.events-timeframe__btn.is-active,
.events-timeframe__btn.is-active:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.events-filters__check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 11px 0;
  color: hsl(var(--muted-foreground));
  font-size: 13.5px;
  cursor: pointer;
}

/* Label takes the slack so the count pins to the right edge. */
.events-filters__check-label {
  flex: 1;
  min-width: 0;
}

.events-filters__count {
  flex: 0 0 auto;
  color: hsl(var(--muted-foreground) / 0.8);
  font: 600 11.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.events-filters__check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: hsl(var(--accent));
  cursor: pointer;
}

.events-filters__check:hover {
  color: hsl(var(--primary));
}

.events-filters__clear {
  display: inline-block;
  margin-top: 18px;
  color: hsl(var(--primary));
  font: 600 13px/1 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.events-filters__clear:hover {
  color: hsl(var(--accent));
}

.events-filters__apply {
  width: 100%;
  margin-top: 16px;
  padding: 11px;
  border: 0;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
}

/* ── Results header ── */
/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so a flex container needs this or the hidden attribute does nothing. */
.events-results__meta[hidden] {
  display: none;
}

.events-results__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Aligns with the sidebar's first control and keeps the sort clear of the
     grid/calendar switch sitting directly above it. */
  margin: 0 0 20px;
  min-height: 40px;
  flex-wrap: wrap;
}

.events-results__meta .results-meta {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
}

.events-sort select {
  padding: 9px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
}

/* Loading: dim rather than blank, so the page doesn't jump. */
#events-list.is-loading,
#events-calendar.is-loading {
  opacity: 0.45;
  transition: opacity 0.15s;
  pointer-events: none;
}

/* ═══════════════ EVENT CARDS ═══════════════ */

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.event-card {
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.event-card:focus-within {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* The whole card is one anchor — see template-parts/events/card.php. */
.event-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.event-card__link:hover,
.event-card__link:focus {
  color: inherit;
  text-decoration: none;
}

.event-card__link:focus-visible {
  outline: none;
  /* handled by :focus-within on the card, so the ring follows the radius */
}

.event-card__media {
  position: relative;
  height: 158px;
  background: hsl(var(--primary-light));
}

.event-card__media--empty::after {
  content: "\f133";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "FA Pro";
  font-size: 30px;
  color: hsl(var(--primary) / 0.28);
}

.event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-card__date {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 46px;
  padding: 7px 4px;
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--primary));
  text-align: center;
  box-shadow: var(--shadow-md);
}

.event-card__date b {
  display: block;
  font: 600 18px/1 var(--font-sans);
}

.event-card__date span {
  display: block;
  margin-top: 2px;
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.08em;
  color: hsl(var(--accent));
}

.event-card__flag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-card--past .event-card__img {
  filter: saturate(0.65);
}

.event-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.event-card__title {
  margin: 9px 0 0;
  color: hsl(var(--foreground));
  font: 600 17px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
}

.event-card__desc {
  margin: 8px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 13.5px;
  line-height: 1.55;
}

/* ── The three facts every card shows, so cards stay comparable ── */
.event-card__facts {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.event-card__facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  line-height: 1.45;
}

.event-card__facts .fa {
  flex: 0 0 13px;
  margin-top: 1px;
  color: hsl(var(--accent));
  font-size: 12px;
}

.event-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid hsl(var(--border));
}

.event-card__format {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--primary));
  font: 600 12.5px/1 var(--font-sans);
}

.event-card:hover .event-card__cta {
  color: hsl(var(--accent));
}

/* ── Empty state ── */
.events-empty {
  padding: 64px 32px;
  border: 1px dashed hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  text-align: center;
}

.events-empty .fa {
  display: block;
  margin-bottom: 14px;
  color: hsl(var(--primary) / 0.3);
  font-size: 30px;
}

.events-empty b {
  display: block;
  margin-bottom: 6px;
  color: hsl(var(--foreground));
  font: 600 18px/1.3 var(--font-sans);
}

.events-empty p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 14.5px;
}

.events-empty__clear {
  display: inline-block;
  margin-top: 16px;
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.events-empty__clear:hover {
  color: hsl(var(--accent));
}

/* ═══════════════ CALENDAR ═══════════════ */
/* Separate rounded day cards with gaps between them, not a collapsed grid of
   shared borders. Still a <table>: days against weekdays genuinely is tabular
   data, and the <th scope="col"> headers come free — border-spacing gives the
   card gaps without giving that up. */

.events-cal {
  padding: 28px 30px 30px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
}

.events-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.events-cal__title {
  margin: 0;
  color: hsl(var(--primary));
  font: 600 21px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
}

.events-cal__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.events-cal__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--card));
  color: hsl(var(--primary));
  font-size: 12px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.events-cal__arrow:hover {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.events-cal__arrow:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* Keeps a usable minimum width and scrolls on narrow screens rather than
   crushing seven columns into a phone. */
.events-cal__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.events-cal__table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  margin: 0;
  /* `separate` + spacing is what turns the cells into individual cards. */
  border-collapse: separate;
  border-spacing: 9px;
}

.events-cal__table th {
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-align: center;
}

.events-cal__table th abbr {
  text-decoration: none;
  border: 0;
  cursor: default;
}

.events-cal__cell {
  height: 116px;
  padding: 11px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  vertical-align: top;
}

/* Leading and trailing blanks are not days — they get no card at all. */
.events-cal__cell.is-empty {
  border: 0;
  background: none;
}

.events-cal__daynum {
  display: block;
  margin-bottom: 6px;
  color: hsl(var(--muted-foreground));
  font: 400 13px/1 var(--font-sans);
}

/* Today is outlined in the brand green rather than filled, so it reads as a
   highlight without turning one card into something that looks clickable. */
.events-cal__cell.is-today {
  border-color: hsl(var(--accent) / 0.55);
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.25);
}

.events-cal__cell.is-today .events-cal__daynum {
  color: hsl(var(--accent));
  font-weight: 700;
}

/* ── Event inside a day ──
   Left as-is by request: a link carrying the time and title. */
.events-cal__chip {
  display: block;
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 6px;
  background: hsl(var(--primary-light));
  color: hsl(var(--primary));
  font-size: 10.5px;
  line-height: 1.35;
  transition: background 0.15s;
}

.events-cal__chip:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.events-cal__chip.is-past {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.events-cal__chip.is-past:hover {
  background: hsl(var(--muted-foreground));
  color: #fff;
}

.events-cal__chip-time {
  display: block;
  font-weight: 700;
  opacity: 0.8;
}

.events-cal__chip-title {
  /* Two lines then ellipsis: a long title must not stretch the whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE EVENT  (/event/{slug}/)

   One template renders both supplied designs; sections hide when
   their fields are empty. Prefix `ev-` throughout so nothing here
   collides with the listing's `events-` classes.

   The hero is a dark band containing NO light cards, so its
   descendant colour rules are safe to scope to .ev-hero — unlike
   the listing hero, which holds a white spotlight panel.
   ═══════════════════════════════════════════════════════════════ */

.event-detail {
  /* Solid, not alpha: the hero curve is filled with this same colour, and a
     translucent value would let the hero image show through the curve. */
  background: hsl(var(--surface));
}

/* ── Shared section furniture ── */
.ev-eyebrow {
  margin: 0 0 6px;
  color: hsl(var(--accent));
  font: 700 11.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ev-h2 {
  margin: 0 0 20px;
  color: hsl(var(--primary));
  font: 600 clamp(1.45rem, 2.4vw, 1.9rem)/1.2 var(--font-sans);
  letter-spacing: -0.02em;
}

.ev-section {
  margin-bottom: 44px;
}

.ev-section:last-child {
  margin-bottom: 0;
}

.ev-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font: 600 14.5px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}

.ev-btn .fa {
  font-size: 13px;
}

.ev-btn--primary {
  background: hsl(var(--accent));
  color: #fff;
}

.ev-btn--primary:hover {
  background: hsl(var(--accent));
  color: #fff;
  text-decoration: none;
  filter: brightness(1.1);
}

/* "Add to calendar" carries a green outline in the design; "Get directions"
   a neutral one. Two variants rather than one, so the secondary action reads
   as secondary. */
.ev-btn--outline-accent {
  background: hsl(var(--card));
  color: hsl(var(--primary));
  border-color: hsl(var(--accent) / 0.55);
}

.ev-btn--outline-accent:hover {
  color: hsl(var(--primary));
  text-decoration: none;
  background: hsl(var(--accent) / 0.07);
  border-color: hsl(var(--accent));
}

.ev-btn--outline {
  background: hsl(var(--card));
  color: hsl(var(--primary));
  border-color: hsl(var(--border));
}

.ev-btn--outline:hover {
  color: hsl(var(--primary));
  text-decoration: none;
  background: hsl(var(--surface));
  border-color: hsl(var(--primary) / 0.3);
}

.ev-btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
}

.ev-btn:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

/* ═══════════════ HERO ═══════════════ */

.ev-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  /* Bottom padding clears the 80px curve so content never sits under it. */
  padding: 30px var(--ev-gutter) 104px;
  display: grid;
  align-content: center;
  background: hsl(var(--primary));
}

/* SVG divider, matching the ip-hero / ps-hero pattern. currentColor is the
   page background, so the curve reads as the section below cutting upward. */
.ev-hero__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  line-height: 0;
  color: hsl(var(--surface));
  pointer-events: none;
}

.ev-hero__curve svg {
  display: block;
  width: 100%;
  height: 80px;
}

.ev-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Left-heavy so the headline stays legible while the photograph still reads
   on the right, as in the designs. */
.ev-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      hsl(216 60% 12% / 0.93) 0%,
      hsl(216 55% 14% / 0.82) 45%,
      hsl(216 50% 18% / 0.45) 100%);
}

.ev-hero__inner {
  position: relative;
  max-width: 660px;
}

/* Breadcrumb — every anchor declares :hover colour (Astra's a:hover wins otherwise). */
.ev-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: hsl(0 0% 100% / 0.6);
}

.ev-crumb a {
  color: hsl(0 0% 100% / 0.6);
}

.ev-crumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.ev-crumb .fa {
  font-size: 8px;
  opacity: 0.5;
}

.ev-crumb span[aria-current] {
  color: #fff;
}

/* ── Hero pills ── */
.ev-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 13px;
  border: 1px solid hsl(0 0% 100% / 0.4);
  border-radius: 9999px;
  color: #fff;
  font: 600 11.5px/1 var(--font-sans);
  white-space: nowrap;
}

.ev-pill--solid {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
}

.ev-pill--muted {
  background: hsl(0 0% 100% / 0.12);
  border-color: transparent;
  color: hsl(0 0% 100% / 0.8);
}

.ev-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.ev-hero__title {
  margin: 0;
  color: #fff;
  font: 600 clamp(2rem, 4vw, 2.9rem)/1.12 var(--font-sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ev-hero__lead {
  max-width: 34rem;
  margin: 16px 0 0;
  color: hsl(0 0% 100% / 0.82);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ═══════════════ BODY LAYOUT ═══════════════ */

.ev-body {
  padding: 44px var(--ev-gutter) 56px;
}

.ev-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 52px;
  align-items: start;
}

.ev-prose p {
  margin: 0 0 14px;
  color: hsl(var(--muted-foreground));
  font-size: 14.5px;
  line-height: 1.75;
}

.ev-prose p:last-child {
  margin-bottom: 0;
}

.ev-prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ev-prose a:hover {
  color: hsl(var(--accent));
}

/* ── Shared white panel ── */
.ev-panel {
  padding: 22px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
}

.ev-panel--flush {
  padding: 0;
  overflow: hidden;
}

.ev-panel__title {
  margin: 0 0 14px;
  color: hsl(var(--primary));
  font: 600 16px/1.3 var(--font-sans);
}

/* ═══════════════ WHAT TO EXPECT ═══════════════ */

.ev-expect {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ev-expect__card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
}

.ev-expect__card h3 {
  margin: 0 0 7px;
  color: hsl(var(--primary));
  font: 600 14.5px/1.3 var(--font-sans);
}

.ev-expect__card p {
  margin: 0;
  max-width: 26ch;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.6;
}

/* Oversized, very faint glyph in the corner — decorative, so it is both
   aria-hidden in the markup and unselectable here. */
.ev-expect__icon {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: hsl(var(--primary) / 0.1);
  font-size: 42px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ═══════════════ SCHEDULE ═══════════════ */

.ev-sched {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  overflow: hidden;
}

.ev-sched__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 22px;
  border-top: 1px solid hsl(var(--border));
}

.ev-sched__row:first-child {
  border-top: 0;
}

.ev-sched__time {
  color: hsl(var(--accent));
  font: 700 11.5px/1.5 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ev-sched__body h3 {
  margin: 0 0 4px;
  color: hsl(var(--primary));
  font: 600 14px/1.35 var(--font-sans);
}

.ev-sched__body p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.6;
}

/* ═══════════════ PEOPLE ═══════════════ */

.ev-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
}

.ev-person {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ev-person__photo {
  flex: 0 0 auto;
  width: 76px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
  background: hsl(var(--primary-light));
}

.ev-person__photo--empty {
  display: grid;
  place-items: center;
  color: hsl(var(--primary) / 0.3);
  font-size: 26px;
}

.ev-person__body h3 {
  margin: 0 0 2px;
  color: hsl(var(--primary));
  font: 600 14px/1.3 var(--font-sans);
}

.ev-person__body h3 a {
  color: hsl(var(--primary));
}

.ev-person__body h3 a:hover {
  color: hsl(var(--accent));
}

.ev-person__role {
  margin: 0 0 7px;
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  line-height: 1.4;
}

.ev-person__note {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.6;
}

/* ═══════════════ COST ═══════════════ */

.ev-costs {
  margin: 0;
}

.ev-costs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid hsl(var(--border));
}

.ev-costs__row:first-child {
  border-top: 0;
}

.ev-costs dt {
  color: hsl(var(--muted-foreground));
  font-size: 13.5px;
  line-height: 1.5;
}

.ev-costs dd {
  margin: 0;
  color: hsl(var(--primary));
  font: 600 13px/1.4 var(--font-sans);
  text-align: right;
  white-space: nowrap;
}

.ev-costs dd.is-free {
  color: hsl(var(--accent));
}

.ev-costs__note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  line-height: 1.65;
}

/* ═══════════════ LOCATION ═══════════════ */

.ev-loc__media {
  position: relative;
}

.ev-loc__map {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  /* The embed renders its own light chrome; this keeps it from clashing with
     the panel's rounded top corners. */
  background: hsl(var(--muted));
}

.ev-loc__pin {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 36px);
  padding: 11px 16px;
  border-radius: 10px;
  /* Opaque, not translucent: map tiles behind a 96% card make the address
     hard to read wherever a road happens to run. */
  background: hsl(var(--card));
  box-shadow: var(--shadow-md);
}

.ev-loc__pin-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid hsl(var(--border));
  color: hsl(var(--primary));
  font: 600 12.5px/1 var(--font-sans);
  white-space: nowrap;
}

.ev-loc__pin-go:hover {
  color: hsl(var(--accent));
}

.ev-loc__pin .fa {
  margin-top: 2px;
  color: hsl(var(--destructive));
  font-size: 13px;
}

.ev-loc__pin b {
  display: block;
  color: hsl(var(--primary));
  font: 600 13.5px/1.3 var(--font-sans);
}

.ev-loc__pin span {
  display: block;
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.ev-loc__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 22px;
}

.ev-loc__notes h3 {
  margin: 0 0 6px;
  color: hsl(var(--primary));
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ev-loc__notes p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  line-height: 1.65;
}

/* ═══════════════ GALLERY ═══════════════ */

.ev-toggle {
  display: flex;
  padding: 3px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--card));
}

.ev-toggle button {
  padding: 7px 16px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: hsl(var(--muted-foreground));
  font: 600 12.5px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.ev-toggle button:hover {
  color: hsl(var(--primary));
}

.ev-toggle button.is-active {
  background: hsl(var(--accent));
  color: #fff;
}

/* Same trap as .events-results__meta: `display: grid` beats the UA
   stylesheet's [hidden]{display:none}, so the Images/Video tabs would set the
   attribute and nothing would happen. */
.ev-gallery[hidden] {
  display: none;
}

.ev-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.ev-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  background: hsl(var(--primary-light));
}

.ev-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ev-gallery__item:hover img {
  transform: scale(1.04);
}

.ev-video__frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: hsl(var(--primary));
}

.ev-video__frame iframe,
.ev-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════ TAGS ═══════════════ */

.ev-tags {
  padding-top: 28px;
  border-top: 1px solid hsl(var(--border));
}

.ev-tags__list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ev-tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font: 500 12.5px/1 var(--font-sans);
}

.ev-tag:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary-light));
}

/* ═══════════════ SIDEBAR ═══════════════ */

.ev-side {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 18px;
}

.ev-card {
  padding: 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
}

.ev-when {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.ev-when__date {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  padding: 8px 0;
  border-radius: 10px;
  background: hsl(var(--primary-light));
  text-align: center;
}

.ev-when__date span {
  color: hsl(var(--accent));
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ev-when__date b {
  margin-top: 3px;
  color: hsl(var(--primary));
  font: 600 22px/1 var(--font-sans);
}

.ev-when b {
  display: block;
  color: hsl(var(--primary));
  font: 600 14.5px/1.3 var(--font-sans);
}

.ev-when > div > span {
  display: block;
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
}

.ev-card__actions {
  display: grid;
  gap: 9px;
}

.ev-card__actions .ev-btn {
  width: 100%;
}

.ev-card__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: hsl(var(--surface));
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.5;
}

.ev-card__note .fa {
  margin-top: 1px;
  color: hsl(var(--accent));
  font-size: 13px;
}

.ev-facts {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid hsl(var(--border));
  list-style: none;
  display: grid;
  gap: 11px;
}

.ev-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 1.45;
}

.ev-facts .fa {
  flex: 0 0 14px;
  margin-top: 1px;
  color: hsl(var(--primary) / 0.55);
  font-size: 13px;
}

/* ── Share ── */
.ev-share__row {
  display: flex;
  gap: 9px;
  margin-top: 4px;
}

.ev-share__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--card));
  color: hsl(var(--primary));
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.ev-share__btn svg {
  display: block;
}

.ev-share__btn:hover {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}

.ev-share__toast:not(:empty) {
  display: inline-block;
  margin-top: 8px;
  color: hsl(var(--accent));
  font: 600 12px/1 var(--font-sans);
}

/* ── Contact card ── */
.ev-contact {
  padding: 18px 20px;
  border-radius: 12px;
  background: hsl(var(--primary));
}

.ev-contact__eyebrow {
  margin: 0 0 8px;
  color: hsl(var(--primary-tint));
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ev-contact__body {
  margin: 0 0 14px;
  color: hsl(0 0% 100% / 0.85);
  font-size: 13px;
  line-height: 1.6;
}

.ev-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  border-bottom: 1px solid hsl(0 0% 100% / 0.35);
  color: #fff;
  font: 600 14px/1 var(--font-sans);
}

.ev-contact__phone:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ═══════════════ REGISTRATION ═══════════════ */

.ev-register {
  padding: 0 var(--ev-gutter) 56px;
}

.ev-register__inner {
  max-width: 720px;
  padding: 30px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  /* Offset so the sticky header doesn't cover the heading when the sidebar's
     Register button jumps here. */
  scroll-margin-top: 100px;
}

.ev-register h2 {
  margin: 0 0 8px;
  color: hsl(var(--primary));
  font: 600 22px/1.25 var(--font-sans);
}

.ev-register > .ev-register__inner > p {
  margin: 0 0 20px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  line-height: 1.6;
}

.ev-register__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

/* ── Registration form ──────────────────────────────────────────
   Shared by the built-in form and the embedded WPForms one, so the two
   registration modes don't look like different websites. */
.event-reg__field {
  margin: 0 0 14px;
}

.event-reg__field label {
  display: block;
  margin-bottom: 5px;
  color: hsl(var(--primary));
  font: 600 13px/1 var(--font-sans);
}

.event-reg__field label span {
  color: hsl(var(--destructive));
}

.event-reg__field input,
.event-reg__field select,
.event-reg__field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: 400 14px/1.4 var(--font-sans);
}

.event-reg__field textarea {
  resize: vertical;
}

.event-reg__field input:focus,
.event-reg__field select:focus,
.event-reg__field textarea:focus {
  outline: none;
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.16);
}

.event-reg__field input.has-error {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive-soft));
}

.event-reg__error:not(:empty) {
  display: block;
  margin-top: 5px;
  color: hsl(var(--destructive));
  font-size: 12.5px;
}

/* Off-canvas rather than display:none, because some bots skip hidden inputs —
   and never reachable by keyboard or screen reader. */
.event-reg__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.event-reg__submit {
  margin-top: 6px;
}

.event-reg__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.event-reg__status:empty {
  display: none;
}

.event-reg__status {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.event-reg__status.is-pending {
  color: hsl(var(--muted-foreground));
}

.event-reg__status.is-error {
  color: hsl(var(--destructive));
}

.event-reg__privacy {
  margin: 14px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.55;
}

.event-reg__privacy a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.event-reg__privacy a:hover {
  color: hsl(var(--accent));
}

/* Replaces the form on success — see event-registration.js. */
.event-reg__done {
  padding: 8px 0;
  text-align: center;
}

.event-reg__done:focus {
  outline: none;
}

.event-reg__done .fa {
  display: block;
  margin-bottom: 10px;
  color: hsl(var(--accent));
  font-size: 30px;
}

.event-reg__done b {
  display: block;
  margin-bottom: 6px;
  color: hsl(var(--primary));
  font: 600 17px/1.3 var(--font-sans);
}

.event-reg__done p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  line-height: 1.6;
}

/* Editor-only diagnostic when a WPForms form can't be embedded. */
.event-reg__adminnote {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid hsl(var(--warning));
  border-radius: 0 6px 6px 0;
  background: hsl(var(--warning) / 0.1);
  color: hsl(var(--foreground));
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Embedded WPForms form ──────────────────────────────────────
   WPForms ships its own base styles; these only pull its fields into line
   with the panel. Scoped to .event-reg--wpforms so nothing leaks onto
   other WPForms forms on the site. */
.event-reg--wpforms .wpforms-container,
.event-reg--wpforms .wpforms-form {
  margin: 0;
  max-width: none;
}

.event-reg--wpforms .wpforms-field {
  padding: 0 0 14px;
}

.event-reg--wpforms .wpforms-field-label {
  margin-bottom: 5px;
  color: hsl(var(--primary));
  font: 600 13px/1 var(--font-sans);
}

.event-reg--wpforms .wpforms-field-description {
  margin-top: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.5;
}

.event-reg--wpforms input[type="text"],
.event-reg--wpforms input[type="email"],
.event-reg--wpforms input[type="tel"],
.event-reg--wpforms input[type="number"],
.event-reg--wpforms select,
.event-reg--wpforms textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font: 400 14px/1.4 var(--font-sans);
}

.event-reg--wpforms input:focus,
.event-reg--wpforms select:focus,
.event-reg--wpforms textarea:focus {
  outline: none;
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.16);
}

.event-reg--wpforms .wpforms-submit {
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 9999px;
  background: hsl(var(--accent));
  color: #fff;
  font: 600 14.5px/1 var(--font-sans);
  cursor: pointer;
  transition: filter 0.18s;
}

.event-reg--wpforms .wpforms-submit:hover {
  color: #fff;
  filter: brightness(1.1);
}

.event-reg--wpforms .wpforms-error,
.event-reg--wpforms label.wpforms-error {
  color: hsl(var(--destructive));
  font-size: 12.5px;
}

.event-reg--wpforms .wpforms-confirmation-container,
.event-reg--wpforms .wpforms-confirmation-container-full {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid hsl(var(--accent));
  border-radius: 0 8px 8px 0;
  background: hsl(var(--surface));
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  line-height: 1.6;
}

/* ═══════════════ RELATED ═══════════════ */

.ev-related {
  padding: 48px var(--ev-gutter) 60px;
  background: hsl(var(--surface));
}

.ev-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.ev-related__head .ev-h2 {
  margin: 0;
}

.ev-related__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsl(var(--primary));
  font: 600 13.5px/1 var(--font-sans);
}

.ev-related__all:hover {
  color: hsl(var(--accent));
}

.ev-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Compact card variant used only here. */
.event-card--compact .event-card__media {
  height: 132px;
}

.event-card--compact .event-card__body {
  padding: 14px 16px 18px;
}

.event-card--compact .event-card__title {
  margin: 10px 0 0;
  font-size: 15px;
}

.event-card--compact .event-card__desc {
  font-size: 12.5px;
}

.event-card__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.event-tag--plain {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* ═══════════════ STICKY BAR ═══════════════ */

.ev-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px hsl(216 100% 22% / 0.08);
}

.ev-sticky[hidden] {
  display: none;
}

.ev-sticky__inner {
  padding: 10px var(--ev-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ev-sticky__text b {
  display: block;
  color: hsl(var(--primary));
  font: 600 14px/1.3 var(--font-sans);
}

.ev-sticky__text span {
  display: block;
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.ev-sticky__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}


/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 1100px) {
  .events-grid,
  .ev-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sidebar drops below the article; it stops being sticky at the same time,
     otherwise it would pin itself over the content it now follows. */
  .ev-body__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .ev-side {
    position: static;
    max-width: 420px;
  }

  .ev-loc__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .events-browser__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-filters {
    position: static;
  }

}

@media (max-width: 860px) {
  .ev-expect,
  .ev-people,
  .ev-register__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ev-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Time above the entry rather than a 150px column that would squeeze the
     title to a few words per line. */
  .ev-sched__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ev-loc__notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .ev-sticky__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ev-sticky__actions {
    justify-content: stretch;
  }

  .ev-sticky__actions .ev-btn {
    flex: 1;
  }

  /* The title line is redundant once the bar stacks — the page heading is
     right there — and it costs a third of a phone screen. */
  .ev-sticky__text span {
    display: none;
  }
}

@media (max-width: 680px) {
  .ev-hero {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 34px;
  }

  .ev-register__inner {
    padding: 20px;
  }

  .ev-side {
    max-width: none;
  }

  .ev-loc__map {
    height: 210px;
  }

  /* Stacks under the map on a phone, where overlaying it would cover most of
     the visible area. */
  .ev-loc__pin {
    position: static;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid hsl(var(--border));
  }

  .ev-loc__pin-go {
    margin-left: auto;
  }

  .ev-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-hero {
    min-height: 320px;
  }

  .events-hero__slide {
    padding-top: 36px;
    /* Room for the dots, which sit over the slide's bottom-right corner. */
    padding-bottom: 56px;
  }

  .events-cats__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }

  /* The label costs a third of a phone screen and the pills say what they do.
     The <nav> keeps aria-label="Filter by category", so the accessible name
     survives. */
  .events-cats__label {
    display: none;
  }

  .events-browser {
    padding-top: 44px;
    padding-bottom: 64px;
  }

  .events-browser__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .events-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-results__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .events-cal__cell {
    height: 88px;
  }
}

/* Honour a reduced-motion preference: the hover lift and smooth scroll are
   decoration, and vestibular disorders make them genuinely unpleasant. */
@media (prefers-reduced-motion: reduce) {

  .event-card,
  .events-cal__chip,
  .events-hero__dot,
  .events-hero__go,
  .ev-gallery__item img {
    transition: none;
  }

  .ev-gallery__item:hover img {
    transform: none;
  }

  .event-card:hover {
    transform: none;
  }

  .events-hero__dot.is-active,
  .events-hero__go:hover {
    transform: none;
  }

  /* Switch slides instantly. Autoplay is disabled outright in events-hero.js
     under the same preference, so this only affects the crossfade when
     someone presses a dot. */
  .events-hero__slide {
    transition: none;
  }
}