/**
 * Membership, benefits — one section of the design.
 *
 * One benefit at a time: its picture across the left of the band, its words and
 * a second picture down the right. The arrows turn to the next.
 */

.custom-membership-benefit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 83px;
	width: 100%;
	padding: 96px max( 0px, calc( ( 100% - 1440px ) / 2 ) ) 143px max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 4px 4px #9d5434;

	background-image: linear-gradient(
		28.163deg,
		rgba( 157, 84, 52, 0.7 ) 17.466%,
		rgba( 100, 49, 26, 0.7 ) 62.65%,
		rgba( 76, 37, 19, 0.7 ) 81.22%
	);
}

.custom-membership-benefit__picture,
.custom-membership-benefit__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

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

.custom-membership-benefit__veil {
	background-color: rgba( 0, 0, 0, 0.5 );
}

.custom-membership-benefit__heading {
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

/* The band the benefits run through. */
.custom-membership-benefit__row {
	position: relative;
	width: 100%;
	height: 562px;
}

.custom-membership-benefit__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	gap: 1.11%;
	padding-right: 7px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 400ms ease-in-out,
		visibility 400ms ease-in-out;
}

.custom-membership-benefit__slide.is-current {
	opacity: 1;
	visibility: visible;
}

/* The picture across the left, running off the edge of the band. The file
   draws it 1000 across a band of 1440, 16 apart from the words at 418, with
   7 left at the right edge; each is held as its share of the 1433 the three
   take, so a band narrower than 1440 still holds them all. */
.custom-membership-benefit__stage {
	position: relative;
	flex: 0 0 69.78%;
	height: 562px;
	margin-left: -1px;
	border-radius: 0 24px 24px 0;
	overflow: hidden;
}

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

/* The words and the second picture down the right. */
.custom-membership-benefit__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 116px;
	flex: 0 0 29.1%;
	height: 562px;
}

/* The words take what is left over the picture, never the picture's own place. */
.custom-membership-benefit__words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 93.78%;
	min-height: 0;
	overflow: hidden;
}

.custom-membership-benefit__title,
.custom-membership-benefit__body {
	margin: 0;
	width: 100%;
}

.custom-membership-benefit__title {
	text-transform: uppercase;
	padding: 0;
}

/* The file gives the text five lines. More than that is cut off with a mark
   saying so, rather than moving the picture beneath it. */
.custom-membership-benefit__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

/* The picture stands where the file puts it: at the foot of the column, whole. */
.custom-membership-benefit__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 260px;
	border-radius: 24px;
	overflow: hidden;
}

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

.custom-membership-benefit__thumb-veil {
	position: absolute;
	inset: 0;
	background-color: rgba( 0, 0, 0, 0.5 );
	pointer-events: none;
}

/* The arrows stand on the picture, and do not turn with it. */
.custom-membership-benefit__arrow {
	position: absolute;
	top: 253px;
	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: 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-membership-benefit__arrow:hover,
.custom-membership-benefit__arrow:focus,
.custom-membership-benefit__arrow:focus-visible,
.custom-membership-benefit__arrow:active {
	background: none;
	border-color: currentColor;
	box-shadow: none;
}

.custom-membership-benefit__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-membership-benefit__arrow:hover {
	opacity: 0.85;
}

.custom-membership-benefit__arrow--prev {
	left: 3.333%;
}

.custom-membership-benefit__arrow--next {
	left: 62.222%;
}

.custom-membership-benefit__arrow svg {
	display: block;
	width: 56px;
	height: 56px;
}

.custom-membership-benefit__arrow--next svg {
	transform: scaleX( -1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-membership-benefit__slide,
	.custom-membership-benefit__arrow {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them (11174:11805): the heading,
   the picture with an arrow at either edge, then the words beneath it; the
   second picture is not drawn. Every benefit stands in the same place and the
   one on show is the one seen, so the band is as deep as the deepest of them.
   Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-membership-benefit {
		gap: 16px;
		padding: 38px 16px;
	}

	.custom-membership-benefit__row {
		display: grid;
		height: auto;
	}

	.custom-membership-benefit__slide {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		flex-direction: column;
		gap: 24px;
		padding-right: 0;
	}

	.custom-membership-benefit__stage {
		flex: 0 0 auto;
		width: 100%;
		height: 201px;
		margin-left: 0;
		border-radius: 8px;
	}

	.custom-membership-benefit__side {
		flex: 0 0 auto;
		gap: 0;
		width: 100%;
		height: auto;
	}

	.custom-membership-benefit__words {
		gap: 16px;
		width: 100%;
	}

	.custom-membership-benefit__thumb {
		display: none;
	}

	/* The arrows stand on the picture, 12 in from either edge and in the
	   middle of its height. */
	.custom-membership-benefit__arrow,
	.custom-membership-benefit__arrow svg {
		width: 24px;
		height: 24px;
	}

	.custom-membership-benefit__arrow {
		top: 89px;
		z-index: 1;
	}

	.custom-membership-benefit__arrow--prev {
		left: 12px;
	}

	.custom-membership-benefit__arrow--next {
		left: auto;
		right: 12px;
	}
}

/* Tablet — not drawn. The picture and the arrows come up with the width, short
   of the wide tier's, and the words keep half the band. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-membership-benefit__stage {
		height: 400px;
	}

	.custom-membership-benefit__words {
		width: 50%;
	}

	.custom-membership-benefit__arrow,
	.custom-membership-benefit__arrow svg {
		width: 40px;
		height: 40px;
	}

	.custom-membership-benefit__arrow {
		top: 180px;
	}
}