/**
 * Dining, membership — one section of the design.
 *
 * Three panels dividing the row four to one to one. The wide one carries the
 * button; the two beside it are darkened and lead somewhere of their own.
 *
 * Nothing inside sets a height — the panels are pictures — so the band keeps
 * the shape the file gives it as a ratio rather than as a figure.
 */

.custom-dining-membership {
	display: flex;
	align-items: stretch;
	width: 100%;
	aspect-ratio: 1440 / 600;
	overflow: hidden;
}

.custom-dining-membership__panel,
.custom-dining-membership__panel:hover,
.custom-dining-membership__panel:focus,
.custom-dining-membership__panel:active {
	color: inherit;
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.custom-dining-membership__panel--wide {
	flex: 4 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 48px;
	box-sizing: border-box;
}

.custom-dining-membership__panel--side {
	flex: 1 1 0;
	display: block;
	text-decoration: none;
}

.custom-dining-membership__picture {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

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

.custom-dining-membership__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-dining-membership__button,
.custom-dining-membership__button:hover,
.custom-dining-membership__button:focus,
.custom-dining-membership__button:active {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

.custom-dining-membership__panel--side .custom-dining-membership__picture img {
	transition: transform 500ms ease-in-out;
}

.custom-dining-membership__panel--side:hover .custom-dining-membership__picture img {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-dining-membership__button,
	.custom-dining-membership__panel--side .custom-dining-membership__picture img {
		transition: none;
	}
}

/* Mobile — the file draws the wide panel alone, 390 across and 244 deep
   (11205:3030), the button standing 26 above its foot. The two beside it are
   not drawn there; they take a row of their own under it, dividing it in
   two, at the depth the file gives them (11205:3036). Tablet is not drawn
   and keeps the wide tier's row of three.

   Each picture stands in the flow here at its own shape, and the row takes
   its depth from them: a shape given to the band or a panel is read by
   nothing above it once the row wraps, and the section after it started
   before it had ended. */
@media ( max-width: 767px ) {
	.custom-dining-membership {
		flex-wrap: wrap;
		aspect-ratio: auto;
	}

	.custom-dining-membership__panel--wide {
		flex: 0 0 100%;
		padding-bottom: 0;
	}

	/* Each asks for half the row, which is more than the wide panel leaves on
	   its line, so the two take a line of their own. */
	.custom-dining-membership__panel--side {
		flex: 1 1 50%;
	}

	.custom-dining-membership__picture {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
	}

	.custom-dining-membership__panel--wide .custom-dining-membership__picture {
		aspect-ratio: 390 / 244;
	}

	.custom-dining-membership__panel--side .custom-dining-membership__picture {
		aspect-ratio: 370 / 242;
	}

	.custom-dining-membership__button,
	.custom-dining-membership__button:hover,
	.custom-dining-membership__button:focus,
	.custom-dining-membership__button:active {
		position: absolute;
		bottom: 26px;
		padding: 8px 16px;
	}
}