/**
 * Contact, detail — one section of the design.
 *
 * How to reach the place beside the map of it.
 */

/* The band runs the full width and carries its own ground; what stands in it is
   held to 1440 and centred. The margins either side are the band's too, so they
   take the same ground rather than showing whatever is behind the page. */
.custom-contact-detail {
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 0 max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;
	background-color: #c9bca6;
}

.custom-contact-detail__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
	flex: 0 0 50%;
	min-width: 0;
	padding: 96px 0 96px 48px;
	box-sizing: border-box;
}

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

.custom-contact-detail__block h3,
.custom-contact-detail__block p {
	margin: 0;
}

.custom-contact-detail__block h3 {
	text-transform: uppercase;
}

.custom-contact-detail__block-body {
	width: 617px;
	max-width: 100%;
}

/* The ways of getting in touch, and the ways of following. */
.custom-contact-detail__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.custom-contact-detail__item,
.custom-contact-detail__item:hover,
.custom-contact-detail__item:focus,
.custom-contact-detail__item:active {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.custom-contact-detail__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 8px;
	border-radius: 36px;
}

.custom-contact-detail__mark svg {
	display: block;
	width: 16px;
	height: 16px;
}

.custom-contact-detail__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 12px 24px;
	border: 1px solid currentColor;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-contact-detail__button:hover {
	opacity: 0.8;
}

.custom-contact-detail__map {
	position: relative;
	flex: 0 0 50%;
	min-width: 0;
	overflow: hidden;
}

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

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

/* Tablet and mobile — the file draws one of them (11186:13547, 11205:3065):
   how to reach the place in one column, each way of getting in touch with
   its mark above its name, and the map the width of the screen beneath.
   Tablet is not drawn and takes the same figures, the map deeper. */
@media ( max-width: 1024px ) {
	.custom-contact-detail {
		flex-direction: column;
	}

	.custom-contact-detail__column {
		flex: 0 0 auto;
		gap: 24px;
		padding: 38px 16px;
	}

	.custom-contact-detail__block {
		gap: 8px;
	}

	/* The two rows of ways stand 16 under their names, the rest 8. */
	.custom-contact-detail__block:has( .custom-contact-detail__row ) {
		gap: 16px;
	}

	.custom-contact-detail__block-body {
		width: 100%;
	}

	/* The ways stand in a row from the left, 24 apart, as asked — not spread
	   to the edges. */
	.custom-contact-detail__row {
		justify-content: flex-start;
		gap: 16px 24px;
		width: 100%;
	}

	.custom-contact-detail__item,
	.custom-contact-detail__item:hover,
	.custom-contact-detail__item:focus,
	.custom-contact-detail__item:active {
		flex-direction: column;
		gap: 4px;
	}

	.custom-contact-detail__mark {
		padding: 4px;
	}

	.custom-contact-detail__mark svg {
		width: 8px;
		height: 8px;
	}

	.custom-contact-detail__button {
		padding: 6px 12px;
	}

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

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-contact-detail__map {
		height: 400px;
	}
}