/* Block: Events list. Figma: About 1:255-1:273 */

.events-list {
	display: grid;
	grid-template-columns: 18.64% minmax(0, 1fr) 21.19%; /* list starts at 368, poster is 400 of 1888 */
	align-items: start;
}

.events-list__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0.55em;
}

.events-list__label::before {
	content: "";
	flex: none;
	width: 40px;
	height: 1px;
	background: currentColor;
}

.events-list__items {
	max-width: clamp(320px, 41.67vw, 800px); /* a short name keeps its date on the same line, a long one drops it below */
	margin: 0;
}

.events-list__item + .events-list__item { margin-top: clamp(2px, 0.26vw, 5px); }

.events-list__event {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: clamp(8px, 0.73vw, 14px);
	color: #999999;
	transition: color 0.35s var(--ease);
}

.events-list__name {
	font-size: var(--fs-hero); /* 60 */
	line-height: 1.233;
	letter-spacing: -0.033em;
}

.events-list__meta { padding-left: clamp(6px, 0.63vw, 12px); }

.events-list__item.is-active .events-list__event,
a.events-list__event:hover,
a.events-list__event:focus-visible { color: var(--c-ink); }

.events-list__posters {
	grid-column: 3;
	position: relative;
	aspect-ratio: 400 / 600;
}

.events-list__poster {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
}

.events-list__poster.is-active { opacity: 1; }

@media (max-width: 1024px) {
	.events-list {
		grid-template-columns: 1fr;
		gap: var(--space-s);
	}

	.events-list__items { max-width: none; }
	.events-list__posters { display: none; }
}

/* Touch screens have no "pointing at": every event reads as active. */
@media (hover: none), (max-width: 1024px) {
	.events-list__event { color: var(--c-ink); }
	.events-list__meta { color: var(--c-ink-2); }
}

@media (max-width: 600px) {
	.events-list__name { font-size: 1.75rem; line-height: 1.18; }
	.events-list__item + .events-list__item { margin-top: 14px; }
	.events-list__meta { padding-left: 2px; }
}