/**
 * Nightlife, hero — one section of the design.
 *
 * A picture the band holds, and the heading, the words and the button standing
 * on it. Where the file places that block becomes padding here rather than an
 * offset, and the band is as tall as they and the content make it.
 */

.custom-nightlife-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
	padding: 224px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 164px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;
}

.custom-nightlife-hero__picture {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-nightlife-hero__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-nightlife-hero__heading {
	position: relative;
	margin: 0;
	padding: 0;
	color: inherit;
	text-align: center;
	text-transform: uppercase;
}

.custom-nightlife-hero__body {
	position: relative;
	width: 100%;
	max-width: 747px;
	margin: 0;
	text-align: center;
}

.custom-nightlife-hero__button,
.custom-nightlife-hero__button:hover,
.custom-nightlife-hero__button:focus,
.custom-nightlife-hero__button:active {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border: 0;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

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

/* Tablet and mobile — the file draws one of them (11194:2793): the words 351
   across in the middle, the three of them 16 apart, standing 78 down the band
   and leaving 68 below. Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-nightlife-hero {
		gap: 16px;
		padding: 78px 20px 68px;
	}

	.custom-nightlife-hero__body {
		max-width: 351px;
	}

	.custom-nightlife-hero__button,
	.custom-nightlife-hero__button:hover,
	.custom-nightlife-hero__button:focus,
	.custom-nightlife-hero__button:active {
		padding: 9px 14px;
	}
}