/**
 * Dining, detail — one section of the design.
 *
 * Two pictures side by side, then the words, and the hours resting on the same
 * line the pictures end on. Where the file places each block becomes a layout
 * here rather than an offset.
 */

.custom-dining-detail {
	display: flex;
	align-items: flex-start;
	gap: 52px;
	width: 100%;
	padding: 90px calc( 73px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 90px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;

	background-image: radial-gradient(
		1560px 2774px at 5% 88%,
		#29180e 0%,
		#472514 50%,
		#64311a 100%
	);
}

.custom-dining-detail__pictures {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex: 0 0 auto;
}

.custom-dining-detail__picture {
	position: relative;
	flex: 0 0 430px;
	width: 430px;
	height: 629px;
	overflow: hidden;
}

.custom-dining-detail__picture--one {
	border-top-left-radius: 60px;
	border-bottom-right-radius: 60px;
}

.custom-dining-detail__picture--two {
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
}

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

.custom-dining-detail__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	flex: 0 0 auto;
	width: 390px;
	min-height: 629px;
}

.custom-dining-detail__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.custom-dining-detail__heading {
	margin: 0;
	padding: 0;
	color: inherit;
	text-transform: uppercase;
}

.custom-dining-detail__body {
	margin: 0;
	white-space: pre-wrap;
}

/* The hours, on the line the pictures end on. */
.custom-dining-detail__hours {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 377px;
	margin-top: auto;
	padding: 24px 24px 16px 24px;
	border-radius: 16px;
	box-sizing: border-box;
}

.custom-dining-detail__hours-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
}

.custom-dining-detail__hours-icon svg,
.custom-dining-detail__hours-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.custom-dining-detail__hours-words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 130px;
}

.custom-dining-detail__hours-label,
.custom-dining-detail__hours-value {
	margin: 0;
	white-space: nowrap;
}

/* Tablet and mobile — the file draws one of them (11167:8671): each picture
   beside its own words, the first on the left and the second on the right,
   and the hours in the middle under both. The pictures and the words are two
   boxes on the wide tier, so here each gives up its own and lets what it
   holds take a place in the band's grid. The file draws the row 180 and 168
   with 14 between — two halves — so the row is divided in two and the
   picture holds its square at whatever width the half comes to. Tablet is
   not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-dining-detail {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		align-items: start;
		column-gap: 14px;
		row-gap: 38px;
		padding: 46px 14px 26px;
	}

	.custom-dining-detail__pictures,
	.custom-dining-detail__column {
		display: contents;
	}

	.custom-dining-detail__picture {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.custom-dining-detail__picture--one {
		order: 1;
		border-top-left-radius: 24px;
		border-bottom-right-radius: 24px;
	}

	.custom-dining-detail__column > .custom-dining-detail__block:nth-child( 1 ) {
		order: 2;
	}

	.custom-dining-detail__column > .custom-dining-detail__block:nth-child( 2 ) {
		order: 3;
	}

	.custom-dining-detail__picture--two {
		order: 4;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 24px;
	}

	.custom-dining-detail__block {
		gap: 10px;
	}

	.custom-dining-detail__hours {
		order: 5;
		grid-column: 1 / -1;
		justify-self: center;
		gap: 16px;
		width: auto;
		margin-top: 0;
		padding: 12px 12px 8px;
		border-radius: 8px;
	}

	.custom-dining-detail__hours-icon {
		width: 18px;
		height: 18px;
	}

	.custom-dining-detail__hours-words {
		gap: 6px;
		min-width: 0;
	}
}