/* Compete — the event listing and the per-event detail page. */

/* --- Listing -------------------------------------------------------------- */

.eventlist { display: grid; gap: 0; }
.eventrow {
  display: grid; grid-template-columns: 3.5rem 1fr auto;
  gap: var(--s-5); align-items: start;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--surface-line);
}
.eventlist .eventrow:first-child { border-top: 1px solid var(--surface-line); }
.eventrow__logo {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm);
  object-fit: contain; background: var(--surface-2);
}
.eventrow__logo--none {
  display: grid; place-content: center;
  color: var(--text-lo); font-family: var(--font-mono); font-size: var(--fs-xs);
}
.eventrow__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-lo); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 var(--s-2);
}
.eventrow__title { font-size: var(--fs-h3); margin: 0 0 var(--s-2); }
.eventrow__title a { color: var(--text-hi); text-decoration: none; }
.eventrow__title a:hover { color: var(--y-yellow); }
.eventrow__hook { color: var(--text-mid); margin: 0 0 var(--s-2); max-width: 60ch; }
.eventrow__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); color: var(--text-lo); margin: 0;
}
.eventrow__go { align-self: center; white-space: nowrap; }
.eventrow.is-closed .eventrow__title a { color: var(--text-mid); }

@media (max-width: 46rem) {
  .eventrow { grid-template-columns: 2.5rem 1fr; }
  .eventrow__logo { width: 2.5rem; height: 2.5rem; }
  .eventrow__go { grid-column: 2; justify-self: start; }
}

/* --- Detail page ---------------------------------------------------------- */

.event__head {
  display: flex; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-5); flex-wrap: wrap;
}
.event__logo {
  width: 6rem; height: 6rem; flex: 0 0 auto;
  border-radius: var(--radius); object-fit: contain;
  background: var(--surface-1); padding: var(--s-2);
}
.event__note {
  margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--text-lo); max-width: 56ch;
}

.event__facts {
  margin: 0; display: grid; gap: 0;
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden; align-self: start;
}
.event__facts > div {
  display: grid; gap: var(--s-1);
  padding: var(--s-5); border-bottom: 1px solid var(--surface-line);
}
.event__facts > div:last-child { border-bottom: 0; }
.event__facts dt {
  margin: 0; color: var(--text-lo);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.event__facts dd { margin: 0; color: var(--text-hi); font-size: var(--fs-body-lg); }

.event__prizelist { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.event__prizelist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1);
}
/* Only the first prize gets the yellow. Three glowing rows is a lottery
   advert; one is a highlight. */
.event__prizelist li:first-child { border-color: var(--y-yellow); }
.event__prizelist li:first-child .event__prizeval { color: var(--y-yellow); }
.event__prizerank {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-lo); text-transform: uppercase; letter-spacing: 0.06em;
}
.event__prizeval { font-size: var(--fs-h3); color: var(--text-hi); }

/* The organiser's own copy. Whitelisted tags only — see event_clean_html(). */
.event__body { color: var(--text-mid); font-size: var(--fs-body-lg); line-height: 1.65; max-width: 70ch; }
.event__body p { margin: 0 0 var(--s-5); }
.event__body b, .event__body strong { color: var(--text-hi); }
.event__body ul, .event__body ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); display: grid; gap: var(--s-2); }
.event__body li::marker { color: var(--y-yellow); }
.event__body br { content: ""; display: block; margin-bottom: var(--s-2); }