/* === Events Page === */

.events-header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.events-list {
	display: grid;
	gap: var(--space-md);
	max-width: 900px;
	margin-inline: auto;
}

.events-section {
	padding: var(--space-4xl) 0;
}

@media (min-width: 768px) {
	.events-section {
		padding: var(--space-5xl) 0;
	}
}

.events-empty {
	text-align: center;
	padding: var(--space-3xl);
	color: var(--color-text-muted);
}

/* --- Events Page CTA --- */
.events-cta {
	text-align: center;
	padding: var(--space-3xl) 0;
	background-color: var(--color-teal-mid);
}

.events-cta h2 {
	margin-bottom: var(--space-md);
}

/* --- Loading State --- */
.events-loading {
	text-align: center;
	padding: var(--space-3xl);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
}

.events-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-teal-light);
	border-top-color: var(--color-gold);
	border-radius: 50%;
	animation: events-spin 0.6s linear infinite;
}

@keyframes events-spin {
	to {
		transform: rotate(360deg);
	}
}

.events-cta p {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
	max-width: 500px;
	margin-inline: auto;
}