/* ==========================================================================
   EVENTS TABLE

   Five facts per event and a reader comparing them, which is what a table is
   for. Rules rather than fills, like the rest of the site.
   ========================================================================== */
/* THE SCROLLER HAS TO CONTAIN ITS PAINT, not just scroll.

   overflow-x:auto alone was not enough. The wrapper scrolled correctly, the
   table was clipped to it, and nothing outside the wrapper passed the
   viewport, but the 828px table still widened the DOCUMENT: on a 390px phone
   the whole events page scrolled 363px sideways. Verified by actually
   scrolling it, not by reading scrollWidth.

   contain:paint stops that propagating without touching layout.
   table-layout:fixed also fixed it but is the wrong trade: it would force the
   columns equal and the Event column needs to be the wide one.

   overscroll-behavior stops a sideways swipe on the table turning into a
   browser back gesture, which is the other half of making this usable on a
   phone. */
.ev-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  contain: paint;
  margin-bottom: var(--s-6);
}

.ev-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.ev-table th,
.ev-table td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
}
.ev-table thead th {
  border-bottom: 1px solid var(--c-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}

/* The event cell is the row's heading and carries the description under the
   name, so the other four columns stay narrow enough to scan. */
.ev-table tbody th { font-weight: 400; min-width: 22rem; }
.ev-table__name {
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.1rem;
  line-height: 1.24;
  letter-spacing: -0.014em;
  color: var(--c-ink);
}
.ev-table__what {
  display: block;
  margin-top: var(--s-2);
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.ev-table td { font-size: var(--fs-sm); color: var(--c-ink-2); white-space: nowrap; }
.ev-table td a { color: var(--c-accent); white-space: nowrap; }
.ev-table td a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .ev-table tbody th { min-width: 16rem; }
  .ev-table__what { font-size: var(--fs-xs); }
}