/**
 * Nightlife, hall of beats — one section of the design.
 *
 * A row of cards that runs off the edge of the band, moved one card at a time.
 * Each card is a picture in a metal edge with the house mark on it, and a
 * picture the client chooses closes the band beneath them.
 */

.custom-nightlife-beat__band {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
	width: 100%;
	padding: 90px 0 47px 0;
	box-sizing: border-box;

	background-image:
		linear-gradient( rgba( 0, 0, 0, 0.2 ), rgba( 0, 0, 0, 0.2 ) ),
		linear-gradient( 0deg, #3a2114 10.033%, #64311a 99.702% );
}

/* The theme sets a margin on every bare heading it finds in the content, which
   is one class and one element to this section's one class, so the class is
   said twice to outweigh it rather than merely tie. */
.custom-nightlife-beat__heading.custom-nightlife-beat__heading {
	/* The band runs the full width; what stands in it is held to 1440 and
	   centred, so the inset is the design's 48 plus whatever the margin is. */
	margin: 0 0 0 calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	padding: 0;
	color: inherit;
	text-transform: uppercase;
}

/* The band the cards run through. */
.custom-nightlife-beat__stage {
	width: 100%;
	height: 547px;
	padding-top: 49px;
	box-sizing: border-box;
	overflow: hidden;
}

.custom-nightlife-beat__track {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-left: calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	transition: transform 500ms ease-in-out;
	will-change: transform;
}

/* One card: a metal edge, and the picture set into it. */
.custom-nightlife-beat__card {
	position: relative;
	flex: 0 0 auto;
	width: 346px;
	height: 450px;
	border-radius: 24px;

	background-image: linear-gradient(
		-36.817deg,
		#3a2114 0.483%,
		#d4c894 50%,
		#faf6ea 99.517%
	);
}

.custom-nightlife-beat__inner {
	position: absolute;
	top: 8px;
	left: 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 334px;
	height: 434px;
	padding: 332px 172px 40px 30px;
	border-radius: 16px;
	box-sizing: border-box;
	overflow: hidden;
}

.custom-nightlife-beat__picture,
.custom-nightlife-beat__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

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

.custom-nightlife-beat__veil {
	background-image: linear-gradient(
		0deg,
		rgba( 0, 0, 0, 0.8 ) 20.363%,
		rgba( 255, 255, 255, 0 ) 72.694%
	);
}

.custom-nightlife-beat__words {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.custom-nightlife-beat__name,
.custom-nightlife-beat__note {
	margin: 0;
	white-space: nowrap;
}

.custom-nightlife-beat__name {
	text-transform: uppercase;
}

.custom-nightlife-beat__chips {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.custom-nightlife-beat__chip,
.custom-nightlife-beat__chip:hover,
.custom-nightlife-beat__chip:focus,
.custom-nightlife-beat__chip:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 31px;
	padding: 10px;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

.custom-nightlife-beat__chip svg {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* The house mark, carried by the build rather than uploaded. */
.custom-nightlife-beat__badge {
	position: absolute;
	top: 24px;
	right: 22px;
	width: 53px;
	height: 50px;
	background-image: url( "../img/event-badge.webp" );
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	pointer-events: none;
}

/* The two arrows, at the end of the band. */
.custom-nightlife-beat__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	width: 100%;
	margin-top: -30px;
	padding-right: calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-nightlife-beat__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.06 );
	cursor: pointer;
	transition:
		background-color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

/* The theme paints a bare button on every state it has; a class alone does not
   outrank that, so each state says its own ground here. */
.custom-nightlife-beat__arrow:hover,
.custom-nightlife-beat__arrow:focus,
.custom-nightlife-beat__arrow:focus-visible,
.custom-nightlife-beat__arrow:active {
	background: none;
	border-color: currentColor;
	box-shadow: none;
}

.custom-nightlife-beat__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-nightlife-beat__arrow[disabled] {
	cursor: default;
}

.custom-nightlife-beat__arrow svg {
	display: block;
	width: 56px;
	height: 56px;
}

.custom-nightlife-beat__arrow--next svg {
	transform: scaleX( -1 );
}

/* The strip the band ends on: full width, and 260 tall where the band is at the
   width the file draws it. Past that it holds its height rather than growing. */
.custom-nightlife-beat__strip {
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 260;
	max-height: 260px;
	overflow: hidden;
}

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

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

/* Tablet and mobile — the file draws one of them (11205:2998): the name 13
   in and 18 down, the cards 128 by 166 running from 13 in with 7 between,
   13 under the name, and the two arrows bare, 12 across, at the right foot
   of the band 22 under the cards. Everything inside a card is drawn at the
   share of the wide tier's card that 128 is of 346. Tablet is not drawn and
   takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-nightlife-beat__band {
		gap: 0;
		padding: 18px 0;
	}

	.custom-nightlife-beat__heading.custom-nightlife-beat__heading {
		margin-left: 13px;
	}

	.custom-nightlife-beat__stage {
		height: 179px;
		padding-top: 13px;
	}

	.custom-nightlife-beat__track {
		gap: 7px;
		padding-left: 13px;
	}

	.custom-nightlife-beat__card {
		width: 128px;
		height: 166px;
		border-radius: 9px;
	}

	.custom-nightlife-beat__inner {
		top: 3px;
		left: 2px;
		width: 123px;
		height: 160px;
		padding: 122px 24px 15px 11px;
		border-radius: 6px;
	}

	.custom-nightlife-beat__words {
		gap: 3px;
	}

	.custom-nightlife-beat__chips {
		gap: 3px;
	}

	.custom-nightlife-beat__chip,
	.custom-nightlife-beat__chip:hover,
	.custom-nightlife-beat__chip:focus,
	.custom-nightlife-beat__chip:active {
		gap: 3px;
		height: 12px;
		padding: 4px;
	}

	.custom-nightlife-beat__chip svg {
		width: 7px;
		height: 7px;
	}

	.custom-nightlife-beat__badge {
		top: 9px;
		right: 8px;
		width: 20px;
		height: 18px;
	}

	.custom-nightlife-beat__actions {
		gap: 5px;
		margin-top: 22px;
		padding-right: 13px;
	}

	.custom-nightlife-beat__arrow,
	.custom-nightlife-beat__arrow:hover,
	.custom-nightlife-beat__arrow:focus,
	.custom-nightlife-beat__arrow:focus-visible,
	.custom-nightlife-beat__arrow:active {
		width: 12px;
		height: 12px;
		background: none;
		box-shadow: none;
	}

	.custom-nightlife-beat__arrow svg {
		width: 12px;
		height: 12px;
	}

	.custom-nightlife-beat__strip {
		aspect-ratio: 390 / 127;
		max-height: none;
	}
}

/* Tablet — not drawn. The narrow tier's card, 128 across, is a stamp at
   this width, so the card is given the share of the wide tier's that 240
   is of 346, and everything in it the same share; the arrows come back as
   discs, 40 across, short of the wide tier's 56. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-nightlife-beat__band {
		padding: 40px 0 24px;
	}

	.custom-nightlife-beat__heading.custom-nightlife-beat__heading {
		margin-left: 24px;
	}

	.custom-nightlife-beat__stage {
		height: 336px;
		padding-top: 24px;
	}

	.custom-nightlife-beat__track {
		gap: 12px;
		padding-left: 24px;
	}

	.custom-nightlife-beat__card {
		width: 240px;
		height: 312px;
		border-radius: 17px;
	}

	.custom-nightlife-beat__inner {
		top: 6px;
		left: 4px;
		width: 232px;
		height: 301px;
		padding: 230px 119px 28px 21px;
		border-radius: 11px;
	}

	.custom-nightlife-beat__words {
		gap: 6px;
	}

	.custom-nightlife-beat__chips {
		gap: 6px;
	}

	.custom-nightlife-beat__chip,
	.custom-nightlife-beat__chip:hover,
	.custom-nightlife-beat__chip:focus,
	.custom-nightlife-beat__chip:active {
		gap: 6px;
		height: 22px;
		padding: 7px;
	}

	.custom-nightlife-beat__chip svg {
		width: 14px;
		height: 14px;
	}

	.custom-nightlife-beat__badge {
		top: 17px;
		right: 15px;
		width: 37px;
		height: 35px;
	}

	.custom-nightlife-beat__actions {
		gap: 16px;
		margin-top: 24px;
		padding-right: 24px;
	}

	.custom-nightlife-beat__arrow {
		width: 40px;
		height: 40px;
		box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.06 );
	}

	.custom-nightlife-beat__arrow svg {
		width: 40px;
		height: 40px;
	}
}