/*
 * Hero (section.hero): the first section of the page, right below the navigation (the page starts below it: padding of .main-body, css/base.css)
 * Structure (all templates): section.hero > [.hero-background-wrapper > .hero-background > img] + .container > .hero-content (h1.hero-title, p.hero-subtitle, ...) + [.hero-search]
 * Default: light grey background, dark title. Modifiers on section.hero, they can be combined and used on any page:
 * - .has-background: background image with an overlay and white text, it goes up under the navigation (transparent over the image)
 * - .is-full-height: fills the screen, content in the middle (homepage)
 * - .has-form-overlap: the searchbox below the content goes over the bottom edge, the image ends behind it (homepage, Rental Locations/Airports, Destinations)
 * - .has-background-split: text on the left half, image on the right half (posts)
 * - .is-user-profile: photo, name and subtitle in the middle, white, thin line below (author pages, Editorial Team)
 * Page specific styles: body classes in the templates' CSS (e.g. body.single-post: serif title, css/templates/blog.css)
 */
section.hero {
	position: relative;
	z-index: 2;
	--hero-space: calc(3rem + 3.75vw);
	padding-top: var(--hero-space);
	padding-bottom: var(--hero-space);
	background-color: var(--color-background-light); /* The background image is above it */
}

/* Title and subtitle */
.hero-title {
	color: var(--color-dark);
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
}
.hero-subtitle {
	margin-top: 0.25rem;
	color: var(--color-text);
	font-size: 1.125rem;
	line-height: 1.33333333;
}
@media (max-width: 991.98px) {
	.hero-title {
		font-size: 1.875rem;
	}
}
.hero-search {
	position: relative;
}
.hero-content + .hero-search {
	margin-top: 2rem;
}

/* Background image (.has-background) */
.hero-background,
.hero-background-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: -1;
}
/* Wrapper of the background image: goes up under the navigation, the image fills it */
section.hero > .hero-background-wrapper {
	top: calc(var(--nav-height) * -1);
	height: auto;
}
/*
 * Parallax image (.is-parallax): stays in place while the page scrolls over it. It is sticky, so the browser keeps it in place with the scroll (no script, no lag)
 * The track is twice as high as the wrapper, the image (as high as the wrapper) sticks to the top of the screen until the hero is scrolled out.
 * An image lower on the page (post header below the navigation) scrolls with the page until it reaches the top of the screen.
 * The wrapper cuts it with clip-path (overflow would stop sticky) and lets it above the hero on overscroll ("pull" at the top: js/components/hero.js scales it)
 */
.hero-background-wrapper {
	overflow: visible;
	clip-path: inset(-100vh 0 0 0);
}
.hero-background-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200%;
}
.hero-background.is-parallax {
	position: sticky;
	inset: var(--admin-bar-height) auto auto; /* Below the WP admin bar (fixed) */
	height: 50%;
	transform-origin: center bottom;
}
@media screen and (max-width: 600px) {
	.hero-background.is-parallax {
		top: 0; /* The admin bar is not fixed here */
	}
}
.hero-background > img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}
.hero-background > img.is-hidden-mobile {
	display: none;
}
@media (orientation: landscape) {
	.hero-background > img.is-hidden-mobile {
		display: block;
	}
	.hero-background > img.is-hidden-desktop {
		display: none;
	}
}
/* Overlay is part of the image, so it moves and grows with it */
.hero-background:after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(45, 45, 47, 0.45);
}
/* White text over the image; the image is also behind the navigation, so there is as much more space below (the content is in the middle of the image) */
section.hero.has-background {
	padding-bottom: calc(var(--hero-space) + var(--nav-height));
	color: var(--color-white);
}
section.hero.has-background :is(h1, h2, h3, h4, h5, h6, .hero-title, .hero-subtitle) {
	color: inherit;
}
@media (min-width: 992px) {
	section.hero.has-background :is(.hero-title, .hero-subtitle) {
		text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
	}
}

/*
 * Searchbox over the bottom edge (.has-form-overlap): content as wide as the searchbox, own title sizes
 * Desktop: the image ends behind the searchbox. Mobile: the image is a strip at the top, the content is in a white panel below it.
 * Below the image white like the next section (grey when the next one has a background too)
 */
section.hero.has-form-overlap:not(:has(+ .has-background)) {
	background-color: var(--color-white);
}
section.hero.has-form-overlap.has-background {
	padding-bottom: 0;
}
section.hero.has-form-overlap :is(.hero-content, .hero-search) {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: var(--searchbox-width);
}
section.hero.has-form-overlap .hero-title {
	letter-spacing: 0;
}
section.hero.has-form-overlap .hero-subtitle {
	margin-top: 0.5rem;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4;
}
section.hero.has-form-overlap .hero-content + .hero-search {
	margin-top: 1.75rem;
}
@media (min-width: 992px) {
	section.hero.has-form-overlap > .hero-background-wrapper {
		height: calc(100% + var(--nav-height) - 7.5rem);
	}
	section.hero.has-form-overlap.has-background :is(.hero-title, .hero-subtitle) {
		text-shadow: none;
	}
	/* Subtitle can be wider than the searchbox, it starts at the same line */
	section.hero.has-form-overlap .hero-subtitle {
		width: max-content;
		max-width: min(60rem, calc(100vw - var(--container-gutter-width) * 2 - var(--window-scrollbar-width) - (100vw - var(--searchbox-width)) / 2 + var(--container-gutter-width)));
	}
}
@media (max-width: 991.98px) {
	section.hero.has-form-overlap > .hero-background-wrapper {
		height: calc(var(--nav-height) + 1.3125rem);
	}
	section.hero.has-form-overlap.has-background {
		padding-top: 0.5625rem;
		color: inherit;
	}
	section.hero.has-form-overlap > .container {
		padding-top: 1.75rem;
		padding-bottom: 2rem;
		background-color: var(--color-white);
		border-top-left-radius: var(--radius-large);
		border-top-right-radius: var(--radius-large);
	}
	section.hero.has-form-overlap .hero-title {
		color: var(--color-dark);
		font-size: 1.5rem;
	}
	section.hero.has-form-overlap .hero-subtitle {
		color: var(--color-text);
		font-size: 1rem;
	}
	section.hero.has-form-overlap .hero-content + .hero-search {
		margin-top: 1.25rem;
	}
}

/* Full screen (.is-full-height, desktop): content in the middle, the image is behind the whole hero */
section.hero.is-full-height {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 992px) {
	section.hero.is-full-height {
		min-height: calc(100svh - var(--nav-height));
	}
	section.hero.is-full-height > .hero-background-wrapper {
		bottom: 0;
		height: auto;
	}
	section.hero.is-full-height > .container {
		width: 100%;
	}
	/* With the searchbox over the bottom edge: the usual space below the image (it is behind the whole hero, nothing goes over the edge) */
	section.hero.is-full-height.has-form-overlap.has-background {
		padding-bottom: calc(var(--hero-space) + var(--nav-height));
	}
}

/* Image on the right half (.has-background-split): no overlay (the text is beside it), dark until the image loads; mobile: image on top (16:9) */
section.hero.has-background-split {
	padding-top: 0;
	padding-bottom: 0;
}
section.hero.has-background-split > .hero-background-wrapper {
	top: 0;
	left: 50%;
	width: 50%;
	background-color: var(--color-dark);
	clip-path: inset(0);
}
section.hero.has-background-split .hero-background:after {
	display: none;
}
section.hero.has-background-split .hero-content {
	width: calc(50% - 3rem);
	min-height: 27.5rem;
	padding: 1.875rem 0 5rem;
}
@media (max-width: 991.98px) {
	section.hero.has-background-split > .hero-background-wrapper {
		position: relative;
		left: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	section.hero.has-background-split .hero-background:not(.is-parallax) {
		position: absolute;
	}
	section.hero.has-background-split .hero-content {
		width: 100%;
		min-height: 0;
		padding: 1.5rem 0 2.5rem;
	}
}

/* User profile (.is-user-profile): white, content in the middle, the thin line below it ends the hero */
section.hero.is-user-profile {
	padding-bottom: 0;
	background-color: var(--color-white);
}
section.hero.is-user-profile .hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 2.75rem;
	border-bottom: 0.0625rem solid var(--color-border);
	text-align: center;
}
section.hero.is-user-profile .hero-title {
	font-size: 1.875rem;
	letter-spacing: 0;
	line-height: 1.3;
}
section.hero.is-user-profile .hero-subtitle {
	max-width: 30rem;
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.5;
}
@media (max-width: 767.98px) {
	section.hero.is-user-profile .hero-content {
		padding-bottom: 2rem;
	}
	section.hero.is-user-profile .hero-title {
		font-size: 1.625rem;
	}
}