/**
 * Single: Event
 *
 * Hero with meta row and register CTA, content body
 * with optional location footer, partner logos, related events grid.
 */

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

.single-event-hero {
	padding-bottom: var(--module-spacing-medium);
}

/*** Content ***/

.single-event-hero-content {
	align-self: center;
	grid-column: 1 / 7;
	padding-right: var(--text-spacing-large);
}

.single-event-hero-content .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.single-event-hero-content .heading-2 {
	margin: 0;
}

/*** Meta Row ***/

.single-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall) var(--text-spacing-medium);
	margin-top: var(--text-spacing-large);
}

.single-event-meta .meta {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.single-event-meta .meta svg {
	flex-shrink: 0;
}

/*** Actions ***/

.single-event-actions {
	margin-top: var(--text-spacing-large);
}

/*** Image ***/

/*
 * Event artwork is almost always a flyer — text, dates, and a drawn border
 * baked into the image — so it must never be cropped. Override the global
 * .media cover contract: the image keeps its own aspect ratio and the column
 * sizes to it instead of stretching to match the text column's height.
 */

.single-event-hero-media {
	align-self: start;
	border-radius: 16px;
	grid-column: 7 / -1;
}

.single-event-hero-media.media img {
	height: auto;
	position: relative;
	width: 100%;
}

/*
 * ====================================================================== *
 * Content Body
 * ====================================================================== *
 */

.single-event-content {
	padding-bottom: var(--module-spacing-small);
}

.single-event-content .content-styles {
	grid-column: 3 / -3;
}

/*
 * ====================================================================== *
 * Location
 * ====================================================================== *
 */

.single-event-content .single-event-location {
	grid-column: 3 / -3;
}

/* Border + spacing only when content precedes the location block — when
   there's no content body, the location sits flush with the section top. */

.single-event-content .content-styles + .single-event-location {
	border-top: 1px solid var(--wolfhound-gray);
	margin-top: var(--text-spacing-xlarge);
	padding-top: var(--text-spacing-xlarge);
}

.single-event-location .eyebrow {
	display: block;
	margin-bottom: var(--text-spacing-xsmall);
}

.single-event-location-address {
	margin: 0;
}

/*
 * ====================================================================== *
 * Partners
 * ====================================================================== *
 */

.single-event-partners {
	padding-bottom: var(--module-spacing-small);
}

.single-event-partners .eyebrow {
	margin-bottom: var(--text-spacing-medium);
}

.single-event-partners-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-event-partner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	text-align: center;
}

.single-event-partner-logo {
	height: auto;
	max-height: 80px;
	object-fit: contain;
	width: auto;
}

.single-event-partner-name {
	color: var(--grayhound);
}

/*
 * ====================================================================== *
 * Related Events
 * ====================================================================== *
 */

.single-event-related {
	margin-top: var(--module-spacing-small);
	overflow-x: clip;
}

.single-event-related > .container {
	padding-bottom: var(--module-spacing-large);
	padding-top: var(--module-spacing-small);
}

.single-event-related > .container::before {
	background-color: var(--appaloosa-beige);
	content: '';
	height: 100%;
	left: var(--viewport-edge);
	position: absolute;
	top: 0;
	width: var(--viewport-full);
	z-index: -1;
}

.single-event-related-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--text-spacing-large);
}

.single-event-related-header .heading-3 {
	margin: 0;
}

.single-event-related-grid {
	display: grid;
	gap: var(--text-spacing-large);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-event-related-grid li {
	grid-column: 1 / -1;
}

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

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

	.single-event-hero-content {
		grid-column: 1 / -1;
	}

	.single-event-hero-media {
		grid-column: 1 / -1;
		margin-top: var(--text-spacing-large);
		max-width: 600px;
	}

	.single-event-content .content-styles,
	.single-event-content .single-event-location {
		grid-column: 1 / -1;
	}

	.single-event-partners-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

}

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

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

	.single-event-meta {
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
	}

	.single-event-hero-media {
		max-width: none;
	}

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

	.single-event-related-header {
		flex-direction: column;
		gap: var(--text-spacing-small);
	}

	.single-event-related-grid {
		grid-template-columns: 1fr;
	}

}