/* ==========================================================================
   Ovation — Events Strip
   Figma node 179:552 (Upcoming Events). A heading row with a button opposite,
   over a short row of event cards.

   Self-contained on purpose: this widget can land on any page, so it borrows
   nothing from the events feed's section stylesheet. Only the shared component
   classes (.o-eyebrow, .o-btn) are assumed, and those live in components.css.
   ========================================================================== */

.o-events-strip {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-xl);
}

/* --------------------------------------------------------------------------
   Heading row
   Title left, button right, baseline-ish. Wraps to two rows on narrow screens
   rather than letting the button crush the heading.
   -------------------------------------------------------------------------- */
.o-events-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-md) var(--o-space-lg);
}

.o-events-strip__heading {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-sm);
}

.o-events-strip__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.08;
	text-transform: uppercase;
}

/* The comp sets this button a touch smaller than the standard one. */
.o-events-strip__more {
	flex: none;
	padding: 1rem 2rem;
	font-size: var(--o-fs-small);
}

/* --------------------------------------------------------------------------
   Cards
   Column count comes from the panel as --o-strip-columns, so the same CSS
   serves two, three or four across without a modifier class per option.
   -------------------------------------------------------------------------- */
.o-events-strip__cards {
	display: grid;
	grid-template-columns: repeat(var(--o-strip-columns, 3), minmax(0, 1fr));
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-events-strip__card {
	background-color: var(--o-white);
	border: 1.5px solid var(--o-rule-cool);
	transition: border-color var(--o-transition);
}

.o-events-strip__card:hover,
.o-events-strip__card:focus-within {
	border-color: var(--o-navy);
}

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

.o-events-strip__media {
	display: block;
	height: clamp(200px, 12rem + 7vw, 290px);
	overflow: hidden;
	background-color: var(--o-rule-cool);
}

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

.o-events-strip__link:hover .o-events-strip__img,
.o-events-strip__link:focus-visible .o-events-strip__img {
	transform: scale(1.04);
}

.o-events-strip__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

/*
 * "Event · Music". Teal rather than the usual orange: the comp keeps the accent
 * for the eyebrow above the heading, so the card's kicker takes the secondary.
 */
.o-events-strip__kicker {
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-xs);
	letter-spacing: 0.167em; /* 2px at 12px */
	line-height: 1.2;
	text-transform: uppercase;
}

.o-events-strip__name {
	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-strip__link:hover .o-events-strip__name,
.o-events-strip__link:focus-visible .o-events-strip__name {
	color: var(--o-orange);
}

/* Pushed to the foot of the card so dates line up across uneven titles. */
.o-events-strip__date {
	margin-top: auto;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
}

.o-events-strip__empty {
	margin: 0;
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
}

/* --------------------------------------------------------------------------
   Narrow screens
   Four and three both step down to two, then to one, rather than letting a
   card get too narrow to carry an uppercase title.
   -------------------------------------------------------------------------- */
/*
 * A plain 2 rather than min(var(--o-strip-columns), 2): a maths function as a
 * repeat() count is Grid Level 2 and Firefox does not implement it, and the
 * result is identical anyway - a two-column choice is already two.
 */
@media (max-width: 1100px) {
	.o-events-strip__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--o-space-lg);
	}
}

@media (max-width: 700px) {
	.o-events-strip__cards {
		grid-template-columns: 1fr;
	}

	.o-events-strip__head {
		align-items: flex-start;
	}

	.o-events-strip__more {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-events-strip__img {
		transition: none;
	}

	.o-events-strip__link:hover .o-events-strip__img,
	.o-events-strip__link:focus-visible .o-events-strip__img {
		transform: none;
	}
}