/* ==========================================================================
   SINGLE EVENT — assets/css/pages/event-single.css
   Loaded on single events.

   Details on the left, practical panel on the right. The panel sticks as the
   reader scrolls, so booking stays in view.
   ========================================================================== */

/* --- Head --------------------------------------------------------------- */

.event-single__head { padding-bottom: 40px; }

.event-single__title { font-size: clamp(30px, 4.2vw, 46px); max-width: 900px; }

.event-single__when {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-body);
  margin: 20px 0 0;
}
.event-single__dot { color: var(--gold); margin: 0 8px; }


/* --- Two-column body ---------------------------------------------------- */

.event-single__body {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 56px;
  align-items: start;
}

.event-single__main { min-width: 0; }

/* Most of the archive is in the past, so this notice is the common case
   rather than the exception. Stated plainly, not as a warning. */
.event-single__past {
  border-left: 3px solid var(--gold);
  background: var(--cream);
  padding: 14px 20px;
  margin: 0 0 30px;
  font-size: 14px;
  color: var(--ink-muted);
}

.event-single .prose { font-size: 17px; line-height: 1.75; color: var(--ink-body); }
.event-single .prose h2 { font-size: 24px; }
.event-single .prose h3 { font-size: 19px; }
.event-single .prose a { text-decoration: underline; text-underline-offset: 3px; }

.event-single__back {
  border-top: 1px solid var(--rule-soft);
  margin: 40px 0 0;
  padding-top: 22px;
}

/* --- The panel ---------------------------------------------------------- */

.event-single__aside { position: sticky; top: 100px; }

.event-panel__item { padding-bottom: 22px; }
.event-panel__item + .event-panel__item {
  border-top: 1px solid var(--rule-cream);
  padding-top: 22px;
}
.event-panel__item:last-child { padding-bottom: 0; }

.event-panel__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 8px;
}

.event-panel__value {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.event-panel__map,
.event-panel__cal,
.event-panel__tel {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.event-panel__map:hover,
.event-panel__cal:hover,
.event-panel__tel:hover { color: var(--navy); }

.event-panel__btn { display: block; width: 100%; text-align: center; margin-top: 14px; }
.event-panel__btn + .event-panel__tel { display: block; margin-top: 12px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  /* Below this the panel would sit under a long article, which is too late to
     be useful — so it leads instead. */
  .event-single__body { grid-template-columns: 1fr; gap: 34px; }
  .event-single__aside { position: static; order: -1; }
}

@media (max-width: 600px) {
  .event-single .prose { font-size: 16.5px; }
  .event-single__when { font-size: 14px; }
  .event-single__dot { margin: 0 6px; }
}


/* --- Banner ------------------------------------------------------------- */
/* Contained rather than cropped, for the same reason as the news article:
   these are photographs of people, and cropping loses them. */

.event-single__banner {
  --band-h: clamp(320px, 32vw, 600px);
  background: var(--cream);
}
.event-single__banner > img { object-fit: contain; object-position: center; }

@media (max-width: 900px) {
  .event-single__banner { --band-h: clamp(220px, 36vw, 340px); }
}