/* =========================================================
   FIDJ IMAGE HERO
   Static LCP-optimized replacement for LayerSlider banners
   ========================================================= */

/*
 * The element can live inside an Avia content container, but the hero itself
 * must break out to the viewport just like LayerSlider.
 */
#top .fidj-image-hero {
	--fidj-image-hero-desktop-position: center center;
	--fidj-image-hero-mobile-position: center center;

	position: relative !important;
	left: 50% !important;

	display: block !important;

	width: 100vw !important;
	max-width: none !important;
	height: var(--fidj-image-hero-desktop-height, 430px) !important;
	min-height: 0 !important;

	margin: 0 0 0 -50vw !important;
	padding: 0 !important;

	overflow: hidden !important;
	background: #006f7d;
}

#top .fidj-image-hero,
#top .fidj-image-hero * {
	box-sizing: border-box;
}

/* Remove spacing Avia can add around the custom element. */
#top .avia_codeblock .fidj-image-hero,
#top .avia_codeblock_section .fidj-image-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* =========================================================
   IMAGE
   ========================================================= */

#top .fidj-image-hero__picture {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;

	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
}

#top .fidj-image-hero__image {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover !important;
	object-position: var(--fidj-image-hero-desktop-position) !important;
}

/* =========================================================
   TEAL OVERLAY
   ========================================================= */

#top .fidj-image-hero__overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;

	background:
		linear-gradient(
			90deg,
			rgba(0, 111, 125, 0.98) 0%,
			rgba(0, 111, 125, 0.96) 24%,
			rgba(0, 111, 125, 0.83) 43%,
			rgba(0, 111, 125, 0.48) 60%,
			rgba(0, 111, 125, 0.12) 78%,
			rgba(0, 111, 125, 0.00) 100%
		);

	pointer-events: none;
}

/* =========================================================
   CONTENT
   ========================================================= */

#top .fidj-image-hero__inner {
	position: relative !important;
	z-index: 3;

	display: flex !important;
	align-items: center !important;

	width: 100% !important;
	max-width: 1680px !important;
	height: 100% !important;
	min-height: 0 !important;

	margin: 0 auto !important;
	padding: 0 clamp(40px, 7.5vw, 145px) !important;
}

#top .fidj-image-hero__content {
	width: min(900px, 67%) !important;

	margin: 45px 0 0 !important;
	padding: 0 !important;

	color: #fff !important;
	text-align: left !important;
}

/* =========================================================
   TITLE
   ========================================================= */

#top .fidj-image-hero__title {
	position: relative !important;

	display: inline-block !important;
	width: fit-content !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	color: #fff !important;

	font-family: "Lato", sans-serif !important;
	font-size: clamp(48px, 3.3vw, 62px) !important;
	font-style: normal !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -1.3px !important;

	text-align: left !important;
	text-transform: none !important;
}

#top .fidj-image-hero__title::after {
	display: none !important;
	content: none !important;
}

/* =========================================================
   SUBTITLE
   ========================================================= */

#top .fidj-image-hero__subtitle {
	position: relative !important;

	display: block !important;
	width: fit-content !important;
	max-width: 900px !important;

	margin: 14px 0 0 28px !important;
	padding: 0 !important;

	color: #fff !important;

	font-family: "Lato", sans-serif !important;
	font-size: clamp(18px, 1.35vw, 25px) !important;
	font-style: italic !important;
	font-weight: 300 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;

	text-align: left !important;
	text-transform: none !important;
}

/*
 * Blue separator above subtitle.
 * Extends left so it aligns with the H1.
 * Width follows the subtitle text.
 */
#top .fidj-image-hero__subtitle::before {
	content: "";

	position: absolute;
	top: -8px;
	left: -28px;

	display: block;

	width: calc(100% + 28px);
	height: 2px;

	background: #06b4cc;
}

/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (min-width: 768px) and (max-width: 989px) {
	#top .fidj-image-hero {
		height: var(--fidj-image-hero-desktop-height, 300px) !important;
	}

	#top .fidj-image-hero__inner {
		padding-right: 45px !important;
		padding-left: 45px !important;
	}

	#top .fidj-image-hero__content {
		width: 70% !important;
		margin-top: 30px !important;
	}

	#top .fidj-image-hero__title {
		font-size: 46px !important;
	}

	#top .fidj-image-hero__subtitle {
		margin-top: 13px !important;
		margin-left: 22px !important;
		font-size: 18px !important;
	}

	#top .fidj-image-hero__subtitle::before {
		left: -22px;
		width: calc(100% + 22px);
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {
	#top .fidj-image-hero {
		left: 50% !important;

		width: 100vw !important;
		height: var(--fidj-image-hero-mobile-height, 188px) !important;
		min-height: var(--fidj-image-hero-mobile-height, 188px) !important;

		margin-left: -50vw !important;
	}

	#top .fidj-image-hero__image {
		object-position: var(--fidj-image-hero-mobile-position) !important;
	}

	#top .fidj-image-hero__inner {
		display: flex !important;
		align-items: center !important;

		width: 100% !important;
		height: var(--fidj-image-hero-mobile-height, 188px) !important;
		min-height: var(--fidj-image-hero-mobile-height, 188px) !important;

		padding: 27px 26px 0 !important;
	}

	#top .fidj-image-hero__content {
		width: 94% !important;

		margin: 24px 0 0 !important;
		padding: 0 !important;
	}

	#top .fidj-image-hero__title {
		font-size: 36px !important;
		line-height: 1.05 !important;
		letter-spacing: -0.8px !important;
	}

	#top .fidj-image-hero__subtitle {
		width: fit-content !important;
		max-width: 390px !important;

		margin: 13px 0 0 11px !important;

		font-size: 14px !important;
		line-height: 1.45 !important;
	}

	#top .fidj-image-hero__subtitle::before {
		top: -7px;
		left: -11px;

		width: calc(100% + 11px);
		height: 2px;
	}
}

@media only screen and (max-width: 390px) {
	#top .fidj-image-hero {
		height: var(--fidj-image-hero-mobile-height, 180px) !important;
		min-height: var(--fidj-image-hero-mobile-height, 180px) !important;
	}

	#top .fidj-image-hero__inner {
		height: var(--fidj-image-hero-mobile-height, 180px) !important;
		min-height: var(--fidj-image-hero-mobile-height, 180px) !important;

		padding-right: 22px !important;
		padding-left: 22px !important;
	}

	#top .fidj-image-hero__content {
		margin-top: 20px !important;
	}

	#top .fidj-image-hero__title {
		font-size: 36px !important;
	}

	#top .fidj-image-hero__subtitle {
		width: fit-content !important;
		max-width: 330px !important;
		font-size: 12px !important;
	}
}

/* =========================================================
   PRACTICE CHILD HERO
   ========================================================= */

#top .fidj-image-hero.practice-child-hero .fidj-image-hero__subtitle::before {
	display: none !important;
	content: none !important;
}

@media only screen and (min-width: 990px) {
	#top .fidj-image-hero.practice-child-hero .fidj-image-hero__inner {
		padding-left: clamp(160px, 13vw, 220px) !important;
	}

	#top .fidj-image-hero.practice-child-hero .fidj-image-hero__title {
		font-size: 48px !important;
		padding-bottom: 0 !important;
	}
}