/**
 * Dining, hero — one section of the design.
 *
 * A picture the band holds, the veil the file lays over it, and the heading and
 * its button standing on top. Where the file places that block becomes padding
 * here rather than an offset, and the band's height follows from it: the file's
 * 670 is 255 above the block and 167 below it, each rounded up to even.
 */

.custom-dining-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
	padding: 256px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 168px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;
}

.custom-dining-hero__picture,
.custom-dining-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

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

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

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

@media ( prefers-reduced-motion: reduce ) {
	.custom-dining-hero__button {
		transition: none;
	}
}

/* An anchor takes the browser's own colour unless it is told not to. */
.custom-dining-hero__button {
	color: inherit;
}

/* Tablet and mobile — the file draws one of them (11167:8299): the block
   stands 62 down a band 252 deep, 263 across in the middle, its two parts
   24 apart. What is left below the block is the band's own. Tablet is not
   drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-dining-hero {
		gap: 24px;
		padding: 62px 64px 64px;
	}

	.custom-dining-hero__button,
	.custom-dining-hero__button:hover,
	.custom-dining-hero__button:focus,
	.custom-dining-hero__button:active {
		padding: 9px 14px;
	}
}

/* Tablet — not drawn. The band is the room around the block, so it is given
   a good deal more of it here than the narrow tier keeps, and still well
   short of the wide tier's. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-dining-hero {
		padding: 180px 64px 180px;
	}
}