/* ===========================================================
   Upcoming Events listing
   Self-contained: loaded AFTER styles.css so the few overrides
   at the bottom win without styles.css needing to be edited.
   Sizing and structure follow the previous listing closely.
   =========================================================== */

.event-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:30px;
}

.event-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so the
   hidden attribute needs restating here or the "show all" toggle does nothing. */
.event-item[hidden]{ display:none }

/* Date chip */
.event-chip{
  display:grid;
  place-content:center;
  justify-items:center;
  width:64px;
  padding:10px 6px;
  border-radius:10px;
  /* Darker than the glass panel it sits on, so the date reads as a distinct
     marker rather than another pane of the same frosted surface. */
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
  line-height:1;
}
.event-chip-day{ font-size:30px; font-weight:600; letter-spacing:.01em }
.event-chip-mon{ font-size:13px; letter-spacing:.08em; opacity:.9; margin-top:7px }

/* Body */
.event-body{ min-width:0 }

.event-title{
  margin:0 0 10px;
  font-size:clamp(17px,2.4vw,20px);
  font-weight:600;
  line-height:1.32;
  text-wrap:balance;
}
.event-title a{ color:#fff; text-decoration:none }
.event-title a:hover,
.event-title a:focus-visible{ text-decoration:underline }

/* Meta rows — dates, times, venue, and the two links all share this list */
.event-meta{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
  font-size:16px;
  line-height:1.42;
  opacity:.95;
}
.event-meta li{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:11px;
  align-items:start;
}
.event-icon{
  width:18px; height:18px;
  margin-top:2px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.8;
}
.event-meta-link a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.event-meta-link a:hover{ text-decoration-thickness:2px }

/* Expandable detail */
.event-toggle{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:11px;
  align-items:center;
  margin-top:13px;
  padding:0;
  background:none;
  border:0;
  color:#fff;
  font:inherit;
  font-size:16px;
  text-align:left;
  cursor:pointer;
  opacity:.95;
}
.event-toggle .event-icon{ margin-top:0; transition:transform .18s ease }
.event-toggle[aria-expanded="true"] .event-icon{ transform:rotate(180deg) }
.event-toggle:hover span{ text-decoration:underline; text-underline-offset:3px }

.event-desc{
  margin-top:10px;
  padding-left:31px;              /* aligns under the label, past the icon column */
  font-size:15px;
  opacity:.88;
  line-height:1.55;
}
.event-desc p{ margin:0 0 6px }
.event-desc p:last-child{ margin-bottom:0 }
.event-address{ opacity:.75 }

/* Artwork variant (SHOW_IMAGES = true in events.js — off by default) */
.event-list--images .event-item{ grid-template-columns:auto 168px 1fr }
.event-list--images .event-figure{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.event-list--images .event-img{
  display:block; width:100%; height:auto;
  aspect-ratio:450 / 200; object-fit:cover;
}

/* Degraded state — always offers a working route to tickets */
.events-fallback{
  display:grid;
  justify-items:center;
  gap:14px;
  padding:22px 8px;
  text-align:center;
}
.events-fallback p{ margin:0; opacity:.92; font-size:16px }
.events-fallback .events-cta{
  display:inline-block;
  padding:10px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid var(--glass-stroke);
  color:#fff;
  text-decoration:none;
  font-size:16px;
}
.events-fallback .events-cta:hover{ background:rgba(255,255,255,.24) }

@media (prefers-reduced-motion:reduce){
  .event-toggle .event-icon{ transition:none }
}

/* Phones — the chip stays a left rail so the dates read as a column.
   It only narrows; it is never moved above the title. */
@media (max-width:520px){
  .event-list--images .event-item{ grid-template-columns:auto 1fr }
  .event-list--images .event-figure{ grid-column:1 / -1; order:2 }
  .event-list--images .event-body{ order:3 }
}
@media (max-width:430px){
  .event-item{ gap:14px }
  .event-chip{ width:54px; padding:8px 4px }
  .event-chip-day{ font-size:25px }
  .event-chip-mon{ font-size:12px; margin-top:6px }
  .event-meta{ gap:4px }
  .event-desc{ padding-left:0 }
}

/* -----------------------------------------------------------
   Overrides of styles.css (which is otherwise left untouched)
   ----------------------------------------------------------- */

/* Roomier than the vendor's frame, but the dashed outline and the
   reserved height are kept — they are part of the current look. */
.embed-wrap{ padding:22px 18px }

/* Inverted: the route to Eventbrite is visible by default and only
   steps back once real listings have rendered. */
.events-more{ display:block }

/* "Show all N dates" — every date is already in the DOM, this only reveals it */
.events-showall{
  display:block;
  width:100%;
  margin-top:26px;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--glass-stroke);
  color:#fff;
  font:inherit;
  font-size:15px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.events-showall:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.4) }
.events-showall:active{ transform:translateY(1px) }