/* ==========================================================================
   EVENTS LISTING — assets/css/pages/events.css
   Loaded on the events archive and on event-category archives.

   The rows themselves (.ev-list, .ev-row, .ev-date …) are in components.css,
   shared with the homepage. Only what the full archive needs is here.
   ========================================================================== */

/* --- Year markers ------------------------------------------------------- */
/* The archive runs back several years. Without these the reader has to work
   the year out from the day-and-month blocks, which don't carry one. */

.ev-year {
  margin: 0;
  padding: 30px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* The first marker sits directly under the column header, so it needs less
   room above it than the ones that separate groups. */
.ev-rows .ev-year:first-child { padding-top: 18px; }

/* --- Rows on the archive ------------------------------------------------ */
/* Twenty rows rather than three, so they are a little tighter than on the
   homepage, and the location column narrower — only a third of events have a
   venue recorded, and a wide empty column reads as a mistake. */

.view-events .ev-head,
.view-events .ev-row { grid-template-columns: 130px 1fr 190px 116px; }

.view-events .ev-row { padding: 18px 0; }

.view-events .ev-title { font-size: 16.5px; }

@media (max-width: 900px) {
  .view-events .ev-head,
  .view-events .ev-row { grid-template-columns: 88px 1fr; }
  .view-events .ev-row { padding: 16px 0; }
  .ev-year { padding: 24px 0 8px; }
}