/* =========================================================
   PAGE HERO (Day Charter, Overnight Charter)

   Up to 1024px   : 4 / 5    (mobile crop 1024 x 1280)
   1025px and up  : 21 / 9   (full featured image, 2560 x 1440)

   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 page-hero.php as:
     --hero-image-desktop
     --hero-image-mobile

   Section class in WPBakery : page-hero-section
   Title text class          : page-hero-title
   Tagline text class        : page-hero-tagline
   Intro text class          : page-hero-intro

   Compact variant (e.g. Contact page): see the end of this
   stylesheet, Extra class "page-hero-section page-hero-compact".
========================================================= */

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

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


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

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


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

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

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

.page-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.
========================================================= */

.page-hero-section .page-hero-title,
.page-hero-section .page-hero-title h1,
.page-hero-section .page-hero-title .w-text-h,
.page-hero-section .page-hero-title .w-text-value {
	margin: 0;
	font-size: clamp(2rem, 1.2533rem + 2.8444vw, 3.6rem);
	line-height: 1.05;
	color: #ffffff !important;
	opacity: 1 !important;
}

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


/* =========================================================
   TAGLINE
========================================================= */

.page-hero-section .page-hero-tagline,
.page-hero-section .page-hero-tagline p,
.page-hero-section .page-hero-tagline .w-text-h,
.page-hero-section .page-hero-tagline .w-text-value {
	margin: 0;
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


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

.page-hero-section .page-hero-intro,
.page-hero-section .page-hero-intro p,
.page-hero-section .page-hero-intro .w-text-h,
.page-hero-section .page-hero-intro .w-text-value {
	margin-inline: auto;
	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) {
	.page-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;
	}

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


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

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


/* =========================================================
   PAGE HERO – COMPACT (e.g. Contact page)

   Extra class on the row: "page-hero-section page-hero-compact"

   Same image, scrim, title and intro as above. Only the
   height and the bottom spacing change:
     Up to 1024px   : 8 / 5        (mobile image 1024 x 640)
     1025px and up  : 2560 / 833   (desktop image 2560 x 833)
========================================================= */

.page-hero-section.page-hero-compact {
	aspect-ratio: 8 / 5 !important;
}

.page-hero-section.page-hero-compact > .l-section-h {
	padding-bottom: 1.75rem;
}

@media (min-width: 1025px) {
	.page-hero-section.page-hero-compact {
		aspect-ratio: 2560 / 833 !important;
	}

	.page-hero-section.page-hero-compact > .l-section-h {
		padding-bottom: 2.5rem;
	}
}

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