/**
 * Nightlife, atmosphere — one section of the design.
 *
 * A row of pictures wider than the band, moved by taking hold of it. No arrows:
 * the row is the control.
 */

.custom-nightlife-carousel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	padding: 96px max( 0px, calc( ( 100% - 1440px ) / 2 ) ) 64px max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;

	background-image: linear-gradient( 180deg, #29180e 0%, #e8e4db 100% );
}

.custom-nightlife-carousel__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 64px;
	text-align: center;
	text-transform: uppercase;
}

.custom-nightlife-carousel__stage {
	width: 100%;
	height: 640px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	overscroll-behavior-x: contain;

	/* Where the row comes to rest is the design's: one picture in the middle of
	   the band with its neighbours either side of it, never a position it
	   happened to stop at. */
	scroll-snap-type: x mandatory;
	/* A finger moves the row the way a mouse does; the page keeps the up and
	   down. */
	touch-action: pan-y;
	/* Nothing in the row is there to be selected, and a selection begun on
	   it would keep pulling the row along after the hand had left it. */
	user-select: none;
	-webkit-user-select: none;
}

.custom-nightlife-carousel__stage::-webkit-scrollbar {
	display: none;
}

/* A hold moves the row a frame at a time, and each frame would be pulled back
   to the nearest picture. It comes to rest when the hold ends, not during it. */
.custom-nightlife-carousel__stage.is-holding {
	cursor: grabbing;
}

/* Held, or on its way to rest, the row is not snapped: the snap would take
   the move out of the hand, or cut it short. */
.custom-nightlife-carousel__stage.is-holding,
.custom-nightlife-carousel__stage.is-moving {
	scroll-snap-type: none;
}

.custom-nightlife-carousel__track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	height: 640px;

	/* Half a card either side, so the first and the last can stand in the
	   middle of the band like the ones between them. */
	padding: 0 calc( 50% - 420px );
}

.custom-nightlife-carousel__slide {
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: center;
	width: 840px;
	height: 560px;
	border-radius: 24px;
	overflow: hidden;
}

.custom-nightlife-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

/* Tablet and mobile — the file draws one of them (11174:10586): the name in
   a band 38 deep above and below it, then the slides 250 by 167 with 16
   between, the one being read in the middle, and 46 left under them. The
   file draws two arrows on the slide; the wide tier has none and, as asked,
   neither does this one. Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-nightlife-carousel {
		gap: 38px;
		padding: 38px 0 46px;
	}

	.custom-nightlife-carousel__heading {
		padding: 0 16px;
	}

	.custom-nightlife-carousel__stage,
	.custom-nightlife-carousel__track {
		height: 167px;
	}

	.custom-nightlife-carousel__track {
		gap: 16px;
		padding: 0 calc( 50% - 125px );
	}

	.custom-nightlife-carousel__slide {
		width: 250px;
		height: 167px;
		border-radius: 6px;
	}
}

/* Tablet — not drawn. At 250 the slides stand three abreast and none is the
   one being read; the slide is given 720 by 480, so one stands whole in the
   middle with its neighbours showing at either edge, as on the wide tier
   and the narrow one, and the run still comes to rest on the middle of a
   slide. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-nightlife-carousel__stage,
	.custom-nightlife-carousel__track {
		height: 480px;
	}

	.custom-nightlife-carousel__track {
		padding: 0 calc( 50% - 360px );
	}

	.custom-nightlife-carousel__slide {
		width: 720px;
		height: 480px;
		border-radius: 16px;
	}
}