@charset "utf-8";

/* CALENDAR LIST */
.events-calendar-list {
	align-items: start;
	display: grid;
	gap: var(--margin-block);
	grid-template-columns: minmax(0, 1fr);
	}
@media (min-width: 60em) {
	.events-calendar-list {
		grid-template-columns: 20rem minmax(0, 1fr);
		}
	.events-calendar-list-sidebar {
		position: sticky;
		top: var(--sticky-top);
		transition: top var(--animation-duration) var(--animation-easing);
		}
}

/* CALENDAR */
.events-calendar-list-card {
	background-color: var(--background);
	border: 1px solid var(--background-trim);
	border-radius: var(--radius);
	padding: var(--space-20);
	}
.events-calendar-list-range,
.events-calendar-list-nav,
.events-calendar-list-day {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--color-text);
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	margin: 0;
	text-transform: none;
	}
.events-calendar-list-range:focus-visible,
.events-calendar-list-nav:focus-visible,
.events-calendar-list-day:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	}

/* CALENDAR - RANGES */
.events-calendar-list-ranges {
	border-bottom: 1px solid var(--background-trim);
	display: flex;
	gap: var(--space-10);
	justify-content: center;
	padding-bottom: var(--space-10);
	}
.events-calendar-list-range {
	border: 1px solid var(--background-border);
	border-radius: var(--radius);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: var(--space-5) var(--space-10);
	}
.events-calendar-list-range:hover {
	background-color: var(--background-trim);
	}
.events-calendar-list-range.events-calendar-list-range-active,
.events-calendar-list-range.events-calendar-list-range-active:hover {
	background-color: var(--color-button);
	border-color: transparent;
	color: var(--color-button-text);
	}

/* CALENDAR - MONTH */
.events-calendar-list-month {
	align-items: center;
	border-bottom: 1px solid var(--background-trim);
	display: flex;
	justify-content: space-between;
	padding-block: var(--space-10);
	}
.events-calendar-list-month-title {
	color: var(--color-header);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	}
.events-calendar-list-nav {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	font-size: var(--font-size-xs);
	height: 2rem;
	justify-content: center;
	padding: 0;
	width: 2rem;
	}
.events-calendar-list-nav:hover:not(:disabled) {
	background-color: var(--background-trim);
	}
.events-calendar-list-nav:disabled {
	cursor: default;
	opacity: 0.3;
	}

/* CALENDAR - DAYS */
.events-calendar-list-grid {
	display: grid;
	gap: var(--space-5) 0;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	justify-items: center;
	padding-top: var(--space-10);
	}
.events-calendar-list-day {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	font-size: var(--font-size-xs);
	height: 2rem;
	justify-content: center;
	line-height: var(--line-height-none);
	padding: 0;
	position: relative;
	width: 2rem;
	}
.events-calendar-list-day:hover {
	background-color: var(--background-trim);
	}
.events-calendar-list-day.events-calendar-list-day-today {
	font-weight: var(--font-weight-bold);
	}
.events-calendar-list-day.events-calendar-list-day-selected,
.events-calendar-list-day.events-calendar-list-day-selected:hover {
	background-color: var(--color-button);
	color: var(--color-button-text);
	}
.events-calendar-list-day.events-calendar-list-day-events::after {
	background-color: var(--color-accent);
	border-radius: 50%;
	bottom: 3px;
	content: '';
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 4px;
	}
.events-calendar-list-day.events-calendar-list-day-selected.events-calendar-list-day-events::after {
	background-color: var(--color-button-text);
	}
@media (forced-colors: active) {
	.events-calendar-list-day.events-calendar-list-day-events::after {
		background-color: CanvasText;
		}
}

/* RESULTS */
.events-calendar-list-results {
	container-type: inline-size;
	min-width: 0;
	}
.events-calendar-list-items {
	display: grid;
	gap: var(--gap);
	transition: opacity var(--animation-duration) var(--animation-easing);
	}
.events-calendar-list-loading .events-calendar-list-items {
	opacity: 0.5;
	}
.events-calendar-list-message {
	border: 1px solid var(--background-trim);
	border-radius: var(--radius);
	color: var(--color-bright);
	font-size: var(--font-size-sm);
	margin: 0;
	padding: 2rem var(--space-20);
	text-align: center;
	}
.events-calendar-list-message-error {
	color: var(--color-alert);
	}
.events-calendar-list-more {
	margin: var(--space-20) 0 0;
	text-align: center;
	}
.events-calendar-list-more > [hidden] {
	display: none;
	}
.events-calendar-list-more > .button:disabled {
	cursor: wait;
	opacity: 0.6;
	}

/* EVENT */
.events-calendar-list-event {
	background-color: var(--background);
	border: 1px solid var(--background-trim);
	border-radius: var(--radius);
	display: grid;
	gap: var(--space-10);
	grid-template-columns: minmax(0, 1fr);
	padding: 0.25rem;
	}
.events-calendar-list-event-media {
	aspect-ratio: var(--aspect-ratio-landscape);
	background-color: var(--background-trim);
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
	}
.events-calendar-list-event-image-link {
	display: block;
	height: 100%;
	width: 100%;
	}
.events-calendar-list-event-image {
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	}
.events-calendar-list-event-date {
	background-color: var(--background);
	border-radius: var(--radius);
	color: var(--color-header);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	left: var(--space-10);
	line-height: var(--line-height-tight);
	padding: var(--space-5) var(--space-10);
	position: absolute;
	top: var(--space-10);
	}
.events-calendar-list-event-body {
	padding: var(--space-10) var(--space-20) var(--space-20);
	}
.events-calendar-list-event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-bottom: var(--space-12);
	}
.events-calendar-list-event-tag {
	background-color: var(--background-trim);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	padding: 0.25rem 0.5rem;
	}
.events-calendar-list-event-tag.events-calendar-list-event-category {
	text-decoration: none;
	transition: background-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);
	}
.events-calendar-list-event-tag.events-calendar-list-event-category:hover,
.events-calendar-list-event-tag.events-calendar-list-event-category:focus-visible {
	background-color: var(--color-button);
	color: var(--color-button-text);
	}
.events-calendar-list-event-tag.events-calendar-list-event-tag-featured {
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	}
.events-calendar-list-event-title {
	color: var(--color-header);
	font: var(--typography-h5);
	font-weight: var(--font-weight-semi);
	margin: 0 0 var(--space-5);
	}
.events-calendar-list-event-title > a {
	color: inherit;
	text-decoration: none;
	}
.events-calendar-list-event-title > a:hover,
.events-calendar-list-event-title > a:focus-visible {
	color: var(--color-link);
	}
.events-calendar-list-event-excerpt {
	color: var(--color-bright);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
	margin: 0;
	}
.events-calendar-list-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-small);
	margin: var(--space-20) 0 0;
	}

/* EVENT - DATE TILE (no featured image) */
.events-calendar-list-event-media.events-calendar-list-event-media-tile {
	aspect-ratio: var(--aspect-ratio-thirds);
	background-color: var(--background-trim);
	background-color: color-mix(in srgb, var(--color-button) 5%, var(--background));
	}
.events-calendar-list-event-tile {
	align-content: center;
	color: var(--color-header);
	display: grid;
	height: 100%;
	justify-items: center;
	line-height: var(--line-height-none);
	text-align: center;
	}
.events-calendar-list-event-tile-weekday {
	color: var(--color-button);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing);
	text-transform: uppercase;
	}
.events-calendar-list-event-tile-day {
	font-size: var(--font-size-8xl);
	font-variant-numeric: tabular-nums;
	font-weight: var(--font-weight-bold);
	margin-block: var(--space-5);
	}
.events-calendar-list-event-tile-month {
	color: var(--color-dimmed);
	font-size: var(--font-size-sm);
	}

/* EVENT - SIDE BY SIDE */
@container (min-width: 35rem) {
	.events-calendar-list-event {
		gap: var(--buffer);
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		}
	.events-calendar-list-event-body {
		padding: var(--space-20) var(--space-20) var(--space-20) 0;
		}
	.events-calendar-list-event-media.events-calendar-list-event-media-tile {
		aspect-ratio: var(--aspect-ratio-landscape);
		}
}