/*
 * ArenaSoldOut event page (aso-event-page.php, templates/aso-event.php).
 *
 * Design tokens: Playfair Display for headings, Inter for text (system sans until the Inter
 * files are on disk), brand colours from the Elementor kit, and one spacing scale on a 4px
 * grid — every margin, gap and padding below is a token, never a loose number.
 */

.aso-event {
	--aso-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--aso-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--aso-ink: #070707;
	--aso-muted: #5b6275;
	--aso-line: #e4e7ef;
	--aso-surface: #f5f6fa;
	--aso-brand: #001389;
	--aso-brand-hover: #000f6b;
	--aso-accent: #00dafc;
	--aso-alert: #f05537;

	--aso-space-1: 4px;
	--aso-space-2: 8px;
	--aso-space-3: 12px;
	--aso-space-4: 16px;
	--aso-space-5: 24px;
	--aso-space-6: 32px;
	--aso-space-7: 48px;
	--aso-space-8: 64px;

	--aso-radius: 12px;
	--aso-radius-sm: 8px;
	--aso-gutter: var(--aso-space-4);
	--aso-section-gap: var(--aso-space-7);
	--aso-section-pad: var(--aso-space-6);

	font-family: var(--aso-font-text);
	font-size: 16px;
	line-height: 1.6;
	color: var(--aso-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

.aso-event *,
.aso-event *::before,
.aso-event *::after {
	box-sizing: border-box;
}

.aso-event__wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--aso-space-5) var(--aso-gutter) var(--aso-space-8);
}

/* ── breadcrumbs ─────────────────────────────────────────────── */

.aso-event__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aso-space-2);
	margin: 0 0 var(--aso-space-5);
	font-size: 13px;
	line-height: 1.4;
	color: var(--aso-muted);
}

.aso-event__crumbs a {
	color: var(--aso-muted);
	text-decoration: none;
}

.aso-event__crumbs a:hover {
	color: var(--aso-brand);
	text-decoration: underline;
}

/* ── hero: poster + facts ────────────────────────────────────── */

.aso-event__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aso-space-5);
	align-items: start;
	margin: 0;
}

.aso-event__poster {
	margin: 0;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 640 / 670;
	border-radius: var(--aso-radius);
	overflow: hidden;
	background: var(--aso-surface);
}

.aso-event__poster img,
.aso-event__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aso-event__poster-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--aso-brand), #1c244b);
}

.aso-event__poster-empty span {
	font-family: var(--aso-font-display);
	font-size: 96px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.9);
}

.aso-event__info {
	min-width: 0;
}

.aso-event__eyebrow {
	margin: 0 0 var(--aso-space-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aso-brand);
}

.aso-event .aso-event__title {
	margin: 0 0 var(--aso-space-5);
	font-family: var(--aso-font-display);
	font-size: clamp(30px, 4.2vw, 48px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--aso-ink);
	overflow-wrap: anywhere;
}

.aso-event__facts {
	display: grid;
	gap: var(--aso-space-4);
	margin: 0 0 var(--aso-space-6);
	padding: 0;
	list-style: none;
}

.aso-event__facts li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--aso-space-3);
	align-items: start;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
}

.aso-event__icon {
	margin-top: 2px; /* centres the 20px icon on the first 24px text line */
	color: var(--aso-brand);
}

.aso-event__facts strong {
	font-weight: 600;
}

.aso-event__sub {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aso-muted);
}

.aso-event__facts li > span > .aso-event__sub:first-child {
	display: inline;
}

/* ── purchase ────────────────────────────────────────────────── */

.aso-event__buy {
	padding-top: var(--aso-space-5);
	border-top: 1px solid var(--aso-line);
}

/* The purchase modal puts its own button after the form; the form's selects are then noise. */
.aso-event__buy:has(.vino-book-trigger) form.cart {
	display: none;
}

.aso-event .vino-book-trigger,
.aso-event .aso-event__to-map,
.aso-event__buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: var(--aso-space-3) var(--aso-space-6);
	border: 0;
	border-radius: var(--aso-radius-sm);
	background: var(--aso-brand);
	color: #fff;
	font-family: var(--aso-font-text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.aso-event .vino-book-trigger:hover,
.aso-event .aso-event__to-map:hover,
.aso-event__buy .single_add_to_cart_button:hover {
	background: var(--aso-brand-hover);
	color: #fff;
}

.aso-event .vino-book-trigger:focus-visible,
.aso-event .aso-event__to-map:focus-visible,
.aso-event__buy .single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--aso-accent);
	outline-offset: 2px;
}

.aso-event__state {
	margin: 0;
	padding: var(--aso-space-3) var(--aso-space-4);
	border-radius: var(--aso-radius-sm);
	background: var(--aso-surface);
	font-weight: 600;
	color: var(--aso-muted);
}

.aso-event__state--sold {
	color: var(--aso-alert);
}

/* ── sections below the hero ─────────────────────────────────── */

.aso-event__section {
	margin-top: var(--aso-section-gap);
	padding-top: var(--aso-section-pad);
	border-top: 1px solid var(--aso-line);
}

.aso-event .aso-event__h2 {
	margin: 0 0 var(--aso-space-4);
	font-family: var(--aso-font-display);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--aso-ink);
}

.aso-event__text {
	max-width: 70ch;
	font-size: 17px;
	line-height: 1.65;
}

.aso-event__text > * {
	margin: 0 0 var(--aso-space-4);
}

.aso-event__text > *:last-child {
	margin-bottom: 0;
}

.aso-event__venue-name {
	margin: 0 0 var(--aso-space-1);
	font-size: 18px;
	font-weight: 600;
}

.aso-event__venue .aso-event__sub {
	margin: 0 0 var(--aso-space-3);
}

.aso-event__link {
	font-weight: 600;
	color: var(--aso-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── partners: folded under the buy button ───────────────────── */

.aso-event__partners {
	margin-top: var(--aso-space-4);
}

.aso-event__partners summary {
	display: inline-flex;
	align-items: center;
	gap: var(--aso-space-2);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aso-muted);
	cursor: pointer;
	list-style: none;
}

.aso-event__partners summary::-webkit-details-marker {
	display: none;
}

.aso-event__partners summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.aso-event__partners[open] summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.aso-event__partners summary:hover {
	color: var(--aso-brand);
}

.aso-event__partner-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aso-space-2);
	margin-top: var(--aso-space-3);
}

.aso-event .aso-event__partner {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: var(--aso-space-2) var(--aso-space-4);
	border: 1px solid var(--aso-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--aso-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.aso-event .aso-event__partner:hover {
	border-color: var(--aso-brand);
	color: var(--aso-brand);
}

/* ── gallery ─────────────────────────────────────────────────── */

.aso-event__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aso-space-3);
}

.aso-event__photo {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--aso-radius-sm);
	overflow: hidden;
	background: var(--aso-surface);
}

.aso-event__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.aso-event__photo:hover img {
	transform: scale(1.03);
}

/* ── video: a poster frame until the visitor presses play ────── */

.aso-event__video-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aso-space-4);
}

.aso-event__video,
.aso-event__video-grid > iframe {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--aso-radius-sm);
	overflow: hidden;
	background: #111;
	cursor: pointer;
}

.aso-event__video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.aso-event__video:hover img {
	opacity: 1;
}

.aso-event__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--aso-brand);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.aso-event__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}

.aso-event__video:focus-visible {
	outline: 3px solid var(--aso-accent);
	outline-offset: 2px;
}

/* ── venue map ───────────────────────────────────────────────── */

.aso-event__map {
	margin: 0 0 var(--aso-space-3);
	aspect-ratio: 16 / 9;
	border-radius: var(--aso-radius-sm);
	overflow: hidden;
	background: var(--aso-surface);
}

.aso-event__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The seat map brings its own heading; give it the page's heading style. */
.aso-event .bsp-header {
	margin: 0 0 var(--aso-space-3);
}

.aso-event .bsp-title {
	margin: 0;
	font-family: var(--aso-font-display);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--aso-ink);
}

/* ── tablet and up ───────────────────────────────────────────── */

@media (min-width: 640px) {
	.aso-event {
		--aso-gutter: var(--aso-space-5);
	}

	.aso-event .vino-book-trigger,
	.aso-event .aso-event__to-map,
	.aso-event__buy .single_add_to_cart_button {
		width: auto;
		min-width: 240px;
	}
}

/* ── desktop: poster beside the facts ────────────────────────── */

@media (min-width: 960px) {
	.aso-event {
		--aso-gutter: var(--aso-space-6);
		--aso-section-gap: var(--aso-space-8);
		--aso-section-pad: var(--aso-space-7);
	}

	.aso-event__wrap {
		padding-top: var(--aso-space-6);
	}

	.aso-event__hero {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--aso-space-7);
	}

	.aso-event__poster {
		max-width: none;
	}

	.aso-event__photos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--aso-space-4);
	}

	.aso-event__video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--aso-space-5);
	}

	.aso-event__map {
		aspect-ratio: 21 / 9;
	}

	.aso-event__info {
		padding-top: var(--aso-space-2);
	}
}

/* A single video spans the full width instead of half of it. */
.aso-event__video-grid > :only-child {
	grid-column: 1 / -1;
}