/* ==========================================================================
   Ovation — single event
   The detail page behind every row in the events feed. Shares the feed's meta
   line (.o-events__meta / .o-events__dot), which is why those two live in the
   markup helpers rather than in the section stylesheet.
   ========================================================================== */

.o-event {
	padding-bottom: var(--o-section-y);
	background-color: var(--o-white);
	color: var(--o-ink);
}

/* --------------------------------------------------------------------------
   Hero image
   Optional: 96 of 96 migrated events carry one, but the page must not collapse
   for one that does not.
   -------------------------------------------------------------------------- */
.o-event__media {
	height: clamp(220px, 14rem + 14vw, 480px);
	margin-bottom: var(--o-space-xl);
	overflow: hidden;
	background-color: var(--o-navy);
}

.o-event__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.o-event__back {
	margin: 0 0 var(--o-space-md);
}

.o-event__back .o-textlink {
	color: var(--o-ink-soft);
	font-size: var(--o-fs-small);
}

.o-event__back .o-textlink:hover,
.o-event__back .o-textlink:focus-visible {
	color: var(--o-orange);
}

/* The chevrons point back, so they should travel back on hover too. */
.o-event__back .o-textlink:hover .o-textlink__chevrons,
.o-event__back .o-textlink:focus-visible .o-textlink__chevrons {
	transform: translateX(-0.25em);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.o-event__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-sm);
	padding-bottom: var(--o-space-lg);
	border-bottom: 1.5px solid var(--o-rule-cool);
}

.o-event__badge {
	display: inline-block;
	margin: 0;
	padding: 0.5rem 0.875rem;
	background-color: var(--o-orange);
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-xs);
	letter-spacing: 0.125em;
	line-height: 1;
	text-transform: uppercase;
}

/* "Past Event" is a statement of fact, not a call to action - so it sits back. */
.o-event__badge--past {
	background-color: var(--o-ink-mist);
}

.o-event__title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h1);
	line-height: 1.1;
	text-transform: uppercase;
}

.o-event__header .o-events__meta {
	color: var(--o-ink-mist);
	font-size: var(--o-fs-body-lg);
}

/* --------------------------------------------------------------------------
   Body and sidebar
   The copy keeps a readable measure while the facts and the three optional
   resources sit alongside it, so the actions stay in view as the page scrolls.
   -------------------------------------------------------------------------- */
.o-event__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
	margin-top: var(--o-space-xl);
	align-items: start;
}

/*
 * The body column is ~1040px on a wide screen, which is far past a readable
 * measure for running copy. Capped rather than narrowing the grid column, so
 * an image or embed in the description can still use the full width.
 */
.o-event__body > * {
	max-width: var(--o-container-text);
}

.o-event__intro {
	margin: 0 0 var(--o-space-md);
	color: var(--o-ink);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	font-weight: var(--o-fw-medium);
	line-height: 1.6;
}

.o-event__content {
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-body);
}

.o-event__content > :first-child {
	margin-top: 0;
}

.o-event__content > :last-child {
	margin-bottom: 0;
}

.o-event__content h2,
.o-event__content h3,
.o-event__content h4 {
	margin: var(--o-space-lg) 0 var(--o-space-xs);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	text-transform: uppercase;
}

.o-event__content h2 { font-size: var(--o-fs-h3); }
.o-event__content h3 { font-size: var(--o-fs-h4); }
.o-event__content h4 { font-size: var(--o-fs-body-lg); }

.o-event__content p,
.o-event__content ul,
.o-event__content ol {
	margin: 0 0 var(--o-space-md);
}

.o-event__content ul,
.o-event__content ol {
	padding-inline-start: 1.25rem;
}

.o-event__content li {
	margin-bottom: 0.375rem;
}

.o-event__content a {
	color: var(--o-orange);
}

.o-event__content img {
	height: auto;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.o-event__aside {
	position: sticky;
	top: calc(var(--o-header-height-compact) + var(--o-space-md));
	padding: var(--o-space-md) var(--o-space-md) var(--o-space-lg);
	border: 1.5px solid var(--o-rule-cool);
	background-color: var(--o-white);
}

.o-event__facts {
	margin: 0 0 var(--o-space-md);
}

.o-event__facts dt {
	margin-bottom: 0.125rem;
	color: var(--o-orange);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-xs);
	letter-spacing: var(--o-label-tracking-tight);
	text-transform: uppercase;
}

.o-event__facts dd {
	margin: 0 0 var(--o-space-sm);
	color: var(--o-ink);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: 1.45;
}

.o-event__facts dd:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   The three optional resources
   Website is the solid button; directions and the flyer sit under it as text
   links. Each is absent from the DOM entirely when its field is empty, so the
   block shrinks rather than showing dead controls.
   -------------------------------------------------------------------------- */
.o-event__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-sm);
}

.o-event__actions .o-btn {
	width: 100%;
	text-align: center;
}

/*
 * Scoped to the text links on purpose: the website button also carries
 * .o-event__action for its width, and an unscoped colour here would repaint
 * .o-btn's white label navy against the orange.
 */
.o-textlink.o-event__action {
	color: var(--o-navy);
	font-size: var(--o-fs-body);
	text-align: left;
}

.o-textlink.o-event__action:hover,
.o-textlink.o-event__action:focus-visible {
	color: var(--o-orange);
}

.o-event__action-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--o-orange);
}

/* The flyer link reuses the arrow glyph, turned to point down at a download. */
.o-event__action-icon--down {
	transform: rotate(90deg);
}

/*
 * A flyer label is editor-supplied and can run long ("Downloadable Event
 * Flyer"), which in a flex row pushes the icon onto a line of its own. A grid
 * keeps the glyph in its own column and lets the label wrap beneath itself,
 * with the size note tucked under the label rather than under the icon.
 */
.o-event__action--flyer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.5em;
	row-gap: 0.125rem;
	align-items: start;
}

.o-event__action--flyer .o-event__action-icon {
	margin-top: 0.1em;
}

.o-event__action-note {
	grid-column: 2;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
	font-weight: var(--o-fw-regular);
	letter-spacing: normal;
	text-transform: none;
}

.o-event__calendar {
	margin: var(--o-space-md) 0 0;
	padding-top: var(--o-space-md);
	border-top: 1px solid var(--o-rule-cool);
}

.o-event__calendar .o-textlink {
	color: var(--o-navy);
	font-size: var(--o-fs-small);
}

.o-event__calendar .o-textlink:hover,
.o-event__calendar .o-textlink:focus-visible {
	color: var(--o-orange);
}

/* --------------------------------------------------------------------------
   Narrow screens
   The sidebar stops being a sidebar and leads the body, so the actions are the
   first thing under the header rather than the last thing on the page.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.o-event__layout {
		grid-template-columns: 1fr;
		gap: var(--o-space-lg);
	}

	.o-event__aside {
		position: static;
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-event__back .o-textlink:hover .o-textlink__chevrons,
	.o-event__back .o-textlink:focus-visible .o-textlink__chevrons {
		transform: none;
	}
}