@charset "utf-8";

/* FEATURES EVENTS & POSTS */
.events-posts {
	--events-posts-date: 3.5rem;
	display: grid;
	gap: var(--margin-block);
	margin-block: var(--margin-normal);
	}
.events-posts-section {
	align-content: start;
	display: grid;
	gap: var(--space-md);
	min-width: 0;
	}
.events-posts-header {
	text-wrap: balance;
	}

/* Events */
.events-posts-events {
	display: grid;
	}
.events-posts-event {
	align-items: center;
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--events-posts-date) 1fr;
	padding: var(--space-10) 0;
	}
.events-posts-date {
	align-content: center;
	aspect-ratio: 1;
	background-color: var(--background);
	border-radius: 50%;
	color: var(--color-text);
	display: grid;
	line-height: var(--line-height-none);
	text-align: center;
	text-transform: uppercase;
	width: var(--events-posts-date);
	}
.events-posts-date.theme-default {
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	}
.events-posts-date-month {
	font-size: 0.625rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	opacity: 0.8;
	}
.events-posts-date-day {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-heavy);
	}
.events-posts-event-info {
	border-top: 1px solid var(--background-trim);
	display: grid;
	gap: var(--space-5);
	min-width: 0;
	padding: var(--space-20) 0 var(--space-5);
	}
.events-posts-event-title {
	font-size: var(--text-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	}
.events-posts-event-details {
	color: var(--color-dimmed);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
	}

/* Posts */
.events-posts-posts {
	display: grid;
	gap: var(--gap);
	}
.events-posts-features {
	display: grid;
	gap: var(--gap);
	}
.events-posts-feature {
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	display: block;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	}
.events-posts-feature-image {
	inset: 0;
	position: absolute;
	}
.events-posts-feature-img {
	height: 100%;
	object-fit: cover;
	width: 100%;
	}
.events-posts-feature::after {
	background: linear-gradient(to top, rgba(var(--hue-dark-rgb), 0.75) 0%, rgba(var(--hue-dark-rgb), 0.15) 50%, rgba(var(--hue-dark-rgb), 0) 70%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	}
.events-posts-feature .events-posts-badge {
	left: var(--space-10);
	position: absolute;
	top: var(--space-10);
	z-index: 1;
	}
.events-posts-feature-title {
	bottom: 1rem;
	color: var(--hue-dark-header);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	left: 1rem;
	line-height: var(--line-height-snug);
	position: absolute;
	right: 1rem;
	text-wrap: balance;
	z-index: 1;
	}
.events-posts-more {
	display: grid;
	}
.events-posts-item {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: 5rem 1fr;
	padding: var(--space-10) 0;
	}
.events-posts-item + .events-posts-item {
	border-top: 1px solid var(--background-trim);
	padding-top: var(--space-20);
	}
.events-posts-item-image {
	aspect-ratio: 1;
	border-radius: calc(var(--radius) * 2);
	max-width: 100%;
	overflow: hidden;
	}
.events-posts-item-img {
	height: 100%;
	object-fit: cover;
	width: 100%;
	}
.events-posts-item-info {
	align-content: center;
	display: grid;
	gap: var(--space-10);
	justify-items: start;
	min-width: 0;
	}
.events-posts-item-title {
	font-size: var(--font-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	}

/* Badges */
.events-posts-badge {
	background-color: var(--background);
	border-radius: 3px;
	color: var(--color-text);
	font-size: 0.625rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
	line-height: var(--line-height-none);
	padding: 0.375rem 0.5rem;
	text-transform: uppercase;
	}
.events-posts-badge.theme-default {
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	}

/* Button */
.events-posts-buttons {
	justify-content: flex-start;
	margin-block: 0;
	}

/* Layout states */
@media (min-width: 30em) {
	.events-posts-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		}
}
@media (min-width: 40em) {
	.events-posts-events-only .events-posts-events {
		column-gap: var(--gap-flow);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		}
}
@media (min-width: 60em) {
	.events-posts-both {
		gap: var(--margin-less);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		}
	.events-posts-posts-only .events-posts-posts {
		align-items: center;
		column-gap: var(--gap-flow);
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		}
	.events-posts-posts-only .events-posts-buttons {
		grid-column: 1 / -1;
		}
}
@media (prefers-reduced-motion: reduce) {
	.events-posts-button {
		transition: none;
		}
}