/* S4 — /events and the event pages (src/events/index.njk, src/events/event.njk, and the
   includes event-top.njk and ev-row.njk). Design: design/event-pages/SPEC.md, whose
   events-v2.css is the rules below from "Status chip" on. Built only from the site's tokens,
   on top of its components (matchup card, signup, buttons, empty state). Prefix: ev-. */

.events-page,
.event-page { position: relative; isolation: isolate; overflow: clip; }

/* Ghost slash behind the heading, the same one as /register's and /waiver's. */
.events-page__slash {
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 28%;
  width: 138%;
  max-width: none;
  height: auto;
  aspect-ratio: 1000 / 236;
  fill: var(--red);
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- /events heading, and the "All events" link on an event's page ---------- */
.events-hero { display: flex; flex-direction: column; gap: 16px; padding-block: 28px 40px; }
.events-hero__title { font-size: var(--fs-h2); }
.event-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin: -8px 0 -4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}
.event-back:hover { color: var(--text); opacity: 1; }
@media (min-width: 700px) {
  .events-hero { gap: 20px; padding-block: 48px 56px; }
}
@media (min-width: 1100px) {
  .events-hero { padding-top: 64px; }
}

/* ---------- Status chip ---------- */
.ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ev-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.ev-chip--open   { background: var(--red); color: var(--white); }
.ev-chip--open::before { content: ""; width: 6px; height: 6px; background: var(--white); }
.ev-chip--soon,
.ev-chip--tba    { box-shadow: inset 0 0 0 1.5px var(--line-button); color: var(--text); }
.ev-chip--closed { background: var(--line-strong); color: var(--text-muted); }
.ev-chip--past   { background: var(--line); color: var(--text-subtle); }

/* ---------- Top of an event page (and the featured event on /events) ---------- */
.ev-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "card" "body";
  border-bottom: 1px solid var(--line);
}
.ev-top__head { grid-area: head; display: flex; flex-direction: column; gap: 14px; padding: 20px var(--gutter) 24px; }
.ev-top__body { grid-area: body; display: flex; flex-direction: column; gap: 24px; padding: 24px var(--gutter) 36px; }
.ev-top__card { grid-area: card; aspect-ratio: 390 / 240; }
.ev-top--panel { background: var(--panel); }
.ev-title { font-size: var(--fs-h2-sm); }
.ev-title a { text-decoration: none; }
.ev-title a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 4px; text-underline-offset: 8px; }

/* Date / time / venue */
.ev-keyfacts { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.ev-keyfacts > div {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-strong);
}
.ev-keyfacts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.ev-keyfacts dd { font-size: 17px; font-weight: 700; line-height: 1.35; }
.ev-keyfacts dd span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-muted); }
.ev-keyfacts .text-link { font-size: 14px; font-weight: 700; }

/* Register / tickets / the line under them */
.ev-cta { display: flex; flex-direction: column; gap: 12px; }
.ev-cta__buttons { display: flex; flex-direction: column; gap: 10px; }
.ev-cta__buttons .btn { width: 100%; }
.ev-cta__note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.ev-cta__note svg { flex: none; margin-top: 2px; }
.ev-cta__note strong { color: var(--text); font-weight: 700; }
.ev-cta__note--urgent strong { color: var(--red-text); }
.ev-cta__note .text-link { display: inline; min-height: 0; font-size: inherit; } /* the email address in "Questions?" */
.ev-cta .signup + .ev-cta__buttons { margin-top: 4px; }
.ev .btn > svg { flex: none; margin-left: 6px; } /* the "opens elsewhere" arrow in Get tickets / Open in Maps */

/* ---------- About this event + the info panel ---------- */
.ev-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: var(--section-y); }
.ev-details__copy { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.ev-details__copy .body-text { font-size: var(--fs-body); line-height: 1.65; color: var(--text-muted); }
.ev-h2 { font-size: var(--fs-row); letter-spacing: -0.03em; }
.ev-info { background: var(--panel); border-top: 3px solid var(--red); }
.ev-info dl > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line-strong); }
.ev-info dl > div:last-child { border-bottom: 0; }
.ev-info dt { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); }
.ev-info dd { font-size: 16px; font-weight: 700; line-height: 1.4; }
.ev-info dd span { display: block; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.ev-info .btn { margin-top: 10px; align-self: flex-start; }
.ev-tiers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

/* ---------- The venue: layout picture, "What to expect", address ---------- */
.ev-venue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: var(--section-y) 0; }
.ev-venue__head { display: flex; flex-direction: column; gap: 10px; }
.ev-venue__figure { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ev-venue__img { display: block; width: 100%; height: auto; }
.ev-venue__caption { font-size: 14px; line-height: 1.45; color: var(--text-subtle); } /* the hint style (.field__hint) */
.ev-venue__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--text-subtle); padding: 16px 20px 4px; }
.ev-venue__list { margin: 0; padding: 0; list-style: none; }
.ev-venue__list li { padding: 12px 20px; border-bottom: 1px solid var(--line-strong); font-size: 16px; font-weight: 700; line-height: 1.4; }
.ev-venue__address { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; }
.ev-venue__address > p:not(.ev-venue__label) { padding-inline: 20px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ev-venue__address span { display: block; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.ev-venue__address .btn { margin-inline: 20px; }

/* ---------- Results (past events) ---------- */
.ev-results { padding-block: var(--section-y) 0; display: flex; flex-direction: column; gap: 16px; }
.ev-results .empty-state { margin-top: 8px; }

/* ---------- Get event updates band ---------- */
.ev-updates { background: var(--panel); border-block: 1px solid var(--line); }
.ev-updates__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 48px; }
.ev-updates__copy { display: flex; flex-direction: column; gap: 12px; }
.ev-updates__copy p:last-child { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Event rows with a date block (/events, "More events") ---------- */
.ev-section { padding-block: var(--section-y); }
.ev-section + .ev-section,
.ev-details + .ev-section,     /* "More events" / "Next up" straight after the About section */
.ev-section--first { padding-top: 0; } /* /events with nothing upcoming: straight under the heading */
.ev-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ev-list { border-top: 1px solid var(--line-strong); }
.ev-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "date text" "action action";
  gap: 16px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-strong);
}
.ev-date {
  grid-area: date;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 76px;
  box-shadow: inset 0 0 0 1.5px var(--line-button);
  text-align: center;
}
.ev-date__month { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-text); }
.ev-date__day { font-size: 30px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.ev-date__dow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.ev-date--tba .ev-date__day { font-size: 19px; letter-spacing: 0; }
.ev-date--past { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ev-date--past .ev-date__month { color: var(--text-subtle); }
.ev-date--past .ev-date__day { color: var(--text-muted); }
.ev-row__text { grid-area: text; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev-row__title { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }
.ev-row__title a { text-decoration: none; }
.ev-row__title a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ev-row__meta { font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.ev-row__summary { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.ev-row__action { grid-area: action; display: flex; flex-direction: column; gap: 8px; }
.ev-row__action .btn { width: 100%; }
.ev-row__action small { font-size: 13px; line-height: 1.4; color: var(--text-subtle); }
.ev-row--past { padding-block: 18px; }
.ev-row--past .ev-row__title { font-size: clamp(20px, 1.8vw, 26px); color: var(--text-muted); }

/* ---------- Phone: sticky Register bar ---------- */
.ev-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 20px;
  background: rgba(10, 10, 12, 0.96);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
}
.ev-sticky__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-sticky__name { overflow: hidden; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.ev-sticky__sub { font-size: 12px; color: var(--text-subtle); }
.ev-sticky .btn { flex: none; height: 48px; padding: 0 18px; font-size: 13px; }
/* Out of sight until event-sticky.js adds .is-visible (so never, without JavaScript). The
   page keeps room for it at the bottom, so it can't cover the end of the content. */
.ev-sticky { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.ev-sticky.is-visible { visibility: visible; opacity: 1; transition: opacity 0.2s ease; }
.ev.has-sticky { padding-bottom: var(--sticky-height, 72px); }
@media (prefers-reduced-motion: reduce) {
  .ev-sticky,
  .ev-sticky.is-visible { transition: none; }
}

@media (min-width: 700px) {
  .ev-top__head { gap: 18px; padding: 32px var(--gutter) 32px; }
  .ev-top__body { padding: 32px var(--gutter) 56px; }
  .ev-top__card { aspect-ratio: 16 / 9; }
  .ev-keyfacts { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.35fr); border-bottom: 1px solid var(--line-strong); }
  .ev-keyfacts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; border-bottom: 0; border-left: 1px solid var(--line-strong); }
  .ev-keyfacts > div:first-child { padding-left: 0; border-left: 0; }
  .ev-keyfacts dt { font-size: 12px; }
  .ev-cta__buttons { flex-direction: row; flex-wrap: wrap; }
  .ev-cta__buttons .btn { width: auto; }
  .ev-updates__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 48px; padding-block: 64px; }
  .ev-row { grid-template-columns: 88px minmax(0, 1fr) 220px; grid-template-areas: "date text action"; gap: 28px; align-items: center; padding: 28px 0; }
  .ev-date { height: 96px; gap: 4px; }
  .ev-date__day { font-size: 40px; }
  .ev-date--tba .ev-date__day { font-size: 24px; }
  .ev-row__action { align-items: flex-end; text-align: right; }
  .ev-row__action .btn { width: auto; }
  .ev-row--past { grid-template-columns: 88px minmax(0, 1fr) 220px; padding-block: 20px; }
  .ev-row--past .ev-date { height: 72px; }
  .ev-row--past .ev-date__day { font-size: 30px; }
  .ev-sticky { display: none; }
  .ev.has-sticky { padding-bottom: 0; }
}
@media (min-width: 1100px) {
  .ev-top {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas: "head card" "body card";
    grid-template-rows: auto 1fr;
  }
  .ev-top__head { padding: 48px 56px 32px var(--gutter); }
  .ev-top__body { padding: 0 56px 72px var(--gutter); }
  .ev-top__card { aspect-ratio: auto; min-height: 640px; }
  .ev-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .ev-info { align-self: start; }
  /* The picture in 7 of 12 columns and the panel in 5, like About; the panel alone keeps its width. */
  .ev-venue { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 28px; }
  .ev-venue--no-image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ev-venue__head { grid-column: 1 / -1; }
}