/**
 * Nightlife, weekly program — one section of the design.
 *
 * A ticket: the night's words on the left, its picture stamped on the right,
 * and a row of holes punched down the seam between them. One ticket is on show
 * at a time; the arrows turn to the next.
 */

.custom-nightlife-program {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 38px;
	width: 100%;
	padding: 80px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 106px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;

	background-image: radial-gradient(
		769px 390px at 50% 37%,
		#64311a 0%,
		#3a2114 93.3%
	);
}

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

/* The ticket itself. */
.custom-nightlife-program__card {
	position: relative;
	width: 100%;
	height: 411px;
	border-radius: 16px;
	overflow: hidden;
}

.custom-nightlife-program__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 400ms ease-in-out,
		visibility 400ms ease-in-out;
}

.custom-nightlife-program__slide.is-current {
	opacity: 1;
	visibility: visible;
}

.custom-nightlife-program__words {
	position: absolute;
	top: 57px;
	left: 140px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 629px;
	max-width: calc( 100% - 620px );
}

.custom-nightlife-program__genre,
.custom-nightlife-program__title,
.custom-nightlife-program__when,
.custom-nightlife-program__body {
	margin: 0;
	width: 100%;
}

.custom-nightlife-program__genre,
.custom-nightlife-program__title,
.custom-nightlife-program__when {
	text-transform: uppercase;
}

.custom-nightlife-program__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.custom-nightlife-program__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 146px;
	height: 40px;
	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-program__button:hover {
	opacity: 0.8;
}

/* The stamp, and the holes punched down its seam. */
.custom-nightlife-program__stamp {
	position: absolute;
	top: 48px;
	right: 138px;
	width: 332px;
	height: 316px;
	border-radius: 16px;
	overflow: hidden;
}

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

.custom-nightlife-program__perforation {
	position: absolute;
	top: 56px;
	right: 465px;
	width: 11px;
	height: 309px;
	background-image: radial-gradient(
		5.5px 5px at 5.5px 5px,
		#ebe4ca 100%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	background-size: 11px 13px;
	background-repeat: repeat-y;
	pointer-events: none;
}

/* The arrows that turn to the next night. */
.custom-nightlife-program__arrow {
	position: absolute;
	top: 50%;
	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;
	transform: translateY( -50% );
	transition: 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-program__arrow:hover,
.custom-nightlife-program__arrow:focus,
.custom-nightlife-program__arrow:focus-visible,
.custom-nightlife-program__arrow:active {
	background: none;
	border-color: currentColor;
	box-shadow: none;
}

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

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

.custom-nightlife-program__arrow--prev {
	left: 40px;
}

.custom-nightlife-program__arrow--next {
	right: 40px;
}

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

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

@media ( prefers-reduced-motion: reduce ) {
	.custom-nightlife-program__slide,
	.custom-nightlife-program__arrow,
	.custom-nightlife-program__button {
		transition: none;
	}
}

/* The heading is the section's own, not the theme's. */
.custom-nightlife-program__title {
	padding: 0;
	color: inherit;
}

/* Tablet and mobile — the file draws one of them (11174:9193): the name 24
   above a card 16 in from either edge, the two 24 apart, the band 47 deep
   above and 57 below. Inside the card the words stand in the flow, 32 down
   and 34 in, 18 apart, and the stamp under them the width of the words with
   the perforation down its left edge. The slides share one cell rather than
   standing on top of one another, so the card is as deep as the one on
   view. Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-nightlife-program {
		gap: 24px;
		padding: 47px 16px 57px;
	}

	.custom-nightlife-program__heading {
		padding: 0;
	}

	.custom-nightlife-program__card {
		display: grid;
		height: auto;
		border-radius: 18px;
	}

	.custom-nightlife-program__slide {
		grid-area: 1 / 1;
		position: relative;
		inset: auto;
		padding: 32px 34px;
		box-sizing: border-box;
	}

	.custom-nightlife-program__words {
		position: relative;
		top: auto;
		left: auto;
		gap: 18px;
		width: 100%;
		max-width: none;
	}

	.custom-nightlife-program__actions {
		gap: 6px;
		margin-top: 0;
	}

	.custom-nightlife-program__button {
		width: auto;
		height: 27px;
		padding: 7px 16px;
	}

	.custom-nightlife-program__stamp {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 288 / 274;
		margin-top: 18px;
		border-radius: 14px;
		overflow: visible;
	}

	.custom-nightlife-program__stamp img {
		border-radius: 14px;
	}

	/* The perforation is punched into the stamp's left edge here, 4 short of
	   either end, so it is drawn by the stamp itself and stands astride the
	   edge, half in the picture. */
	.custom-nightlife-program__perforation {
		display: none;
	}

	.custom-nightlife-program__stamp::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: -4px;
		width: 7px;
		background-image: radial-gradient(
			3.5px 3px at 3.5px 3px,
			#ebe4ca 100%,
			rgba( 255, 255, 255, 0 ) 100%
		);
		background-size: 7px 8px;
		background-repeat: repeat-y;
		pointer-events: none;
		z-index: 1;
	}

	/* Not drawn: the file shows one day and no way to the next. The arrows
	   stay, small, on the card's edges — a decision. */
	.custom-nightlife-program__arrow {
		width: 24px;
		height: 24px;
		box-shadow: none;
	}

	.custom-nightlife-program__arrow svg {
		width: 24px;
		height: 24px;
	}

	.custom-nightlife-program__arrow--prev {
		left: 6px;
	}

	.custom-nightlife-program__arrow--next {
		right: 6px;
	}
}

/* Tablet — not drawn. The stamp the width of the words is, at this width,
   deeper than the screen; it keeps half the row. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-nightlife-program__stamp {
		width: 50%;
	}
}