/**
 * The Space, hero carousel — one section of the design.
 *
 * The title and the two actions above, then the slides. The slide in the middle
 * is the one the title belongs to; its neighbours sit shorter either side and
 * are cut off by the band's own edges.
 */

.custom-space-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.custom-space-hero__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding-top: 108px;
	padding-bottom: 92px;
	box-sizing: border-box;
	overflow: hidden;
}

/* The words the file writes under the slides, in the band it gives them. They
   belong to the slide, so they change with it. The band is as deep as the file
   draws it (6920:2163) whatever the words come to; words that would need more
   room than the three lines it holds end in an ellipsis instead. */
.custom-space-hero__banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 276px;
	padding: 0 48px;
	box-sizing: border-box;
}

.custom-space-hero__words {
	/* A line the client begins is a line the page begins; the script swaps
	   the words in as text, so the style keeps their breaks. */
	white-space: pre-line;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	padding: 0;
	width: 940px;
	max-width: 100%;
	overflow: hidden;
	color: inherit;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.custom-space-hero__title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.custom-space-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.custom-space-hero__button,
.custom-space-hero__button:hover,
.custom-space-hero__button:focus,
.custom-space-hero__button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
}

.custom-space-hero__tour {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* A slide with no tour to go to shows no way to it. */
.custom-space-hero__tour[hidden] {
	display: none;
}

.custom-space-hero__tour-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 4px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.custom-space-hero__tour-link::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 4px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 300ms ease-in-out;
}

.custom-space-hero__tour-link:hover::after {
	transform: scaleX( 1 );
}

.custom-space-hero__tour-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

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

/* The band the slides run through. */
/* The file leaves more between the actions and the slides than between the
   name and the actions. */
.custom-space-hero__stage {
	position: relative;
	margin-top: 20px;
	width: 100%;
	/* The run is cut to the width the file draws the band at. Left to the width
	   of the screen it simply grows wider than the run, and every slide shows
	   at once instead of the one being read with its neighbours at the edges. */
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	height: 720px;
	overflow: hidden;
}

/* Centred, so one slide stands in the middle of the band with nothing asked of
   the script; where there are more, the script moves the run from here. */
.custom-space-hero__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	height: 720px;
	transition: transform 500ms ease-in-out;
	will-change: transform;
}

.custom-space-hero__slide {
	position: relative;
	flex: 0 0 auto;
	width: 840px;
	height: 560px;
	border-radius: 24px;
	overflow: hidden;
	transition:
		width 500ms ease-in-out,
		height 500ms ease-in-out;
}

.custom-space-hero__slide.is-current {
	width: 1080px;
	height: 720px;
}

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

.custom-space-hero__arrow {
	position: absolute;
	top: 312px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #ebe4ca;
	cursor: pointer;
	transition: opacity 300ms ease-in-out;
}

/* The theme paints a bare button on every state it has; a class alone does not
   outrank that, so each state says its own ground here. */
.custom-space-hero__arrow:hover,
.custom-space-hero__arrow:focus,
.custom-space-hero__arrow:focus-visible,
.custom-space-hero__arrow:active {
	background-color: #ebe4ca;
	border-color: transparent;
	box-shadow: none;
}

.custom-space-hero__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-space-hero__arrow:hover {
	opacity: 0.7;
}

.custom-space-hero__arrow--prev {
	left: 76px;
}

.custom-space-hero__arrow--next {
	right: 76px;
}

/* The file draws the mark in a 24 box in the middle of the circle, not across
   the whole of it. */
.custom-space-hero__arrow svg {
	display: block;
	width: 24px;
	height: 20px;
	fill: #3d3426;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-space-hero__track,
	.custom-space-hero__slide,
	.custom-space-hero__arrow,
	.custom-space-hero__tour-link::after {
		transition: none;
	}
}

/* An anchor takes the browser's own colour unless it is told not to. */
.custom-space-hero__button,
.custom-space-hero__tour-link {
	color: inherit;
	text-decoration: none;
}

/* While the run is being returned to the middle, nothing is allowed to travel.
   The transform is jumped, but the slides carry a transition of their own, and
   a width easing into place over half a second after the move has finished is
   read as a second stumble. */
.custom-space-hero.is-settling .custom-space-hero__track,
.custom-space-hero.is-settling .custom-space-hero__slide {
	transition: none;
}

/* Tablet and mobile — the file draws one of them (11167:8184, 11167:8181).
   The name and the two actions stand as before, smaller; the words stand
   under the slides in a shallower band. Tablet is not drawn and takes the same
   figures.

   The slides are all one size here (11194:2758): 250 across a band of 390,
   16 apart, each three by two, the one being read in the middle and its
   neighbours showing a little at either edge. Held as shares of the band the
   run keeps that arrangement on the tablet too, where the file draws nothing. */
@media ( max-width: 1024px ) {
	.custom-space-hero__band {
		gap: 24px;
		padding-top: 17px;
		padding-bottom: 25px;
	}

	.custom-space-hero__title {
		padding: 0;
	}

	.custom-space-hero__actions {
		gap: 16px;
	}

	.custom-space-hero__button,
	.custom-space-hero__button:hover,
	.custom-space-hero__button:focus,
	.custom-space-hero__button:active {
		padding: 8px 16px;
	}

	.custom-space-hero__tour {
		gap: 3px;
	}

	.custom-space-hero__tour-link {
		padding-top: 3px;
	}

	.custom-space-hero__tour-icon {
		width: 16px;
		height: 16px;
	}

	.custom-space-hero__stage {
		margin-top: 25px;
		height: auto;
	}

	.custom-space-hero__track {
		gap: 4.103%;
		height: auto;
	}

	.custom-space-hero__slide,
	.custom-space-hero__slide.is-current {
		width: 64.103%;
		height: auto;
		aspect-ratio: 3 / 2;
		border-radius: 6px;
	}

	/* The arrows stand inside the slide being read, 8 in from either of its
	   edges as the file draws them, and in the middle of its height. */
	.custom-space-hero__arrow {
		top: calc( 50% - 12px );
		width: 24px;
		height: 24px;
	}

	.custom-space-hero__arrow--prev {
		left: 20.1%;
	}

	.custom-space-hero__arrow--next {
		right: 20.1%;
	}

	/* The mark keeps the share of the disc the file gives it. */
	.custom-space-hero__arrow svg {
		width: 6px;
		height: 5px;
	}

	.custom-space-hero__banner {
		height: 113px;
		padding: 0 23px;
	}

	.custom-space-hero__words {
		-webkit-line-clamp: 4;
		width: 100%;
	}
}

/* Tablet — not drawn. The arrows and the band under the slides come up with
   the run, larger than the narrow tier's and short of the wide tier's. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-space-hero__arrow {
		top: calc( 50% - 32px );
		width: 64px;
		height: 64px;
	}

	.custom-space-hero__arrow svg {
		width: 16px;
		height: 13px;
	}

	.custom-space-hero__banner {
		height: 180px;
	}
}