/* =========================================================================
 * Ngage Hero (WPBakery element "Ngage Hero")
 * Markup comes from ngage_hero_shortcode() in functions.php.
 * Place the element in a Full Width WPBakery row.
 *
 * The H1 is small text placed just above the slogan that is part of the
 * slide images:
 *   - Desktop (16:9 images): slogan block is centred at 75% across, starting
 *     about 25% down, so the H1 sits centred at 75%, ending about 21% down.
 *   - Phones (9:16 mobile images): slogan starts about 68% down, under the
 *     photo, so the H1 sits centred between the photo and the slogan.
 * Positions are measured against the image itself (not the browser window),
 * so the H1 follows the image as it is cropped at different screen sizes.
 * ====================================================================== */

.ngage-hero {
	/* Settings — change these to adjust the hero. */
	--ngage-hero-height: min(868px, 70vw);   /* Matches the old Revolution Slider (1240×868 grid). */
	--ngage-hero-height-mobile: 195vw;       /* A bit taller than the 9:16 mobile images (177.78vw); their sides are trimmed slightly. */
	--ngage-hero-fade: 1s;                   /* Crossfade duration (time per slide is in js/ngage-hero.js). */
	--ngage-hero-text-color: #ffffff;

	/* Image shape (width / height) the H1 position is measured against. */
	--ngage-hero-ratio: 16 / 9;

	/* H1 position inside the image, desktop. */
	--ngage-hero-h1-x: 75%;                  /* Horizontal centre of the H1. */
	--ngage-hero-h1-y: 21%;                  /* Bottom edge of the H1, from the top. */
	--ngage-hero-h1-width: 36%;              /* Maximum width before wrapping. */
	--ngage-hero-h1-size: clamp(13px, 1.05cqw, 22px);

	/* Text position inside the image, desktop (slogan ends about 64% down). */
	--ngage-hero-text-x: 75%;                /* Horizontal centre of the text. */
	--ngage-hero-text-y: 69%;                /* Top edge of the text. */
	--ngage-hero-text-width: 34%;            /* Maximum width before wrapping. */
	--ngage-hero-text-size: clamp(13px, 1.2cqw, 24px);

	position: relative;
	width: 100%;
	height: var(--ngage-hero-height);
	overflow: hidden;
	container-type: size;
	background-color: #000000;
}

/* Slides ---------------------------------------------------------------- */

.ngage-hero__slides,
.ngage-hero__slide,
.ngage-hero__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ngage-hero__slide {
	display: block;
	opacity: 0;
	transition: opacity var(--ngage-hero-fade) ease-in-out;
}

.ngage-hero__slide.is-active {
	opacity: 1;
}

.ngage-hero .ngage-hero__image {
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* Frame: an invisible box with the same size and crop as the image. ----- */

.ngage-hero__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: max(100cqw, 100cqh * (var(--ngage-hero-ratio)));
	height: max(100cqh, 100cqw / (var(--ngage-hero-ratio)));
	transform: translate(-50%, -50%);
	container-type: inline-size;
	pointer-events: none;
}

/* H1 -------------------------------------------------------------------- */
/* Font family, weight and uppercase come from the theme's H1 (Bridge options). */

.ngage-hero .ngage-hero__heading {
	position: absolute;
	left: var(--ngage-hero-h1-x);
	bottom: calc(100% - var(--ngage-hero-h1-y));
	box-sizing: border-box;
	width: max-content;
	max-width: var(--ngage-hero-h1-width);
	margin: 0;
	transform: translateX(-50%);
	color: var(--ngage-hero-text-color);
	font-size: var(--ngage-hero-h1-size);
	line-height: 1.3;
	letter-spacing: 2px;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
}

/* Text ------------------------------------------------------------------ */

.ngage-hero .ngage-hero__text {
	position: absolute;
	left: var(--ngage-hero-text-x);
	top: var(--ngage-hero-text-y);
	box-sizing: border-box;
	width: max-content;
	max-width: var(--ngage-hero-text-width);
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	color: var(--ngage-hero-text-color);
	font-size: var(--ngage-hero-text-size);
	line-height: 1.45;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
}

/* Phones ---------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.ngage-hero {
		/* At least as tall as the phone screen (lvh = screen height with the
		   browser bars hidden, so it never leaves a gap as they slide away). */
		height: max(var(--ngage-hero-height-mobile), 100vh);

		/* No mobile images: the landscape image is cropped to its centre,
		   so the slogan is off-screen. Put the H1 near the top instead. */
		--ngage-hero-h1-x: 50%;
		--ngage-hero-h1-y: 18%;
		--ngage-hero-h1-width: 90vw;
		--ngage-hero-h1-size: clamp(12px, 3.6vw, 18px);

		--ngage-hero-text-x: 50%;
		--ngage-hero-text-y: 20%;
		--ngage-hero-text-width: 86vw;
		--ngage-hero-text-size: clamp(12px, 3.4vw, 16px);
	}

	/* Mobile images (9:16): H1 centred in the gap between the photo
	   (ends about 63% down) and the slogan (starts about 68% down).
	   Text sits in the strip under the slogan (ends about 90-95% down). */
	.ngage-hero--has-mobile {
		--ngage-hero-ratio: 9 / 16;
		--ngage-hero-h1-y: 66%;                /* Vertical centre of the H1. */
		/* Widths are capped by the screen, because the image (and frame) is
		   wider than the screen when the hero is taller than 9:16. */
		--ngage-hero-h1-width: min(90%, 90vw);
		--ngage-hero-h1-size: clamp(12px, 3.6vw, 18px);

		--ngage-hero-text-bottom: 3.5%;        /* Bottom edge of the text, from the bottom. */
		--ngage-hero-text-width: min(92%, 92vw);
		--ngage-hero-text-size: clamp(11px, 3.1vw, 16px);
	}

	@supports (height: 100lvh) {
		.ngage-hero {
			height: max(var(--ngage-hero-height-mobile), 100lvh);
		}
	}

	.ngage-hero--has-mobile .ngage-hero__text {
		top: auto;
		bottom: var(--ngage-hero-text-bottom);
		line-height: 1.3;
	}

	.ngage-hero--has-mobile .ngage-hero__heading {
		top: var(--ngage-hero-h1-y);
		bottom: auto;
		transform: translate(-50%, -50%);
	}
}

/* Browsers without container units: approximate position. --------------- */

@supports not (width: 1cqw) {
	.ngage-hero__frame {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: none;
	}

	.ngage-hero .ngage-hero__heading {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ngage-hero__slide {
		transition: none;
	}
}