/**
 * Event — single tribe_events.
 *
 * Event-specific template layer. Generic primitives live in components/*.css.
 * Token references updated for new design system.
 */

.slist-main--event {
	padding: 0 0 var(--slist-space-10);
}

/* Force-zero all GP container padding-top on event pages so flyer sits flush with nav */
.slist-event-page .inside-article,
.slist-event-page .entry-content,
.slist-event-page .site-content,
.slist-event-page .site-content > .container,
.slist-event-page .content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.slist-event {
	text-align: center;
	color: var(--slist-text-primary);
}

/* ---- Desktop: two-column layout (flyer left, info right) ---- */

@media (min-width: 1024px) {
	.slist-event,
	.slist-event.slist-container {
		max-width: var(--slist-content-wide);
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--slist-space-7);
		align-items: start;
		text-align: left;
		padding-top: var(--slist-space-7);
	}

	.slist-event__flyer {
		position: sticky;
		top: var(--slist-space-7);
		align-self: start;
		margin-bottom: 0 !important;
	}

	.slist-event__details {
		text-align: left;
	}

	.slist-event__details > * {
		text-align: left;
	}
}

/* ---- Flyer ---- */

.slist-event__flyer {
	width: 100%;
	max-width: 100%;
	margin: 0 auto var(--slist-space-5);
	border-radius: var(--slist-radius-lg);
	overflow: hidden;
	box-shadow: var(--slist-shadow-md);
}

.slist-event__flyer img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Title ---- */

.slist-event__title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-display);
	font-weight: var(--slist-weight-regular);
	letter-spacing: var(--slist-ls-tight);
	line-height: var(--slist-lh-tight);
	margin: 0 0 var(--slist-space-3);
}

/* ---- Date row ---- */

a.slist-event__date,
.slist-event__date {
	display: inline-block;
	font-size: var(--slist-text-body);
	margin: 0 0 var(--slist-space-4);
	letter-spacing: var(--slist-ls-snug);
	line-height: 1.4;
	color: var(--slist-text-primary);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--slist-separator-medium);
	text-underline-offset: 3px;
	transition: color var(--slist-transition-fast), text-decoration-color var(--slist-transition-fast);
}

a.slist-event__date:focus-visible {
	color: var(--slist-text-primary);
	text-decoration-color: var(--slist-primary);
	text-decoration-style: solid;
}

@media (hover: hover) {
	a.slist-event__date:hover {
		color: var(--slist-text-primary);
		text-decoration-color: var(--slist-primary);
		text-decoration-style: solid;
}
}

.slist-event__date-icon {
	display: inline-block;
	margin-right: 0.4em;
	opacity: 0.7;
	color: var(--slist-text-secondary);
	vertical-align: -2px;
}

/* ---- Venue + address ---- */

.slist-event__venue {
	font-size: var(--slist-text-body);
	margin: 0 0 var(--slist-space-3);
	line-height: 1.5;
}

.slist-event__venue-name {
	font-family: var(--slist-font-body);
	font-weight: var(--slist-weight-semibold);
	color: var(--slist-text-primary);
	margin-right: 0.25em;
}

.slist-event__venue-address {
	color: var(--slist-text-secondary);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--slist-separator-medium);
	text-underline-offset: 3px;
	transition: color var(--slist-transition-fast), text-decoration-color var(--slist-transition-fast);
}

.slist-event__venue-icon {
	display: inline-block;
	margin-right: 0.4em;
	opacity: 0.7;
	color: var(--slist-text-secondary);
	vertical-align: -2px;
}

a.slist-event__venue-address:focus-visible {
	color: var(--slist-text-primary);
	text-decoration-color: var(--slist-primary);
	text-decoration-style: solid;
}

@media (hover: hover) {
	a.slist-event__venue-address:hover {
		color: var(--slist-text-primary);
		text-decoration-color: var(--slist-primary);
		text-decoration-style: solid;
}
}

/* ---- Age badge ---- */

.slist-event__age {
	margin: 0 0 var(--slist-space-5);
}

/* ---- Sections (tickets + lineup) ---- */

.slist-event__tickets,
.slist-event__lineup {
	margin: var(--slist-space-5) 0;
	text-align: left;
}

/* ---- Ticket cards — ET+ markup override ---- */

.slist-event .tribe-tickets__tickets-wrapper {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.slist-event .tribe-tickets__tickets-title {
	color: var(--slist-text-primary) !important;
	font-family: var(--slist-font-body) !important;
	font-size: var(--slist-text-eyebrow) !important;
	font-weight: var(--slist-weight-semibold) !important;
	letter-spacing: var(--slist-ls-wider) !important;
	text-transform: uppercase !important;
	margin: 0 0 var(--slist-space-2) !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.slist-event .tribe-tickets__tickets-item {
	background: var(--slist-surface) !important;
	border: 1px solid var(--slist-separator) !important;
	border-radius: var(--slist-radius-lg) !important;
	padding: var(--slist-space-3) !important;
	margin-bottom: var(--slist-space-2) !important;
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	align-items: center !important;
	transition: border-color var(--slist-transition-fast);
}

@media (hover: hover) {
	.slist-event .tribe-tickets__tickets-item:hover {
		border-color: var(--slist-separator-medium) !important;
}
}

/* Strip ET+ default borders/separators on the footer + any hr-like dividers */
.slist-event .tribe-tickets__tickets-footer,
.slist-event .tribe-tickets__tickets-footer-quantity,
.slist-event .tribe-tickets__tickets-footer-total,
.slist-event .tribe-tickets__tickets-footer-total-wrap,
.slist-event__tickets hr,
.slist-event .tribe-tickets__tickets-form > hr {
	border-top: none !important;
	border-bottom: none !important;
	border: none !important;
	background: transparent !important;
}

.slist-event .tribe-tickets__tickets-item-content-title-container {
	grid-column: 1 !important;
	grid-row: 1 !important;
}

.slist-event .tribe-tickets__tickets-item-content-title-container .tribe-common-h7 {
	font-weight: var(--slist-weight-semibold) !important;
	font-size: var(--slist-text-body) !important;
	color: var(--slist-text-primary) !important;
}

.slist-event .tribe-tickets__tickets-item-extra {
	grid-column: 1 !important;
	grid-row: 2 !important;
	color: var(--slist-text-secondary) !important;
	font-size: var(--slist-text-callout) !important;
	text-align: left !important;
	justify-self: start !important;
}

.slist-event .tribe-tickets__tickets-item-extra-price,
.slist-event .tribe-tickets__tickets-item-extra-price .tribe-amount,
.slist-event .tribe-tickets__tickets-item-extra-price .tribe-currency-symbol {
	color: var(--slist-text-secondary) !important;
	text-align: left !important;
}

.slist-event .tribe-common-h4.tribe-tickets__tickets-item-quantity {
	grid-column: 2 !important;
	grid-row: 1 / 3 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Nuclear: strip ALL backgrounds, borders, shadows from the quantity widget tree */
.slist-event .tribe-tickets__tickets-item-quantity,
.slist-event .tribe-tickets__tickets-item-quantity *,
.slist-event .tribe-tickets__tickets-item-quantity *::before,
.slist-event .tribe-tickets__tickets-item-quantity *::after {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Re-apply circle styling to +/- buttons only */
.slist-event .tribe-tickets__tickets-item-quantity-add,
.slist-event .tribe-tickets__tickets-item-quantity-remove {
	border: 1px solid var(--slist-separator-medium) !important;
	border-radius: 50% !important;
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: border-color var(--slist-transition-fast), color var(--slist-transition-fast) !important;
}

@media (hover: hover) {
	.slist-event .tribe-tickets__tickets-item-quantity-add:hover,
	.slist-event .tribe-tickets__tickets-item-quantity-remove:hover {
		border-color: var(--slist-primary) !important;
		color: var(--slist-primary) !important;
}
}

/* Kill the "highlighted" look on the number input — selection, focus, autofill, caret */
.slist-event .tribe-tickets__tickets-item-quantity-number-input::selection,
.slist-event .tribe-tickets__tickets-item-quantity-number-input::-moz-selection {
	background: transparent !important;
	color: inherit !important;
}

.slist-event .tribe-tickets__tickets-item-quantity-number-input:focus,
.slist-event .tribe-tickets__tickets-item-quantity-number-input:focus-visible,
.slist-event .tribe-tickets__tickets-item-quantity-number-input:active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	caret-color: var(--slist-primary) !important;
}

/* Match ET+'s exact selector chain to override its input border in tickets-forms.css */
.event-tickets .tribe-tickets__form input[type=number],
.event-tickets .tribe-tickets__form input[type=number]:focus,
body.slist-event-page input[type="number"].tribe-tickets__tickets-item-quantity-number-input,
body.slist-event-page input[type="number"].tribe-common-h3,
.slist-event .tribe-common-h3.tribe-tickets__tickets-item-quantity-number-input,
.slist-event .tribe-common-h4--min-medium.tribe-tickets__tickets-item-quantity-number-input,
.slist-event .tribe-tickets__tickets-item-quantity-number > * {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 none !important;
	border-color: transparent !important;
	border-width: 0 !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	width: auto !important;
}

@media (hover: hover) {
	.event-tickets .tribe-tickets__form input[type=number]:hover {
		background: none !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		border: 0 none !important;
		border-color: transparent !important;
		border-width: 0 !important;
		border-radius: 0 !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		width: auto !important;
}
}

/* Defeat browser autofill yellow tint */
.slist-event .tribe-tickets__tickets-item-quantity-number-input:-webkit-autofill,
.slist-event .tribe-tickets__tickets-item-quantity-number-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	-webkit-text-fill-color: var(--slist-text-primary) !important;
	transition: background-color 5000s ease-in-out 0s !important;
}

@media (hover: hover) {
	.slist-event .tribe-tickets__tickets-item-quantity-number-input:-webkit-autofill:hover {
		-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
		-webkit-text-fill-color: var(--slist-text-primary) !important;
		transition: background-color 5000s ease-in-out 0s !important;
}
}

.slist-event .tribe-tickets__tickets-item-quantity-number-input,
.slist-event input[type="number"].tribe-tickets__tickets-item-quantity-number-input {
	-webkit-appearance: none !important;
	appearance: none !important;
	-moz-appearance: textfield !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--slist-text-primary) !important;
	text-align: center !important;
}

/* Hide native number-input spinners on WebKit (Chrome/Safari) */
.slist-event .tribe-tickets__tickets-item-quantity-number-input::-webkit-outer-spin-button,
.slist-event .tribe-tickets__tickets-item-quantity-number-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}

.slist-event .tribe-tickets__tickets-item-quantity-add,
.slist-event .tribe-tickets__tickets-item-quantity-remove {
	color: var(--slist-text-secondary) !important;
}

/* ---- Lineup rows ---- */

.slist-event .slist-lineup-wrap {
	margin: var(--slist-space-4) 0 var(--slist-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--slist-space-2);
}

.slist-event .slist-lineup-label {
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	font-weight: var(--slist-weight-semibold);
	text-transform: uppercase;
	color: var(--slist-text-secondary);
	margin: 0 0 var(--slist-space-1);
	line-height: 1;
}

/* Secret lineup tease — shown when _slist_secret_lineup meta is enabled.
   Replaces the full lineup grid with a single line: "Revealed on the night." */
.slist-event .slist-lineup-tease {
	font-size: var(--slist-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slist-text-muted);
	margin: 0;
	padding: var(--slist-space-2) 0;
	line-height: 1.4;
}

.slist-event .lineup-row {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-areas:
		"photo  name"
		"photo  socials";
	column-gap: var(--slist-space-3);
	row-gap: 2px;
	align-items: center;
	padding: var(--slist-space-3);
	background: var(--slist-surface);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-lg);
	transition: border-color var(--slist-transition-fast);
}

@media (hover: hover) {
	.slist-event .lineup-row:hover {
		border-color: var(--slist-separator-medium);
}
}

.slist-event .lineup-row.is-headliner {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--slist-separator-medium);
}

.slist-event .lineup-row.is-headliner + .lineup-row.is-support {
	margin-top: var(--slist-space-2);
}

.slist-event .lineup-photo,
.slist-event .lineup-monogram {
	grid-area: photo;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

.slist-event .lineup-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.slist-event .lineup-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--slist-text-primary);
	font-size: var(--slist-text-title3);
	font-weight: var(--slist-weight-medium);
	text-transform: uppercase;
	font-family: var(--slist-font-display);
}

.slist-event .lineup-name-wrap {
	grid-area: name;
	align-self: end;
	line-height: 1.2;
}

.slist-event .lineup-name {
	font-weight: var(--slist-weight-medium);
	font-size: var(--slist-text-body);
	color: var(--slist-text-primary);
	text-decoration: none;
}

.slist-event .lineup-name:focus-visible {
	color: var(--slist-primary);
}

@media (hover: hover) {
	.slist-event .lineup-name:hover {
		color: var(--slist-primary);
}
}

.slist-event .lineup-socials {
	grid-area: socials;
	display: flex;
	gap: var(--slist-space-3);
	align-items: center;
	line-height: 0;
}

.slist-event .lineup-socials a {
	color: var(--slist-text-secondary);
	display: inline-flex;
	transition: color var(--slist-transition-fast);
}

.slist-event .lineup-socials a:focus-visible {
	color: var(--slist-text-primary);
}

@media (hover: hover) {
	.slist-event .lineup-socials a:hover {
		color: var(--slist-text-primary);
}
}

.slist-event .lineup-socials svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ---- Trailing links ---- */

.slist-event__links {
	display: flex;
	justify-content: center;
	gap: var(--slist-space-5);
	margin: var(--slist-space-8) 0 var(--slist-space-5);
	padding-top: var(--slist-space-4);
	border-top: 1px solid var(--slist-separator);
	flex-wrap: wrap;
}

.slist-event__links a {
	font-size: var(--slist-text-callout);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	font-weight: var(--slist-weight-medium);
}

@media (max-width: 640px) {
	.slist-event__links {
		gap: var(--slist-space-3);
	}
}

/* Match express checkout (Apple Pay / Google Pay / Pay another way) width to ticket cards */
.slist-event .slist-express-wrap {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---- External ticket button (POSH/Eventbrite/etc., lives inside .slist-event__tickets) ----
   Reads as an active option: white text, white border, transparent bg.
   Stronger than the default ghost so users don't mistake it for a subtle
   secondary link when it's sometimes the ONLY way to buy tickets.         */

.slist-event__external-tickets {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: var(--slist-space-2);
	text-align: center;
	justify-content: center;
	background: transparent !important;
	color: var(--slist-text-primary) !important;
	border: 1px solid var(--slist-text-primary) !important;
	font-weight: var(--slist-weight-bold);
	transition:
		background var(--slist-transition-fast),
		border-color var(--slist-transition-fast);
}

.slist-event__external-tickets:focus-visible {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--slist-text-primary) !important;
	color: var(--slist-text-primary) !important;
}

@media (hover: hover) {
	.slist-event__external-tickets:hover {
		background: rgba(255, 255, 255, 0.08) !important;
		border-color: var(--slist-text-primary) !important;
		color: var(--slist-text-primary) !important;
}
}

/* "or" divider — shown only when the event has both inline tickets AND an
   external URL, making the relationship explicit. Horizontal rule with
   centered "or" in SLIST eyebrow typography. */
.slist-event__ticket-divider {
	display: flex;
	align-items: center;
	gap: var(--slist-space-3);
	/* Section-gap breathing (space-5 = 32px). Tighter than space-6 because
	   the two flanking CTAs are alternatives to the same goal (buy tickets
	   inline vs leave the site), not distinct page sections. */
	margin: var(--slist-space-5) 0 var(--slist-space-5);
	/* Bumped from text-tertiary (0.40α) to text-secondary (0.60α) —
	   reads as an active affordance, not a muted caption. */
	color: var(--slist-text-secondary);
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
}

.slist-event__ticket-divider::before,
.slist-event__ticket-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	/* Bumped from separator (0.08α) to separator-medium (0.15α) —
	   almost 2× visibility, still restrained. */
	background: var(--slist-separator-medium);
}

.slist-event__ticket-divider span {
	flex: 0 0 auto;
}

/* ================================================================
   Events archive — 3-column portrait grid
   ================================================================ */

.slist-main--events {
	padding: var(--slist-space-7) 0 var(--slist-space-10);
}

/* ---- Events archive — linktree-style rows with golden ratio ----
   Flyer on the left (smaller, golden-ratio 38.2%), info on the right
   (larger, 61.8%). Taller than blog linktree bars so the poster has
   presence. Glass background + red corner glint for consistency with
   the rest of the site.
*/

.slist-events__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 960px;
	margin: 0 auto;
}

.slist-event-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
	border-radius: var(--slist-radius-lg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 2px 16px rgba(0, 0, 0, 0.35);
	text-decoration: none;
	color: inherit;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 240px;
	transition:
		background var(--slist-transition-default),
		transform var(--slist-transition-default);
}

/* Red corner glint — consistent with other glass surfaces */
.slist-event-row::after {
	content: "";
	position: absolute;
	top: -5%;
	left: -5%;
	width: 28%;
	height: 60%;
	background: radial-gradient(
		ellipse at 0% 0%,
		rgba(255, 0, 0, 0.22) 0%,
		transparent 65%
	);
	opacity: 0.4;
	pointer-events: none;
	transition: opacity var(--slist-transition-default);
	z-index: 0;
	border-radius: inherit;
}

.slist-event-row > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.slist-event-row:hover {
		background: rgba(255, 255, 255, 0.07);
		transform: translateY(-2px);
}
}

@media (hover: hover) {
	.slist-event-row:hover::after {
		opacity: 0.9;
}
}

/* Media — golden-ratio smaller half (38.2%). Fills full card height.
   Object-fit cover + tall min-height = flyer is cropped to show the key
   visual area without letterboxing. */
.slist-event-row__media {
	flex: 0 0 38.2%;
	max-width: 38.2%;
	min-height: 240px;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.slist-event-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
	.slist-event-row:hover .slist-event-row__media img {
		transform: scale(1.04);
}
}

/* Body — golden-ratio larger half (61.8%). Vertically centered content. */
.slist-event-row__body {
	flex: 1 1 61.8%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 24px 60px 24px 28px; /* right padding reserves arrow space */
	min-width: 0;
}

.slist-event-row__eyebrow {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	color: var(--slist-text-tertiary);
	margin: 0;
}

.slist-event-row__title {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-title1);
	font-weight: var(--slist-weight-semibold);
	letter-spacing: -0.015em;
	color: var(--slist-text-primary);
	margin: 0;
	line-height: 1.15;
	/* Allow 2 lines before truncation — titles like "SPRING FLING: ARTY + RYOS" need room */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slist-event-row__venue {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-callout);
	color: var(--slist-text-secondary);
	margin: 4px 0 0;
}

.slist-event-row__excerpt {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-callout);
	color: var(--slist-text-secondary);
	margin: 8px 0 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slist-event-row__dot {
	display: inline-block;
	margin: 0 6px;
	opacity: 0.5;
}

.slist-event-row__arrow {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--slist-text-secondary);
	transition: color var(--slist-transition-default), transform var(--slist-transition-default);
	z-index: 2;
}

@media (hover: hover) {
	.slist-event-row:hover .slist-event-row__arrow {
		color: var(--slist-primary);
		transform: translateY(-50%) translateX(4px);
}
}

/* ---- Mobile: keep horizontal row but tighter ---- */
@media (max-width: 640px) {
	.slist-events__list {
		gap: 12px;
	}
	.slist-event-row {
		min-height: 180px;
	}
	.slist-event-row__media {
		min-height: 180px;
	}
	.slist-event-row__body {
		padding: 16px 40px 16px 16px;
		gap: 4px;
	}
	.slist-event-row__title {
		font-size: var(--slist-text-title2);
	}
	.slist-event-row__excerpt {
		display: none; /* too cramped on phone; keep date + title + venue */
	}
	.slist-event-row__arrow {
		right: 14px;
		font-size: 16px;
	}
}

/*
 * ---- Desktop: 3-column poster-gallery layout ----
 *
 * Mobile stays as linktree horizontal rows (above). On desktop the flyer
 * becomes the focus: 3 posters across with info below each. Flyers keep
 * a 3:4 aspect ratio so they read as posters, not cropped banners.
 *
 * Breakpoint at 768px — matches the tablet/desktop split used elsewhere
 * in the theme. Below 768 we want the linktree row treatment; at 768+
 * there's enough horizontal room for a proper 3-across poster grid.
 */
@media (min-width: 768px) {
	.slist-events__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--slist-space-5);
		max-width: 1120px;
	}

	.slist-event-row {
		flex-direction: column;
		align-items: stretch;
		min-height: 0; /* grid tracks size from content */
	}

	/* Media becomes full-width top of card with poster proportions. */
	.slist-event-row__media {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
		aspect-ratio: 3 / 4;
		min-height: 0;
	}

	/* Body stacks below the flyer, left-aligned, arrow gets its own row. */
	.slist-event-row__body {
		flex: 1 1 auto;
		padding: 20px 24px 56px 24px; /* bottom reserves arrow space */
		justify-content: flex-start;
		gap: 8px;
	}

	.slist-event-row__title {
		font-size: var(--slist-text-title2);
	}

	.slist-event-row__excerpt {
		/* Keep 2-line clamp — enough signal without the card turning into a wall */
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* Arrow lives at bottom-right of the body so it doesn't collide with the flyer. */
	.slist-event-row__arrow {
		top: auto;
		bottom: 18px;
		right: 20px;
		transform: none;
	}
	@media (hover: hover) {
	.slist-event-row:hover .slist-event-row__arrow {
			transform: translateX(4px);
	}
}

	/* Red glint stays in the top-left corner of the flyer — where it lives
	   on other cards for consistency with the red-sun light source. */
	.slist-event-row::after {
		width: 40%;
		height: 30%;
	}
}

/* ---- Footer ---- */

/* ---- Archive header ---- */

.slist-events__header {
	text-align: center;
	margin-bottom: var(--slist-space-7);
}

.slist-events__title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-display);
	font-weight: var(--slist-weight-regular);
	color: var(--slist-text-primary);
	margin: var(--slist-space-2) 0 0;
}

/* ---- Pagination ---- */

.slist-events__pagination {
	display: flex;
	justify-content: center;
	gap: var(--slist-space-2);
	margin-top: var(--slist-space-8);
}

.slist-events__pagination a,
.slist-events__pagination span {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-callout);
	color: var(--slist-text-secondary);
	text-decoration: none;
	padding: var(--slist-space-2) var(--slist-space-3);
}

@media (hover: hover) {
	.slist-events__pagination a:hover {
		color: var(--slist-text-primary);
}
}

.slist-events__pagination .current {
	color: var(--slist-primary);
}

/* ---- Footer ---- */

.slist-events__footer {
	margin-top: var(--slist-space-10);
}

/* =============================================================================
 * Past events archive — /e/archive/   (v2)
 *
 * v2 notes:
 *   - Category tabs at top (All / Organized / Co-promoted) — Shopify-style
 *     segmented filters. Active tab gets a white fill + black text.
 *   - Flyers NO LONGER CROP. Each tile uses a blurred-self backdrop behind
 *     an `object-fit: contain` image, so portrait flyers (1080×1920)
 *     letterbox cleanly without losing content.
 *   - Date + City, State, Country caption BELOW each flyer, not as a
 *     hover-only ribbon. Date format: "Mar 12 · 2024".
 *   - Infinite scroll via sentinel element + IntersectionObserver (no
 *     pagination buttons).
 * =============================================================================
 */

.slist-main--past-events {
	padding: clamp(var(--slist-space-7), 6vw, var(--slist-space-9)) 0 var(--slist-space-10);
}

.slist-past-events__header {
	text-align: center;
	margin-bottom: var(--slist-space-7);
}

.slist-past-events__title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-display);
	font-weight: var(--slist-weight-regular);
	color: var(--slist-text-primary);
	margin: var(--slist-space-2) 0 var(--slist-space-2);
	letter-spacing: -0.02em;
}

.slist-past-events__count {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	color: var(--slist-text-tertiary);
	margin: 0;
}

/* Row-major masonry — flyers fill left-to-right then top-to-bottom so the
   newest event sits at the top-left and reading order matches the DESC-by-
   date query, but each tile keeps its native aspect ratio (no crop). True
   masonry packing is achieved via JS that sets `grid-row-end: span N` on
   each tile based on rendered media height + caption height. The
   `grid-auto-rows: 8px` value is the row-span unit; smaller = finer pack.
   See past-events.js layout pass + mu-plugin observer. Mobile (≤480) drops
   to a single column = top-down stack (no masonry math needed). */
.slist-past-events-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 8px;
	gap: 0 var(--slist-space-3);
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Grid items default to min-width: auto (= min-content). On narrow
   viewports a long event title or unbreakable text could push the
   item wider than its 1fr column → the whole grid overflows the
   viewport. Forcing min-width: 0 lets cells shrink correctly. */
.slist-past-events-grid > * {
	min-width: 0;
}

@media (max-width: 1024px) {
	.slist-past-events-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 var(--slist-space-2);
	}
}

@media (max-width: 720px) {
	.slist-past-events-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Category tabs ---- */
.slist-past-events__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0 auto var(--slist-space-6);
	max-width: 1280px;
}

.slist-past-events__tab {
	appearance: none;
	background: transparent;
	border: 1px solid var(--slist-separator-medium);
	border-radius: var(--slist-radius-pill);
	padding: 8px 18px;
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	color: var(--slist-text-secondary);
	cursor: pointer;
	transition:
		background var(--slist-transition-fast),
		color var(--slist-transition-fast),
		border-color var(--slist-transition-fast);
	-webkit-tap-highlight-color: transparent;
}
.slist-past-events__tab:focus-visible {
	color: var(--slist-text-primary);
	border-color: var(--slist-text-primary);
	outline: none;
}

@media (hover: hover) {
	.slist-past-events__tab:hover {
		color: var(--slist-text-primary);
		border-color: var(--slist-text-primary);
		outline: none;
}
}
.slist-past-events__tab.is-active {
	background: #ffffff;
	color: #000;
	border-color: #ffffff;
}

/* ---- Flyer tile ----
   Each tile is a grid item; the JS masonry pass sets `grid-row-end: span N`
   based on rendered media height so tiles keep their NATIVE aspect (no
   crop) and pack into a row-major masonry. Bottom margin gives vertical
   gap between tiles inside the same column without using grid `row-gap`
   (which would mess up the masonry math). */
.slist-past-event {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform var(--slist-transition-default);
	margin-bottom: var(--slist-space-3);
}

.slist-past-event__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--slist-radius-md);
	background: #000;
	isolation: isolate;
	line-height: 0; /* no gap below inline image */
}

/* Foreground flyer — native aspect, no crop. Hover = subtle zoom. */
.slist-past-event__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slist-past-event:focus-visible .slist-past-event__img {
	transform: scale(1.03);
}

@media (hover: hover) {
	.slist-past-event:hover .slist-past-event__img {
		transform: scale(1.03);
}
}

.slist-past-event__fallback {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	padding: var(--slist-space-3);
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-title3);
	color: var(--slist-text-secondary);
	text-align: center;
	line-height: 1.15;
}

/* Caption — date · city, centered in a single row under the flyer. */
.slist-past-event__caption {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	padding: var(--slist-space-2) 2px 0;
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-caption);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
}

.slist-past-event__date {
	font-weight: var(--slist-weight-medium);
	color: var(--slist-text-primary);
}

.slist-past-event__sep {
	color: var(--slist-text-quaternary);
}

.slist-past-event__location {
	color: var(--slist-text-tertiary);
}

.slist-past-event:focus-visible {
	outline: 2px solid var(--slist-primary);
	outline-offset: 2px;
}

/* ---- Infinite scroll sentinel + status ---- */
.slist-past-events__sentinel {
	height: 1px;
	margin-top: var(--slist-space-8);
}

.slist-past-events__status {
	text-align: center;
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-eyebrow);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	color: var(--slist-text-tertiary);
	margin: var(--slist-space-5) 0 var(--slist-space-8);
	min-height: 1em;
}

/* =============================================================================
 * Upcoming events page hero + grid count-tolerance.
 * =============================================================================
 */

.slist-events__hero {
	text-align: center;
	margin-bottom: var(--slist-space-7);
}

.slist-events__page-title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-display);
	font-weight: var(--slist-weight-regular);
	letter-spacing: -0.02em;
	color: var(--slist-text-primary);
	margin: var(--slist-space-2) 0 0;
	line-height: 1.05;
}

/*
 * Event card title — event authors sometimes type "SPRING FLING: ARTY + RYOS"
 * in ALL CAPS. Normalizing via CSS text-transform: none alone doesn't help
 * (the string is literally uppercase in the DB). Let the title render as
 * authored BUT cap its weight so the all-caps titles don't visually dominate
 * the row. Authors can edit later in wp-admin.
 */
/* (no CSS-level fix for ALL CAPS data — flagged as content task.) */

/*
 * Desktop grid count-tolerance — when we have fewer than 3 upcoming
 * events, a fixed `repeat(3, 1fr)` leaves an empty cell that reads as
 * broken layout. Switch to auto-fit with a sensible min so 1-2 events
 * center cleanly, and 3+ events fill the row.
 *
 * Track max is a fixed px (not 1fr): with auto-fit + 1fr, a single
 * filled track inherits ALL the free space and the flyer balloons to
 * full container width. Capping at 360px keeps cards at home-card
 * proportions (home grid renders ~352px cards in the same 1120px
 * container) and lets justify-content: center actually center them.
 */
@media (min-width: 768px) {
	.slist-events__list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
		justify-content: center;
	}
}