/* ============================================================
   PAST EVENTS  —  /events/

   The archive of closed Happening Now events. Spec: docs/EVENTS-ARCHIVE.md.

   EVERY CLASS IS PREFIXED `ev-`. juq.css owns a pile of short global names
   (.up, .card, .chip, .dot) and an unprefixed feature class silently inherits
   whatever they say. The prefix was checked as free before it was used.
   ============================================================ */

.ev-page { padding-bottom: var(--s-9); }

.ev-note {
  font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted);
  margin: var(--s-5) 0 var(--s-6);
}

.ev-list { display: flex; flex-direction: column; gap: var(--s-5); }

/* A ROW RATHER THAN A CARD GRID. These are records, read top to bottom, and a
   grid of big cards would say "here are things to do" about a list of things
   that are over. */
.ev-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-6);
  background: var(--surface); border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius); padding: var(--s-6);
}
.ev-row:hover { border-color: var(--accent); }

/* The deep-linked one. A left edge rather than a glow: it has to survive every
   skin, including the pale ones where a soft highlight disappears. */
.ev-row.is-picked { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }

.ev-icon {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.ev-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-emoji { font-size: var(--t-h1); line-height: 1; }

.ev-body { min-width: 0; }
.ev-kind {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-1);
}
.ev-title {
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
/* The accent runs the admin authors with *asterisks*, same as the homepage. */
.ev-title em { font-style: italic; color: var(--accent); }
.ev-blurb { margin: var(--s-2) 0 0; line-height: 1.5; color: var(--ink); }
.ev-when {
  font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted);
  margin-top: var(--s-3);
}

.ev-act { flex: none; }
.ev-go { white-space: nowrap; }

.ev-empty { padding: var(--s-9) 0; text-align: center; }

/* ---------- narrow ----------
   The action drops under the text rather than being squeezed beside it: at
   phone width a nowrap button in a third column is what pushes a title into
   one word per line. */
@media (max-width: 640px) {
  .ev-row { grid-template-columns: auto 1fr; gap: var(--s-5); }
  .ev-act { grid-column: 1 / -1; }
  .ev-go { width: 100%; }
}