/* Juan Works Hero block. */
.home .site-header {
	position: relative;
	z-index: 20;
}

.juanworks-homepage-hero {
	position: relative;
	overflow: hidden;
	background-color: #fff1e5;
	height: 559px;
	box-sizing: border-box;
}

.page__text > .juanworks-homepage-hero:first-child {
	--juanworks-homepage-hero-header-offset: 72px;
	width: 100vw;
	max-width: 100vw;
	margin-top: calc(var(--juanworks-homepage-hero-header-offset) * -1);
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-top: var(--juanworks-homepage-hero-header-offset);
	height: 559px;
	z-index: 1;
}

.juanworks-homepage-hero__media,
.juanworks-homepage-hero__overlay {
	position: absolute;
	inset: 0;
}

.juanworks-homepage-hero__media {
	z-index: 0;
	pointer-events: none;
}

.juanworks-homepage-hero__mobile-media {
	display: none;
}

.juanworks-homepage-hero__image,
.juanworks-homepage-hero__video,
.juanworks-homepage-hero__mobile-image {
	display: block;
	width: 100%;
}

.juanworks-homepage-hero__image,
.juanworks-homepage-hero__video {
	height: 100%;
	object-fit: cover;
}

.juanworks-homepage-hero__mobile-image {
	height: auto;
}

.juanworks-homepage-hero__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100vw, calc(100vh * 1.78));
	height: max(100vh, calc(100vw / 1.78));
	border: 0;
	pointer-events: none;
}

.juanworks-homepage-hero__overlay {
	z-index: 1;
	background: rgba(7, 36, 86, var(--juanworks-homepage-hero-overlay-opacity, 0.35));
}

.juanworks-homepage-hero .header-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}

.juanworks-homepage-hero .header-hero__content .row {
	display: flex;
	align-items: center;
	min-height: 100%;
}

.juanworks-homepage-hero .header-hero__column {
	display: flex;
	align-items: center;
}

.juanworks-homepage-hero .header-hero__column:last-child {
	min-height: 1px;
}

.juanworks-homepage-hero__body {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.juanworks-homepage-hero__body > *:last-child {
	margin-bottom: 0;
}

.juanworks-homepage-hero__description {
	max-width: 36rem;
	font-size: 20px;
	line-height: 1.5;
}

.juanworks-homepage-hero__description p:last-child {
	margin-bottom: 0;
}

.juanworks-homepage-hero__actions {
	margin-top: 1.5rem;
}

.juanworks-homepage-hero__button:hover {
	color: #fff;
}

.juanworks-homepage-hero--text-white .header-hero__content h1,
.juanworks-homepage-hero--text-white .juanworks-homepage-hero__description {
	color: #fff;
}

.juanworks-homepage-hero--text-dark .header-hero__content h1,
.juanworks-homepage-hero--text-dark .juanworks-homepage-hero__description {
	color: #072456;
}

@media only screen and (max-width: 48em) {
	.juanworks-homepage-hero {
		height: auto;
		min-height: 559px;
		padding-bottom: 0;
		background-color: #FFF;
	}

	.page__text > .juanworks-homepage-hero:first-child {
		height: auto;
		min-height: 559px;
	}

	.juanworks-homepage-hero__body {
		padding-top: 0;
		padding-bottom: 3rem;
	}

	.juanworks-homepage-hero--has-mobile-image {
		min-height: 0;
	}

	.page__text > .juanworks-homepage-hero.juanworks-homepage-hero--has-mobile-image:first-child {
		min-height: 0;
	}

	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__media,
	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__overlay {
		display: none;
	}

	.juanworks-homepage-hero--has-mobile-image .header-hero__content {
		height: auto;
	}

	.juanworks-homepage-hero--has-mobile-image .header-hero__content .row {
		justify-content: center;
	}

	.juanworks-homepage-hero--has-mobile-image .header-hero__column:first-child {
		flex-basis: 100%;
		max-width: 100%;
		justify-content: center;
	}

	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__body {
		width: 100%;
		text-align: center;
		padding-bottom: 2rem;
	}

	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__description {
		max-width: none;
		margin-right: auto;
		margin-left: auto;
	}

	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__actions {
		display: flex;
		justify-content: center;
	}

	.juanworks-homepage-hero--has-mobile-image .juanworks-homepage-hero__mobile-media {
		display: block;
	}

	/*
	 * The "text white" modifier means "this text sits over the hero image", which is only true
	 * of the desktop layout. The mobile layout with a mobile image moves the image BELOW the text
	 * and paints the hero white, so that modifier leaves white text on a white background and the
	 * headline disappears. Force the dark colour for this layout only, rather than changing the
	 * block setting, which desktop still needs.
	 */
	.juanworks-homepage-hero--has-mobile-image.juanworks-homepage-hero--text-white .header-hero__content h1,
	.juanworks-homepage-hero--has-mobile-image.juanworks-homepage-hero--text-white .juanworks-homepage-hero__description {
		color: #072456;
	}
}