/* =========================================================
   WATER TOY HERO

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

   Same build as the About and Our Yachts heroes: the image is a background on
   the section itself, with the scrim in the same background
   stack. The image URLs come from toy-hero.php (per post) as:
     --hero-image-desktop
     --hero-image-mobile

   Section class in template : toy-hero-section
   Price element class       : toy-hero-price
   Post Title element class  : toy-hero-title
   Intro element class       : toy-hero-intro
========================================================= */

.toy-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. */

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


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

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


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

.toy-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;
}

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

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


/* =========================================================
   PRICE
   Sits above the title as a badge. Impreza wraps custom field
   and text elements in extra spans/divs, so the colour has to
   reach all of them. Font size reuses the intro size.
========================================================= */

.toy-hero-section .toy-hero-price {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 8px 16px;
	border-radius: 999px;
	background-color: var(--color-primary, #1b4f9b);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.toy-hero-section .toy-hero-price,
.toy-hero-section .toy-hero-price p,
.toy-hero-section .toy-hero-price .w-post-elm-value,
.toy-hero-section .toy-hero-price .w-text-h,
.toy-hero-section .toy-hero-price .w-text-value {
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff !important;
	opacity: 1 !important;
}

.toy-hero-section .toy-hero-price p {
	margin: 0;
}


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

.toy-hero-section .toy-hero-title,
.toy-hero-section .toy-hero-title h1,
.toy-hero-section .toy-hero-title .w-text-h,
.toy-hero-section .toy-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;
}

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


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

.toy-hero-section .toy-hero-intro,
.toy-hero-section .toy-hero-intro p,
.toy-hero-section .toy-hero-intro .w-text-h,
.toy-hero-section .toy-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;
}


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

@media (min-width: 1025px) {
	.toy-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;
	}

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


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

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