/**
 * Event, hero — one section of the design.
 *
 * The way back, then the page's own heading. Where the file places them becomes
 * padding here rather than an offset.
 */

/* The heroes of the contact, blog and events pages stand at one set of
   figures on every tier, as asked: 96 above and below the name on the wide
   tier, 48 and 72 on tablet, 10 and 34 on mobile. The way back stands in
   the band's top corner, out of the flow, so the name stands where the
   other two pages' names stand. */
.custom-event-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-event-hero__back {
	position: absolute;
	top: 20px;
	left: calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	transition: opacity 300ms ease-in-out;
}

.custom-event-hero__back:hover {
	opacity: 0.7;
}

.custom-event-hero__back-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.custom-event-hero__back-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.custom-event-hero__heading {
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-event-hero__back {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them (11174:10633): the way back
   at the top, the heading 24 under it, the list 38 under that. Tablet is not
   drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-event-hero {
		padding: 10px 16px 34px;
	}

	.custom-event-hero__back {
		top: 10px;
		left: 16px;
		gap: 4px;
	}

	.custom-event-hero__back-icon {
		width: 16px;
		height: 16px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-event-hero {
		padding: 48px 16px 72px;
	}

	.custom-event-hero__back {
		top: 20px;
	}
}