/* ==========================================================================
   Ovation — Events
   Figma node 159:318 (Events — 1920w). Three bands: the featured hero, the
   filterable upcoming list, and the pale-blue past events grid.

   The hero is optional. Nothing here assumes it exists, so when no event is
   flagged the page simply opens on "Upcoming Events".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Featured hero
   The comp overlaps a navy card onto the lower edge of a 620px photograph.
   That overlap is done with a negative margin on the card rather than absolute
   positioning, so the band grows with the card instead of clipping it when the
   title wraps to two lines on a narrow screen.
   -------------------------------------------------------------------------- */
.o-events__hero {
	position: relative;
	background-color: var(--o-white);
}

.o-events__hero-media {
	position: relative;
	height: clamp(280px, 20rem + 12vw, 620px);
	overflow: hidden;
}

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

/* The comp darkens the photograph so the card's edge stays legible against it. */
.o-events__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
}

.o-events__featured {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-md);
	margin-top: clamp(-6rem, -4rem - 4vw, -2.5rem);
	margin-bottom: clamp(3rem, 2rem + 3vw, 5.5rem);
	padding: clamp(2rem, 1.5rem + 2.5vw, 3.25rem) clamp(1.5rem, 1rem + 3vw, 4rem);
	overflow: hidden;
	background-color: var(--o-navy);
	color: var(--o-white);
}

/*
 * The pattern is absolutely positioned, so without this it paints over the
 * card's static children and washes out the end of a long title. Lifting the
 * content rather than pushing the pattern back keeps it from escaping the
 * card's own stacking context.
 */
.o-events__featured > *:not(.o-events__pattern) {
	position: relative;
	z-index: 1;
}

.o-events__badge {
	display: inline-block;
	margin: 0;
	padding: 0.5625rem 1rem;
	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.154em; /* 2px at 13px */
	line-height: 1;
	text-transform: uppercase;
}

.o-events__featured-title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h2);
	line-height: 1.13;
	text-transform: uppercase;
}

.o-events__featured-title a {
	color: inherit;
	text-decoration: none;
}

.o-events__featured-title a:hover,
.o-events__featured-title a:focus-visible {
	color: var(--o-orange);
}

.o-events__featured-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--o-space-lg);
	margin-top: 0.75rem;
}

.o-events__featured-link {
	color: var(--o-white);
}

/*
 * The meta line itself (.o-events__meta / .o-events__dot) lives in
 * components.css: single-event.php draws the same line from the same helper,
 * and that page does not load this stylesheet.
 */
.o-events__featured .o-events__meta {
	gap: 1.125rem;
	font-size: var(--o-fs-body-lg);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.o-events__upcoming {
	padding-block: var(--o-section-y);
	background-color: var(--o-white);
	color: var(--o-ink);
}

.o-events__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--o-space-sm);
	text-align: center;
}

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

.o-events__lede {
	max-width: 44ch;
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.53;
}

/* --------------------------------------------------------------------------
   Filter pills
   Same treatment as the directory's, which is the established pill in this
   design system.
   -------------------------------------------------------------------------- */
.o-events__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--o-space-xs) 1rem;
	margin-top: var(--o-space-lg);
}

.o-events__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--o-navy);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		color var(--o-transition);
}

.o-events__pill:hover,
.o-events__pill:focus-visible,
.o-events__pill.is-active {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Upcoming list
   Each row is a grid so the date block, thumbnail, body and actions hold their
   columns however long the title runs. Below the breakpoint the row restacks
   with the date and thumbnail side by side above the copy.
   -------------------------------------------------------------------------- */
.o-events__list {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-md);
	margin: var(--o-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.o-events__row {
	display: grid;
	grid-template-columns: 120px 190px 1fr auto;
	align-items: center;
	gap: var(--o-space-lg);
	padding-right: var(--o-space-lg);
	border: 1.5px solid var(--o-rule-cool);
	background-color: var(--o-white);
	transition: border-color var(--o-transition);
}

.o-events__row:hover {
	border-color: var(--o-navy);
}

.o-events__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 176px;
	margin: 0;
	background-color: var(--o-navy);
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	text-transform: uppercase;
}

.o-events__date--accent {
	background-color: var(--o-orange);
}

.o-events__month {
	font-size: var(--o-fs-body);
	letter-spacing: 0.156em; /* 2.5px at 16px */
	line-height: 1;
}

.o-events__day {
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.875rem);
	line-height: 1.1;
}

.o-events__thumb {
	height: 132px;
	overflow: hidden;
}

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

.o-events__body {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-width: 0;
	padding-block: var(--o-space-md);
}

.o-events__row-title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h3);
	line-height: 1.23;
	text-transform: uppercase;
}

.o-events__row-title a {
	color: var(--o-navy);
	text-decoration: none;
}

.o-events__row-title a:hover,
.o-events__row-title a:focus-visible {
	color: var(--o-orange);
}

.o-events__row .o-events__meta,
.o-events__summary {
	color: var(--o-ink-mist);
}

.o-events__summary {
	margin: 0;
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: 1.56;
}

.o-events__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--o-space-xs);
}

.o-events__details {
	color: var(--o-orange);
	font-size: var(--o-fs-body);
}

/* The save heart — a circular control, matching the directory's card button. */
.o-events__save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--o-ink-mist);
	cursor: pointer;
	transition:
		color var(--o-transition),
		transform var(--o-transition);
}

/*
 * The glyph is one closed path carrying fill="currentColor" - an outline
 * redrawn as a shape - so it takes the button's colour on its own. Nothing here
 * sets fill or stroke: a `fill` on the <svg> never reaches that path, and a
 * stroke would only thicken the artwork past what the comp draws.
 *
 * Saving fills the heart in as well as colouring it - the fill is shared with
 * every other heart (components.css). Sized to the glyph's own 41.92:39.
 */
.o-events__save-glyph {
	display: block;
	width: 26px;
	height: 24px;
}

.o-events__save:hover,
.o-events__save:focus-visible {
	color: var(--o-orange);
	transform: scale(1.08);
}

.o-events__save[aria-pressed="true"] {
	color: var(--o-orange);
}

.o-events__save[aria-pressed="true"] .o-events__save-glyph {
	transform: scale(1.12);
}

.o-events__empty {
	margin: var(--o-space-xl) 0 0;
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	text-align: center;
}

.o-events__more {
	margin: var(--o-space-xl) 0 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Past events
   The pale-blue band carries the aqua waves: the shared .o-pattern
   (components.css) on the right of the band, strongest in the lower corner.
   -------------------------------------------------------------------------- */
.o-events__past {
	position: relative;
	padding-block: var(--o-section-y);
	overflow: hidden;
}

.o-events__past > .o-container {
	position: relative;
	z-index: 1;
}

.o-events__pattern {
	left: 45%;
}

/*
 * Inside the navy featured card the waves are a near-black wash fading in
 * from the right; on the pale-blue band they are the aqua foam.
 */
.o-events__featured .o-events__pattern {
	--o-pattern-ink: var(--o-navy-ink);

	left: 55%;
}

.o-events__featured .o-events__pattern::before {
	opacity: 0.35;
}

.o-events__pattern--foam {
	opacity: 0.3;
}

/*
 * Three up, as the comp draws it. Fixed rather than auto-fit: with auto-fit a
 * fourth past event would quietly become a four-column row on a wide screen.
 */
.o-events__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--o-space-xl);
	margin: var(--o-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1000px) {
	.o-events__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.o-events__grid {
		grid-template-columns: 1fr;
	}
}

.o-events__card {
	background-color: var(--o-white);
}

.o-events__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.o-events__card-media {
	display: block;
	height: clamp(200px, 12rem + 8vw, 300px);
	overflow: hidden;
}

.o-events__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-events__card-link:hover .o-events__card-img,
.o-events__card-link:focus-visible .o-events__card-img {
	transform: scale(1.04);
}

.o-events__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

.o-events__card-title {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-h4);
	line-height: 1.27;
	text-transform: uppercase;
}

.o-events__card-date {
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
}

.o-events__card-cta {
	margin-top: auto;
	padding-top: 0.375rem;
	color: var(--o-orange);
	font-size: var(--o-fs-small);
}

/* --------------------------------------------------------------------------
   Narrow screens
   The four-column row cannot survive a phone, so it restacks: date and thumb
   ride together on one line, copy and actions below.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.o-events__row {
		grid-template-columns: 100px 150px 1fr;
		gap: var(--o-space-md);
	}

	.o-events__actions {
		grid-column: 2 / -1;
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--o-space-md);
		padding-bottom: var(--o-space-md);
	}
}

@media (max-width: 720px) {
	.o-events__row {
		grid-template-columns: 92px 1fr;
		padding-right: var(--o-space-md);
	}

	.o-events__date {
		height: 100%;
		min-height: 92px;
	}

	.o-events__thumb {
		display: none;
	}

	.o-events__body {
		padding-block: var(--o-space-md);
		padding-right: 0;
	}

	.o-events__actions {
		grid-column: 2 / -1;
	}

	.o-events__featured-actions {
		gap: var(--o-space-md);
	}

	.o-events__pattern {
		inset-inline-start: 25%;
	}
}

/* Motion is decoration here; respect a request to do without it. */
@media (prefers-reduced-motion: reduce) {
	.o-events__card-img,
	.o-events__save {
		transition: none;
	}

	.o-events__card-link:hover .o-events__card-img,
	.o-events__card-link:focus-visible .o-events__card-img,
	.o-events__save:hover,
	.o-events__save:focus-visible {
		transform: none;
	}
}