/* =========================================================================
   Page flourishes - Events   (loaded after styles.css)
   Layout signature: broadsheet calendar. Dateline banner + .agenda upcoming
   (Sommerfest as lead) + event-format clip grid + recap note.
   Only page-specific touches here; shared components live in styles.css.
   ========================================================================= */

/* --- Banner: dateline strip under the big headline --------------------- */
.events-banner { background: var(--paper); }
.events-banner h1 { margin-top: .6rem; }
.events-banner__dateline { margin-top: 1.1rem; }
.events-banner__dateline span::before {
  content: "›"; color: var(--accent); margin-right: .5rem;
}

/* --- Agenda: keep the lead item legible in its own column -------------- */
.agenda__when { line-height: 1.35; }
.agenda__item--lead .agenda__what h3 { font-size: 1.5rem; }
.agenda__item--lead .agenda__what p { color: var(--body); }
.agenda__item .btn { align-self: center; }
@media (max-width: 44rem) {
  .agenda__item .btn { align-self: start; }
}

/* --- Event-format clip cards: mono kicker above the heading ------------ */
.event-format__kicker {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.clip--link .event-format__kicker { color: var(--accent); }

/* --- Inline TODO note inside an agenda item ---------------------------- */
.todo--inline {
  margin-top: .6rem;
  padding: .4rem .7rem;
  font-size: .85rem;
}

/* --- Ausblick: framed workshop photo + caption ------------------------- */
.ausblick-media { margin-top: 1.4rem; }
.ausblick-media figcaption { margin-top: .5rem; }

/* --- Recap note: rotating mark + body ---------------------------------- */
.recap-note {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  border-left: 4px solid var(--gold);
}
.recap-note__mark {
  font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  color: var(--gold);
}
.recap-note h3 { font-size: var(--fs-h3); }