/**
 * Nightlife, what is coming — one section of the design.
 *
 * The heading, then three of whatever the client points it at, then the way to
 * the rest. The shape behind them is the design's own and the build carries it.
 */

.custom-nightlife-event {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 49px;
	width: 100%;
	padding: 90px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 78px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;

	background-image: radial-gradient(
		1120px 1714px at 100% 0%,
		#f3eedc 0%,
		#cec1a9 50%,
		#a89376 100%
	);
}

/* The shape the file lays behind the cards, at the strength it gives it. The
   same shape stands behind a section on the Private Events page, so it is named
   for what it is rather than for where it was first used. */
.custom-nightlife-event__mark {
	position: absolute;
	top: 113px;
	left: 828px;
	width: 713px;
	height: 678px;
	opacity: 0.15;
	background-image: url( "../img/soft-shape.webp" );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.custom-nightlife-event__heading {
	position: relative;
	max-width: 260px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.custom-nightlife-event__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 49px;
	width: 100%;
}

.custom-nightlife-event__actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 24px;
}

.custom-nightlife-event__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 46px;
	padding: 10px;
	border: 0;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition: opacity 300ms ease-in-out;
}

.custom-nightlife-event__button:hover {
	opacity: 0.85;
}

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

/* Tablet and mobile — the file draws one of them (11174:9517): the cards one
   under another, 22 in from either edge and 38 apart, the name 38 above the
   first, the band 38 deep above and below, and the way in 38 under the last.
   The soft mark stands where the file puts it. Tablet is not drawn; it takes
   the same figures, and the cards take two to a row rather than one, which
   at that width leaves a card wider than its picture was drawn. */
@media ( max-width: 1024px ) {
	.custom-nightlife-event {
		gap: 38px;
		padding: 38px 22px;
	}

	.custom-nightlife-event__mark {
		top: 253px;
		left: 91px;
		width: 472px;
		height: 449px;
	}

	/* The file keeps the name on two lines here as on the wide tier: 130 is
	   to 32 what 260 is to 64, with a little over so a word is never split. */
	.custom-nightlife-event__heading {
		max-width: 140px;
	}

	.custom-nightlife-event__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 38px;
	}

	.custom-nightlife-event__actions {
		margin-top: 0;
	}

	.custom-nightlife-event__button {
		width: auto;
		height: 27px;
		padding: 8px 16px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-nightlife-event__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}