/**
 * Archive: Events
 *
 * Hero, dropdown filters, event cards using the global .card.event pattern.
 */

/*
 * ====================================================================== *
 * Hero
 * ====================================================================== *
 */

/*
 * ====================================================================== *
 * Feed — dropdown filters + card list
 * ====================================================================== *
 */

.event-archive-feed {
	padding-top: var(--module-spacing-large);
}

/* Header row — title left, filters right */

.event-archive-header {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--module-spacing-medium);
}

.event-archive-header .heading-2 {
	margin: 0;
}

/* Filter dropdowns */

.event-filters {
	display: flex;
	gap: var(--text-spacing-xsmall);
}

/* Card overrides — event archive only */

.event-archive-feed .card.event .heading-4 {
	font-size: calc(46rem / 16);
}

.event-archive-feed .card.event p.small-text {
	font-size: calc(18rem / 16);
}

.event-archive-feed .card.event .btn.tertiary {
	align-items: center;
	border-bottom: none;
	display: inline-flex;
	font-size: calc(16rem / 16);
	gap: 10px;
	padding-bottom: 0;
}

.event-archive-feed .card.event .btn.tertiary::after {
	background: var(--goldie-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 16 8' fill='none'%3E%3Cpath d='M0 5V3H12.3871L10.6323 1.28814L11.9398 0L16 4L11.9398 8L10.6323 6.69492L12.3871 5H0Z' fill='%2303071D'/%3E%3C/svg%3E") no-repeat center center;
	border-radius: var(--border-radius-normal);
	content: '';
	display: block;
	flex-shrink: 0;
	height: 32px;
	transition: background-color 0.25s ease, transform 0.25s ease;
	width: 32px;
}

.event-archive-feed .card.event:hover .btn.tertiary {
	color: #3D5A72;
	padding-bottom: 0;
}

.event-archive-feed .card.event:hover .btn.tertiary::after {
	background-color: var(--goldie-yellow-hover);
	transform: translateX(3px);
}

.event-archive-feed .card.event .media {
	width: 336px;
}

/* Results list — matches upcoming-events module */

.event-results {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxlarge);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	.event-archive-feed {
		padding-top: var(--module-spacing-small);
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.event-archive-featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.event-archive-header {
		align-items: stretch;
		flex-direction: column;
		gap: var(--text-spacing-medium);
	}

	.event-archive-feed .card.event {
		align-items: flex-start;
		gap: var(--text-spacing-medium);
	}

	.event-archive-feed .card.event .media {
		margin-top: 8px;
		width: 286px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.event-filters {
		flex-direction: column;
	}

	.event-archive-feed .card.event .media {
		aspect-ratio: 269 / 200;
		max-width: none;
		width: 100%;
	}

	.event-archive-feed .card.event .media img {
		height: 100%;
		position: absolute;
	}

	.event-archive-header {
		gap: var(--module-spacing-small);
		margin-bottom: var(--text-spacing-small);
	}

}