/* ===============================================================
   EVENT SINGLE  —  the event template (2026-09-04)

   The image on an event is a SOCIAL POSTER, not a banner: the three published
   events are 1080x1350 (4:5) and 1080x1080 (1:1), Instagram formats with the
   title, date and speakers set INTO the artwork. Cropping one to a wide hero
   would cut that text off. So the poster is shown whole, at its own ratio,
   and never given an aspect-ratio or object-fit.
   =============================================================== */

.jrs-eventhead__inner {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
  max-width: var(--width-content);
  margin-inline: auto;
  width: 100%;
}

/* No cover on a record: the column collapses rather than leaving a hole. */
.jrs-eventhead__inner:not(:has(.jrs-poster)) { grid-template-columns: minmax(0, 1fr); }

/* THE POSTER — whole, never cropped. No aspect-ratio and no object-fit, so a
   4:5 and a 1:1 both render at their own proportions. */
.jrs-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--box-quiet);
}

.jrs-eventhead__body { align-items: stretch; min-width: 0; }
.jrs-eventhead__body > * { max-width: 100%; }

/* ---------------------------------------------------------------
   STATUS
   Self-contained rather than borrowing the calls' .jrs-status: a past event
   is not a closed call, and one component should not depend on another's
   stylesheet being present. Same two treatments, different names.
   (Worth promoting to the base layer if a third component needs a chip.)
   --------------------------------------------------------------- */
.jrs-evstatus {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  padding: 3px 8px;
}
.jrs-evstatus--upcoming { background: var(--brand); color: var(--on-brand); }
.jrs-evstatus--past {
  background: none;
  border: var(--box-quiet);
  color: var(--neutral-600);
}

/* ---------------------------------------------------------------
   WHEN
   The date is the second thing a reader needs after the title, and the
   editor's own wording carries it (three different formats across three
   records, two of them naming two time zones).
   --------------------------------------------------------------- */
.jrs-event__when {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-head);
  color: var(--brand-deep);
  margin: 0;
}
.jrs-event__when--past {
  font-weight: var(--fw-body);
  color: var(--neutral-600);
}
.jrs-event__speakers {
  font-size: var(--text-meta);
  line-height: 1.6;
  color: var(--neutral-600);
  margin: 0;
}

/* ---------------------------------------------------------------
   SPEAKER BIOGRAPHIES
   Rich text on the record, so it takes the prose scope. The bios run to a
   paragraph each; a rule between them makes the list read as a list.
   --------------------------------------------------------------- */
.jrs-speakers > p {
  padding-bottom: var(--space-s);
  border-bottom: var(--rule-structural);
}
.jrs-speakers > p:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------
   STACKED
   The poster comes FIRST in the markup so it leads on desktop, but on a phone
   the title has to come first — a reader scrolling past a full-width poster
   to find out what the event is has been made to work for it.
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .jrs-eventhead__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .jrs-eventhead__body { order: 1; }
  .jrs-poster { order: 2; max-width: 320px; }
}