/* Events */

	#events-page {
		padding: 5%;
		min-height: 100%;
	}

	#events-grid {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 2em;
	}

		#events-grid .events-list {
			flex: 1 1 0;
			min-width: 0;
		}

		#events-grid #sidebar {
			flex: 0 0 22em;
			display: flex;
			flex-direction: column;
		}

			#events-grid #sidebar #calendar {
				flex-shrink: 0;
			}

	#calendar {
		background-color: #ffffff;
		padding: 0 1.5em 1.5em 1.5em;
		margin-bottom: 2em;
	}

		#calendar .calendar-head {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			margin-bottom: 1em;
		}

			#calendar .calendar-head h2 {
				flex-grow: 1;
				text-align: center;
				margin: 0;
			}

			#calendar .calendar-head a {
				font-size: 1.75em;
				line-height: 1;
				text-decoration: none;
				padding: 0.35em 0.75em;
			}

		#calendar .weekdays {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 0.4em;
			margin-bottom: 0.4em;
		}

			#calendar .weekdays .weekday {
				text-align: center;
				font-size: 0.75em;
				color: #666;
				text-transform: uppercase;
			}

		#calendar .grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 0.4em;
		}

			#calendar .day {
				position: relative;
				aspect-ratio: 1;
				display: flex;
				align-items: flex-start;
				justify-content: flex-end;
				padding: 0.25em;
				border: solid 1px #e5e6e7;
				border-radius: 4px;
				text-decoration: none;
				color: #000000;
				font-size: 0.85em;
			}

				#calendar .day .dot {
					position: absolute;
					left: 50%;
					bottom: 0.25em;
					transform: translateX(-50%);
					width: 0.55em;
					height: 0.55em;
					border-radius: 50%;
				}

				#calendar .day .tip {
					position: absolute;
					bottom: calc(100% + 8px);
					left: 50%;
					transform: translateX(-50%) translateY(6px) scale(0.96);
					color: #ffffff;
					font-size: 0.8em;
					font-weight: 700;
					white-space: nowrap;
					max-width: 15em;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0.35em 0.7em;
					border-radius: 4px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
					opacity: 0;
					pointer-events: none;
					z-index: 10;
					transition: opacity 0.18s ease-out, transform 0.18s ease-out;
				}

					#calendar .day .tip::after {
						content: "";
						position: absolute;
						top: 100%;
						left: 50%;
						margin-left: -4px;
						border: 4px solid transparent;
						border-top-color: inherit;
					}

					#calendar .day.event:hover .tip {
						opacity: 1;
						transform: translateX(-50%) translateY(0) scale(1);
						transition-delay: 0.12s;
					}

				#calendar .day.blank {
					border-color: transparent;
				}

				#calendar .day.today {
					border-color: #742e2e;
					box-shadow: 0 0 0 1px #742e2e;
				}

				#calendar .day.event:hover {
					border-color: #742e2e;
				}

	#calendar .legend {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		margin: 1.5em 0 0 0;
	}

		#calendar .legend li {
			display: flex;
			align-items: center;
			gap: 0.5em;
			font-size: 0.85em;
		}

			#calendar .legend .legend-dot {
				width: 0.85em;
				height: 0.85em;
				border-radius: 50%;
				flex-shrink: 0;
			}

	#upcoming header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		padding-bottom: 0.75em;
	}

	#upcoming header h2 {
		margin-bottom: 0;
	}

	#upcoming header .feed-links {
		display: flex;
		align-items: center;
		gap: 0.5em;
	}

	#past-month header h2 {
		margin-bottom: 0.75em;
	}

	#upcoming .article, #past-month .article {
		background-color: #ffffff;
		display: flex;
		margin-bottom: 2em;
	}

		#upcoming .article .image, #past-month .article .image {
			max-width: 33%;
			flex-shrink: 0;
		}

			#upcoming .article .image img, #past-month .article .image img {
				height: 100%;
				object-fit: cover;
			}

		#upcoming .article .content, #past-month .article .content {
			padding: 1em 15px 1em 15px;
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

			#upcoming .article .content header, #past-month .article .content header {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
			}

			#upcoming .article .content header h3, #past-month .article .content header h3 {
				flex-grow: 1;
			}

			#upcoming .article .content header .date, #past-month .article .content header .date {
				color: #666;
				white-space: nowrap;
				margin-left: 1em;
				font-size: 0.85em;
			}

			#upcoming .article .content p, #past-month .article .content p {
				flex-grow: 1;
			}

			#upcoming .article .content .meta, #past-month .article .content .meta {
				display: flex;
				flex-wrap: wrap;
				gap: 1em;
				font-size: 0.85em;
				color: #666;
			}

				#upcoming .article .content .meta .type, #past-month .article .content .meta .type {
					display: inline-block;
					padding: 0.2em 0.6em;
					color: #ffffff;
					font-weight: 700;
					border-radius: 4px;
					box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
				}

			#upcoming .article .content .more, #past-month .article .content .more {
				text-align: right;
			}

.events-list .more-events {
			display: inline-block;
			padding: 0.5em 1.25em;
			background-color: #333;
			color: #ffffff;
			font-weight: 700;
			border-radius: 4px;
			text-decoration: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		}

		.events-list .more-events:hover {
			background-color: #000;
		}

/* Event detail */

	#events-item .banner {
		position: relative;
		min-height: 45vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-end;
	}

		#events-item .banner .overlay {
			width: 100%;
			padding: 5%;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.5);
		}

			#events-item .banner .overlay h2 {
				margin: 0;
			}

			#events-item .banner .overlay .date {
				display: block;
				color: #ddd;
				font-size: 0.9em;
				margin-bottom: 0.35em;
			}

			#events-item .banner .overlay .types {
				display: flex;
				flex-wrap: wrap;
				margin: 0.6em 0;
			}

				#events-item .banner .overlay .types .type {
					display: inline-block;
					padding: 0.35em 0.7em;
					margin: 0.2em 0.5em 0.2em 0;
					color: #ffffff;
					font-size: 0.8em;
					font-weight: 700;
					border-radius: 4px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
				}

			#events-item .banner .overlay .location {
				display: block;
				color: #ddd;
			}

	#events-item .container {
		max-width: 60em;
		margin: 0 auto;
		padding: 3em 5%;
		line-height: 1.6;
	}

		#events-item .container .links {
			margin-top: 2em;
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
		}

		#events-item .container .back {
			margin-top: 2em;
			text-align: right;
		}

		#events-item .container .involved-partners {
			margin-top: 2em;
		}

	#archive {
		background-color: #ffffff;
		padding: 1.5em;
	}

		#archive header h2 {
			margin-bottom: 0.75em;
		}

		#archive .archive-year {
			margin-bottom: 1em;
		}

		#archive .archive-year .year-divider {
			font-size: 0.95em;
			color: #742e2e;
			border-bottom: solid 1px #e5e6e7;
			padding-bottom: 0.25em;
			margin-bottom: 0.5em;
		}

		#archive .months {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5em 1.5em;
		}

			#archive .months li {
				font-size: 0.9em;
			}

				#archive .months li a {
					text-decoration: none;
					color: #444;
				}

				#archive .months li a:hover {
					color: #742e2e;
					text-decoration: underline;
				}

	@media screen and (max-width: 1000px) {
		#events-grid {
			flex-direction: column;
			gap: 2em;
			align-items: stretch;
		}

		#events-grid #sidebar {
			display: contents;
			flex: 0 0 auto;
			width: auto;
		}

		#events-grid #calendar {
			order: 1;
			margin-bottom: 0;
		}

		#events-grid .events-list {
			order: 2;
		}

		#events-grid #archive {
			order: 3;
		}
	}

	@media screen and (max-width: 480px) {
		#events-page {
			padding: 2.5%;
		}

		#upcoming .article, #past-month .article {
			flex-direction: column;
		}

		#upcoming .article .image, #past-month .article .image {
			width: 100%;
			max-width: 100%;
		}

			#upcoming .article .image img, #past-month .article .image img {
				width: 100%;
				height: 8em;
				object-fit: cover;
				display: block;
			}

		#upcoming .article .content, #past-month .article .content {
			padding: 1em 0.75em 1em 0.75em;
		}

			#upcoming .article .content header, #past-month .article .content header {
				flex-direction: column;
				align-items: flex-start;
				gap: 0.25em;
			}

				#upcoming .article .content header .date, #past-month .article .content header .date {
					margin-left: 0;
					white-space: normal;
				}
	}