/* ==========================================================================
   events.css
   Styles used only on the Events page (events/index.html).

   Contents
     1. Sections and event list
     2. Text inside an event
     3. Two-column events (text | images)
     4. Images
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sections and event list
   -------------------------------------------------------------------------- */

.ev-list {
  max-width: var(--content-max);
}

.event {
  display: grid;
  gap: 1.25rem;
  padding: var(--entry-space) 0;
  border-bottom: var(--rule);
}

.ev-list > .event:first-child {
  padding-top: .25rem;
}



/* --------------------------------------------------------------------------
   2. Text inside an event
   -------------------------------------------------------------------------- */

.ev-text {
  max-width: var(--measure);
  color: var(--ink);
  overflow-wrap: anywhere;             /* long URLs written out in full */
}

.ev-text strong {
  font-weight: 600;
  color: var(--ink);
}

/* Event heading: the first line of each event uses the shared
   .entry-title style (base.css, section 6). Highlighted words inside it
   take the heading's weight and colour too. */
.entry-title .ev-hl {
  font-weight: inherit;
  color: inherit;
}

/* Highlighted text (red on the old site): semi-bold ink, not blue, so it isn't
   mistaken for a link, and a step below the event heading */
.ev-hl {
  font-weight: 600;
  color: var(--ink);
}

.ev-text ul {
  margin: .5rem 0;
  padding-left: 1.1rem;
}

.ev-text p {
  margin: 0 0 var(--para-space);
}

.ev-text .ev-h {                      /* style: small heading, base.css */
  margin: var(--heading-above) 0 var(--heading-below);
}

/* Banner headings of grouped events (dark grey on the old site) */
.ev-banner {
  justify-self: start;
  padding: .1rem .55rem;               /* same yellow label as on every page */
  font-family: var(--heading);
  font-size: var(--label-size);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  background: var(--highlight);
  border-radius: 2px;
}

.ev-banner .ev-hl,
.ev-banner strong {
  font-weight: 700;
}

.ev-banner h2,
.ev-banner h3,
.ev-banner h4 {
  margin: 0;
  font: inherit;
}

@media (forced-colors: active) {
  .ev-banner {
    border: 1px solid CanvasText;
  }
}


/* --------------------------------------------------------------------------
   3. Two-column events (text | images)
   -------------------------------------------------------------------------- */

.ev-cols {
  display: grid;
  grid-template-columns: minmax(0, var(--text-max)) 15rem;   /* text | images */
  justify-content: space-between;      /* images at the right edge, as on Grants */
  align-items: start;
  gap: 1.25rem 2.5rem;
}

/* Text in both columns (e.g. committees side by side) */
.ev-cols-even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ev-col {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

@media (max-width: 720px) {
  .ev-cols,
  .ev-cols-even {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   4. Images
   -------------------------------------------------------------------------- */

.ev-figure {
  margin: 0;
}

.ev-figure a {
  display: inline-block;
}

.ev-figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: var(--rule);                 /* the same quiet frame on every image */
  border-radius: 2px;
}

/* Beside the text: a contained thumbnail */
.ev-col-media .ev-figure img {
  max-height: 14rem;
}

@media (max-width: 720px) {
  .ev-col-media .ev-figure img {
    max-width: min(100%, 20rem);
  }
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .event {
    break-inside: avoid;
  }

  .ev-banner {
    background: none;
    border: 1px solid #000;
  }
}


/* --------------------------------------------------------------------------
   Past events grouped by year (collapsible blocks from disclosure.css)
   Year shortcuts fill complete rows: 18 years = 9 per row (2 rows) on wide
   screens, 6 per row on tablets, 3 per row on phones.
   If the number of years changes, pick column counts that divide it.
   -------------------------------------------------------------------------- */

.year-jumps {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .year-jumps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .year-jumps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}