/**
 * About, detail — one section of the design.
 *
 * What the place stands for across the top, then how to reach it beside the map.
 */

.custom-about-detail__intro {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-about-detail__vision {
	flex: 0 0 auto;
}

.custom-about-detail__mission {
	flex: 1 1 0;
	min-width: 0;
}

.custom-about-detail__vision,
.custom-about-detail__mission {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.custom-about-detail__vision-body {
	width: 508px;
	max-width: 100%;
}

.custom-about-detail__mission-body {
	width: 100%;
}

.custom-about-detail__intro h3,
.custom-about-detail__intro p {
	margin: 0;
}

.custom-about-detail__intro h3 {
	color: inherit;
	padding: 0;
	text-transform: uppercase;
}

/* How to reach it, and the map beside it. The band runs the full width; what
   stands in it is held to 1440 and centred, so the halves are measured from
   there and the words line up with every other section down the page.

   The ground is a radial the file draws from the middle of the band outward:
   an ellipse half the band each way, centred on it. The margins either side
   carry it too, as they carry the ground of any band they sit in. */
.custom-about-detail__split {
	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%,
		#ebe4ca 6.25%,
		#faf6ea 100%
	);
}

.custom-about-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-about-detail__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

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

.custom-about-detail__block h3 {
	color: inherit;
	padding: 0;
	text-transform: uppercase;
}

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

/* When each part of the evening runs. */
.custom-about-detail__hours {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	width: 100%;
}

.custom-about-detail__hours-name {
	width: 127px;
	flex: 0 0 auto;
}

.custom-about-detail__hours-time {
	white-space: nowrap;
}

/* How to get in touch. */
.custom-about-detail__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

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

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

.custom-about-detail__contact-mark svg {
	display: block;
	width: 16px;
	height: 16px;
}

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

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

/* Tablet and mobile — the file draws one of them (6688:3121, 11186:12190,
   11205:3053): what the place stands for one part under the other, then how
   to reach it, then the map the width of the screen. Tablet is not drawn and
   takes the same figures, the map deeper. */
@media ( max-width: 1024px ) {
	.custom-about-detail__intro {
		flex-direction: column;
		gap: 38px;
		padding: 38px 16px;
	}

	.custom-about-detail__vision,
	.custom-about-detail__mission {
		flex: 0 0 auto;
		width: 100%;
	}

	.custom-about-detail__vision-body {
		width: 100%;
	}

	.custom-about-detail__split {
		flex-direction: column;
	}

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

	.custom-about-detail__block {
		gap: 9px;
	}

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

	/* The file draws the name 70 across at a smaller size than the words are
	   set here; at this size it needs 100 to stand on one line. */
	.custom-about-detail__hours {
		gap: 24px;
	}

	.custom-about-detail__hours-name {
		width: 100px;
	}

	.custom-about-detail__contacts {
		gap: 13px;
	}

	.custom-about-detail__contact,
	.custom-about-detail__contact:hover,
	.custom-about-detail__contact:focus,
	.custom-about-detail__contact:active {
		gap: 9px;
	}

	.custom-about-detail__contact-mark {
		padding: 4px;
	}

	.custom-about-detail__contact-mark svg {
		width: 9px;
		height: 9px;
	}

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

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