/**
 * Home, contact — one section of the design.
 *
 * The half the words take and the half the picture takes, each exactly half of
 * the band. Every measurement here was read from the design file.
 */

/* The ground is a radial the file draws from the middle of the band outward:
   an ellipse exactly half the band each way, centred on it. */
.custom-home-contact {
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 0 max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;
	background-image: radial-gradient(
		50% 50% at 50% 50%,
		var( --custom-home-contact-centre, #ebe4ca ) 6.25%,
		var( --custom-home-contact-edge, #c9bca6 ) 100%
	);
}

/* The file puts the words at x=48 in a half 720 wide and runs them to its edge,
   so the gutter is on the left alone. */
.custom-home-contact__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 50%;
	min-width: 0;
	gap: 64px;
	padding: 96px 0 96px 48px;
	box-sizing: border-box;
}

.custom-home-contact__heading {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.custom-home-contact__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
}

.custom-home-contact__title,
.custom-home-contact__body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-wrap: anywhere;
}

.custom-home-contact__title {
	text-transform: uppercase;
}

/* The hours are two columns the file sets, not a table. */
.custom-home-contact__hour {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.custom-home-contact__hour-name {
	width: 127px;
	flex: 0 0 auto;
}

/* The time is the file's medium, where the name beside it is its regular. */
.custom-home-contact__hour-time {
	flex: 0 0 auto;
	font-weight: 500;
	white-space: nowrap;
}

.custom-home-contact__ways {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.custom-home-contact__way {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-home-contact__way:hover {
	opacity: 0.7;
}

/* The mark beside each way: the design's, not the client's. */
.custom-home-contact__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 36px;
}

.custom-home-contact__mark svg {
	display: block;
}

.custom-home-contact__map {
	position: relative;
	display: block;
	flex: 0 0 50%;
	min-width: 0;
	overflow: hidden;
}

.custom-home-contact__map img,
.custom-home-contact__map iframe {
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

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

/* Tablet and mobile — the words and the map stand one under the other, the map
   the width of the band and as deep as the file draws it. */
@media ( max-width: 1024px ) {
	.custom-home-contact {
		flex-direction: column;
	}

	.custom-home-contact__column {
		flex: 0 0 auto;
		width: 100%;
		gap: 26px;
		padding: 38px 20px 44px;
	}

	.custom-home-contact__block {
		gap: 8px;
	}

	.custom-home-contact__hour {
		gap: 38px;
	}

	.custom-home-contact__hour-name {
		width: 104px;
	}

	/* The disc is drawn smaller here, and the three ways stand on one row
	   again once it is. */
	.custom-home-contact__mark {
		width: 19px;
		height: 19px;
	}

	.custom-home-contact__mark svg {
		width: 10px;
		height: 10px;
	}

	.custom-home-contact__ways {
		gap: 14px;
	}

	.custom-home-contact__map {
		flex: 0 0 auto;
		width: 100%;
		height: 260px;
	}
}