/**
 * Events element - structural layout only.
 * Colours, typography, spacing and borders are left to the Bricks style controls
 * so the element inherits the site's design system instead of fighting it.
 */

.evt-events {
	--evt-cols: 3;
	/* Overridable from the element's Layout controls. */
	--evt-list-thumb: 140px;
	--evt-img-max: 320px;
	--evt-img-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 1.5rem);
}

.evt-events__items {
	display: grid;
	gap: var(--space-l, 2rem);
	grid-template-columns: repeat(var(--evt-cols), minmax(0, 1fr));
}

/*
 * Date group label. Spanning every column keeps grouping inside the single grid,
 * so no extra wrapper is needed and card/list both work unchanged.
 */
.evt-events__group {
	grid-column: 1 / -1;
	margin: 0;
	text-transform: capitalize;
}

.evt-events__group:not(:first-child) {
	margin-top: var(--space-s, 1rem);
}

.evt-event {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.evt-event__image {
	margin: 0;
	max-width: var(--evt-img-max);
}

.evt-event__image a {
	display: block;
}

.evt-event__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--evt-img-radius);
}

/* Extra gallery images exist only so the lightbox can page through them. */
.evt-event__lightbox-extra {
	display: none !important;
}

.evt-event__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.75rem);
	align-items: flex-start;
	flex: 1;
}

.evt-event__title {
	margin: 0;
}

.evt-event__title a {
	color: inherit;
	text-decoration: none;
}

.evt-event__title a:hover,
.evt-event__title a:focus-visible {
	text-decoration: underline;
}

.evt-event__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4xs, 0.25rem);
	width: 100%;
}

.evt-event__meta-item {
	display: flex;
	gap: var(--space-xs, 1rem);
}

.evt-event__meta-label {
	flex: 0 0 8rem;
	font-weight: 600;
}

.evt-event__meta-value {
	min-width: 0;
}

.evt-event__excerpt {
	margin: 0;
}

.evt-event__cta {
	display: inline-block;
	margin-top: auto;
	text-decoration: none;
	transition: background-color 200ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.evt-event__cta:active {
	transform: scale(0.97);
}

.evt-event--past {
	opacity: 0.72;
}

/*
 * A single event in card view would otherwise stretch its poster across the whole
 * container. Lay it out side by side instead, so "fewer events" means a bigger
 * image without turning into a billboard.
 */
.evt-events--card[data-evt-cols="1"] .evt-event {
	display: grid;
	grid-template-columns: minmax(0, var(--evt-img-max)) minmax(0, 1fr);
	gap: var(--space-l, 2rem);
	align-items: center;
}

.evt-events--card[data-evt-cols="1"] .evt-event__body {
	flex: initial;
}

/* ---------- List view ---------- */

.evt-events--list .evt-events__items {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * A list is for scanning: fixed narrow thumbnail, everything else in one column,
 * so ten events stay ten readable rows rather than ten full-width posters.
 */
.evt-events--list .evt-event {
	display: grid;
	grid-template-columns: var(--evt-list-thumb) minmax(0, 1fr);
	gap: var(--space-m, 1.5rem);
	align-items: start;
}

.evt-events--list .evt-event__image {
	max-width: none;
}

.evt-events--list .evt-event__body {
	flex: initial;
}

.evt-events--list .evt-event__cta {
	margin-top: var(--space-3xs, 0.5rem);
}

/* ---------- View switch ---------- */

.evt-events__switch {
	display: flex;
	gap: 0.25rem;
	align-self: flex-end;
}

.evt-events__switch-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55em 1em;
	min-height: 44px;
	font: inherit;
	font-size: 0.875em;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.evt-events__switch-btn:hover {
	opacity: 0.85;
}

.evt-events__switch-btn[aria-pressed="true"] {
	opacity: 1;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.evt-events__switch-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Pagination ---------- */

.evt-events__pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.evt-events__pagination a,
.evt-events__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75em;
	text-decoration: none;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 2px;
	opacity: 0.6;
}

.evt-events__pagination a:hover,
.evt-events__pagination a:focus-visible {
	opacity: 1;
}

.evt-events__pagination .current {
	opacity: 1;
	font-weight: 600;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.evt-events__empty {
	margin: 0;
}

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

@media (max-width: 991px) {
	.evt-events__items {
		grid-template-columns: repeat(min(var(--evt-cols), 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.evt-events__items,
	.evt-events--card[data-evt-cols="1"] .evt-event {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The list stays a row on phones - stacking it would make it a card view. */
	.evt-events--list .evt-event {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--space-s, 1rem);
	}

	.evt-event__meta-item {
		flex-direction: column;
		gap: 2px;
	}

	.evt-event__meta-label {
		flex-basis: auto;
	}

	.evt-events__switch {
		align-self: stretch;
	}

	.evt-events__switch-btn {
		flex: 1;
		justify-content: center;
	}
}

/* ---------- Motion ---------- */

/*
 * The events page is rare and content-light, so a restrained entrance earns its
 * keep here where it would not on a page users hit every day. Pure CSS via
 * @starting-style; where the browser lacks it the content just appears, which is
 * a fine fallback.
 */
.evt-event,
.evt-events__group {
	transition: opacity 380ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 380ms cubic-bezier(0.23, 1, 0.32, 1);
}

@supports (transition-behavior: allow-discrete) {
	@starting-style {
		.evt-event,
		.evt-events__group {
			opacity: 0;
			transform: translateY(8px);
		}
	}

	/*
	 * Stagger the first few cards. nth-of-type counts only <article>, so the
	 * interleaved group headings do not throw the sequence off.
	 */
	.evt-event:nth-of-type(2) { transition-delay: 55ms; }
	.evt-event:nth-of-type(3) { transition-delay: 110ms; }
	.evt-event:nth-of-type(4) { transition-delay: 165ms; }
	.evt-event:nth-of-type(5) { transition-delay: 220ms; }
}

/* View switch: brief crossfade so the grid/rows reflow does not snap. */
.evt-events__items {
	transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.evt-events__items.is-swapping {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.evt-events__switch-btn,
	.evt-events__items,
	.evt-event,
	.evt-events__group {
		transition: opacity 150ms linear;
	}

	.evt-event,
	.evt-events__group {
		transform: none;
	}

	@supports (transition-behavior: allow-discrete) {
		@starting-style {
			.evt-event,
			.evt-events__group {
				transform: none;
			}
		}
	}
}