/**
 * Events archive
 *
 * Upcoming / Past tabs over a panelled list of event rows, with a sunburst that rises
 * and warms to yellow as the page scrolls.
 */

.archive-event .archive-content {
	--panel-breakout: max(-58px, var(--container-breakout-full));
	--panel-inset: max(var(--text-spacing-small), calc(var(--panel-breakout) * -1));
	--tab-overlap: 24px;
	isolation: isolate;
	overflow-x: clip;
	position: relative;
}

/*** Sunburst ***/

.archive-event .sunburst {
	color: color-mix(in srgb, var(--sun) calc(var(--jazzy-progress, 0) * 100%), var(--charcoal-5));
	display: block;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translate(-50%, calc(var(--jazzy-progress, 0) * -40px));
	width: 768px;
	z-index: -1;
}

.archive-event .sunburst svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

/*** Hero ***/

.archive-event .archive-hero {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
	justify-content: space-between;
	margin: var(--module-spacing-medium) 0 var(--text-spacing-xxlarge);
}

.archive-event .archive-hero > * {
	margin: 0;
}

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

/*** Tabs ***/

/* Started where the photographs start, not at the container. The panel breaks out past the
   container and pads back in, and the two only cancel while the breakout is at full stretch — below
   wide desktop it shrinks to nothing and the padding stays, which left the tabs 24px outside the
   first image. Offsetting by the same two values keeps them on the image at every width. */
.archive-event .tabs {
	display: flex;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0 0 calc(var(--tab-overlap) * -1);
	margin-left: calc(var(--panel-breakout) + var(--panel-inset));
	padding: 0;
	position: relative;
	z-index: 1;
}

.archive-event .tabs button {
	align-items: center;
	background: var(--teal-pale);
	border: 0;
	border-radius: 60px;
	color: var(--text-gray);
	display: flex;
	font-family: var(--body-font);
	font-size: calc(14rem / 16);
	font-weight: 700;
	justify-content: center;
	letter-spacing: 1.8px;
	line-height: calc(16 / 14);
	padding: 16.5px var(--text-spacing-medium) 15.5px;
	text-transform: uppercase;
	width: 156px;
}

.archive-event .tabs button:not(.active):hover,
.archive-event .tabs button:not(.active):focus-visible {
	background: color-mix(in srgb, var(--aqua) 25%, var(--teal-pale));
	color: var(--charcoal);
}

.archive-event .tabs button.active {
	background: var(--storm);
	color: var(--white);
}

/*** Panel ***/

.archive-event .results {
	background-color: var(--white);
	background-image: linear-gradient(color-mix(in srgb, var(--white) 50%, transparent), color-mix(in srgb, var(--white) 50%, transparent)), url('../svgs/dot-grid.svg');
	border-radius: 10px;
	margin: 0 var(--panel-breakout);
	padding: calc(var(--module-spacing-medium) + var(--tab-overlap)) var(--panel-inset) var(--module-spacing-medium);
}

/*** Rows ***/

.archive-event .results > [jx-form-results-items] {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.archive-event .card.row.event .media {
	aspect-ratio: 475 / 316;
	border-radius: 10px;
	flex-shrink: 0;
	width: 475px;
}

.archive-event .card.row.event .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	padding-left: var(--text-spacing-small);
}

.archive-event .card.row.event .content > * {
	margin: 0;
}

.archive-event .card.row.event .details .icon {
	background: var(--aqua);
}

.archive-event .card.row.event:hover .btn.secondary,
.archive-event .card.row.event:focus-within .btn.secondary {
	gap: 12px;
}

.archive-event .card.row.event:hover .btn.secondary .arrow,
.archive-event .card.row.event:focus-within .btn.secondary .arrow {
	background: var(--sun-light);
}

.archive-event .card.row.event .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.archive-event .card.row.event .text > * {
	margin: 0;
}

.archive-event .card.row.event .values > * + *::before {
	background: var(--charcoal);
	content: '';
	display: inline-block;
	height: 16px;
	margin-right: var(--text-spacing-xxsmall);
	opacity: .25;
	vertical-align: middle;
	width: 2px;
}

.archive-event .results > [jx-form-results-items] > li + li {
	border-top: 1px solid var(--charcoal-15);
	margin-top: var(--module-spacing-small);
	padding-top: var(--module-spacing-small);
}

/*** Responsive ***/

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.archive-event .card.row.event {
		flex-direction: column;
	}

	.archive-event .card.row.event .media {
		width: 100%;
	}

	.archive-event .card.row.event .content {
		padding-left: 0;
	}

	/* No hover once the row stacks. Stacked, one card is most of the screen, so a finger that lands
	   on it to scroll the page lights it up — the photograph zooms, the copy recolours and the button
	   opens — before anything has been chosen. Only the hover goes: keyboard focus still opens the
	   button, so a tabbed-to card still says where it is. */
	.archive-event .card.row.event:hover .media img {
		transform: none;
	}

	.archive-event .card.row.event:hover .content {
		color: inherit;
	}

	.archive-event .card.row.event:hover:not(:focus-within) .btn.secondary,
	.archive-event .card.row.event .btn.secondary:hover:not(:focus-visible) {
		gap: var(--text-spacing-xxsmall);
	}

	.archive-event .card.row.event:hover:not(:focus-within) .btn.secondary .arrow,
	.archive-event .card.row.event .btn.secondary:hover:not(:focus-visible) .arrow {
		background: var(--sun);
	}

}

/*** Empty state ***/

.archive-event .results .no-results {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	text-align: center;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* The title and its filters share a row until the phone. At tablet a one-word title leaves the
	   dropdown plenty of room beside it, and stacking only pushed the listings down a row. */
	.archive-event .archive-hero {
		align-items: stretch;
		flex-direction: column;
	}

	.archive-event .filters {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-event .filters .filter {
		width: auto;
	}

	/* The mark is the one The Current carries at this width — a page-wide rise behind the head
	   rather than the 768 it holds from tablet up, which on a phone was a wall of rays.

	   Its cut bottom edge lands on the panel's top at the end of the 40px rise: 206 to the panel
	   and the 40 it travels, held from below rather than above so the mark's own height — which
	   follows the screen's width — stays out of the sum and the edge lands at any width. The 206 is
	   the head and the tabs, which do not reflow anywhere in this band. */
	.archive-event .sunburst {
		bottom: calc(100% - 246px);
		top: auto;
		width: min(990px, 100%);
	}

	/* The tabs are the sticky bar's pills here, down to the type and the padding. At their own
	   size they read as two slabs laid across the screen. */
	.archive-event .tabs button {
		font-size: calc(12rem / 16);
		letter-spacing: 1px;
		line-height: calc(16 / 12);
		padding: 12.5px var(--text-spacing-small) 11.5px;
		width: auto;
	}

	/* The panel is the screen at this width: out to both edges and square, so it reads as the
	   ground the events sit on rather than a card laid on the page. The copy keeps the line it
	   had — the padding takes back exactly what the margin gives up — and the photographs step
	   out to the container's own edges, which is where the tabs above them start. */
	.archive-event .tabs {
		justify-content: center;
		margin-left: 0;
	}

	/* Half the pill's 40, so the panel's top edge runs through the middle of the tabs rather than
	   a third of the way up them, and the panel ends on the footer's line — full width, it is the
	   bottom of the page here and a strip of ground under it read as a gap. */
	.archive-event .archive-content {
		--tab-overlap: 20px;
		padding-bottom: 0;
	}

	/* The caret sits as far off the field's right edge as it does off its top and foot: 14 against
	   its own 20, where the 8 of padding and the border together were reading as 9. */
	.archive-event .filters .jazzy-select .trigger {
		padding-right: 13px;
	}

	.archive-event .results {
		border-radius: 0;
		margin-inline: calc(var(--container-outer-padding) * -1);
		padding-inline: calc(var(--container-outer-padding) + var(--panel-inset));
		/* 24 off the run's head: the first event follows the tabs it was chosen by. */
		padding-top: calc(var(--module-spacing-medium) + var(--tab-overlap) - var(--text-spacing-small));
	}

	/* Stretched rather than 100% wide: the row holds its items at their own width, so a percentage
	   would measure the padded line and then slide out of it. Stretch reads the negative margins
	   and fills what they open up. */
	.archive-event .card.row.event .media {
		align-self: stretch;
		margin-inline: calc(var(--panel-inset) * -1);
		width: auto;
	}

}