/* =========================================================
   OUR YACHTS HERO

   Up to 1024px   : 4 / 5    (source 1024 x 1280)
   1025px and up  : 21 / 9   (source 2560 x 1097)

   Same build as the About hero: the image is a background on
   the section itself, with the scrim in the same background
   stack. The image URLs come from yachts-hero.php as:
     --hero-image-desktop
     --hero-image-mobile

   Section class in WPBakery : yachts-hero-section
   Title text class          : yachts-hero-title
   Intro text class          : yachts-hero-intro
========================================================= */

.yachts-hero-section {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5 !important;
	min-height: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;

	background-image:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.28) 0%,
			rgba(0, 0, 0, 0.06) 30%,
			rgba(0, 0, 0, 0.42) 72%,
			rgba(0, 0, 0, 0.72) 100%
		),
		var(--hero-image-mobile) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	background-origin: border-box !important;
	background-clip: border-box !important;
}


/* Impreza adds height_auto and may set its own min-height. */

.yachts-hero-section.height_auto {
	min-height: 0;
}


/* =========================================================
   HIDE ORIGINAL IMPREZA SLIDER AND OVERLAY
========================================================= */

.yachts-hero-section > .l-section-slider,
.yachts-hero-section > .l-section-overlay {
	display: none !important;
}


/* =========================================================
   INNER CONTAINER
   Fills the ratio box and pushes the wording to the bottom.
========================================================= */

.yachts-hero-section > .l-section-h {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding-top: 0;
	padding-bottom: 2.5rem;
}

.yachts-hero-section > .l-section-h > .g-cols {
	width: 100%;
}

.yachts-hero-section .wpb_wrapper {
	max-width: 760px;
}


/* =========================================================
   TITLE
   Impreza wraps text widgets in .w-text > .w-text-h >
   .w-text-value, so the colour has to reach all of them.
========================================================= */

.yachts-hero-section .yachts-hero-title,
.yachts-hero-section .yachts-hero-title h1,
.yachts-hero-section .yachts-hero-title .w-text-h,
.yachts-hero-section .yachts-hero-title .w-text-value {
	margin: 0;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	line-height: 1.05;
	color: #ffffff !important;
	opacity: 1 !important;
}

.yachts-hero-section .yachts-hero-title {
	margin-bottom: 1rem;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   INTRO
========================================================= */

.yachts-hero-section .yachts-hero-intro,
.yachts-hero-section .yachts-hero-intro p,
.yachts-hero-section .yachts-hero-intro h2,
.yachts-hero-section .yachts-hero-intro .w-text-h,
.yachts-hero-section .yachts-hero-intro .w-text-value {
	margin: 0;
	max-width: 640px;
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92) !important;
	opacity: 1 !important;
    font-family: var(--font-family)!important;
    font-weight: 400;
}


/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media (min-width: 1025px) {
	.yachts-hero-section {
		aspect-ratio: 21 / 9 !important;

		background-image:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.28) 0%,
				rgba(0, 0, 0, 0.04) 35%,
				rgba(0, 0, 0, 0.38) 70%,
				rgba(0, 0, 0, 0.68) 100%
			),
			var(--hero-image-desktop) !important;
	}

	.yachts-hero-section > .l-section-h {
		padding-bottom: 4rem;
	}
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {
	.yachts-hero-section > .l-section-h {
		padding-bottom: 1.75rem;
	}
}