/**
 * Homepage Hero
 *
 * Core block structure:
 * - Group: outer hero region.
 * - Group: editable landscape Image blocks.
 * - Group: fixed text/button content.
 *
 * The hero intentionally uses width-based responsive sizing rather than
 * viewport-height sizing. This keeps the content position predictable across
 * phones, tablets, laptops and larger desktop displays.
 */

/* -------------------------------------------------------------------------- */
/* Hero shell                                                                  */
/* -------------------------------------------------------------------------- */

.thula-home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	min-height: clamp(50rem, calc(33rem + 20vw), 58rem);
	margin-block: 0;
	background: #09183c;
}

/**
 * Fixed navy overlay.
 *
 * The left side remains darker for text contrast while allowing more of the
 * active landscape image to remain visible towards the right.
 */
.thula-home-hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			#09183c 0%,
			#09183c 5%,
			rgba(9, 24, 60, 0.99) 15%,
			rgba(9, 24, 60, 0.93) 27%,
			rgba(9, 24, 60, 0.70) 50%,
			rgba(9, 24, 60, 0.24) 76%,
			rgba(9, 24, 60, 0.12) 100%
		),
		linear-gradient(
			180deg,
			rgba(9, 24, 60, 0.12) 0%,
			rgba(9, 24, 60, 0.06) 55%,
			rgba(9, 24, 60, 0.32) 100%
		);
}



/* -------------------------------------------------------------------------- */
/* Landscape slides                                                            */
/* -------------------------------------------------------------------------- */

.thula-home-hero__slides {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.thula-home-hero__slides > .wp-block-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;

	/* Outgoing slide - slightly quicker so it does not linger. */
	transition:
		opacity 1s ease-in,
		visibility 0s linear 1s;
}

/**
 * Show the first image when JavaScript is unavailable.
 * Once enhanced, JavaScript controls the active slide.
 */
.thula-home-hero:not(.thula-home-hero--enhanced)
	.thula-home-hero__slides > .wp-block-image:first-child,
.thula-home-hero__slides > .wp-block-image.is-active {
	opacity: 1;
	visibility: visible;
}

/**
 * Incoming slide - retain the softer, slower fade.
 */
.thula-home-hero__slides > .wp-block-image.is-active {
	transition:
		opacity 1.4s ease-in-out,
		visibility 0s linear;
}

.thula-home-hero__slides > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

/**
 * Decorative left-hand arc.
 *
 * The second/right-hand circle is intentionally omitted so that the landscape
 * photography remains the main visual focus.
 */
.thula-home-hero__slides::before {
	content: "";
	position: absolute;
	z-index: 2;
	width: clamp(34rem, 43vw, 52rem);
	height: clamp(23rem, 29vw, 35rem);
	top: clamp(-22rem, -17vw, -15rem);
	left: clamp(-21rem, -15vw, -13rem);
	border: 1px solid rgba(2, 158, 181, 0.35);
	border-radius: 50%;
	pointer-events: none;
}

@media (min-width: 1440px) {

	.thula-home-hero__slides > .wp-block-image img {
		object-position: center 42%;
	}

}


/* -------------------------------------------------------------------------- */
/* Fixed hero content                                                          */
/* -------------------------------------------------------------------------- */

.thula-home-hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: inherit;
	padding-top: 10.5rem;
	padding-bottom: 6.5rem;
}

.thula-home-hero__content {
	width: min(100%, 46rem);
	margin: 0;
}


.thula-home-hero__eyebrow {
	margin-top: 0;
	margin-bottom: calc(var(--wp--preset--spacing--30) + 10px);
}

.thula-home-hero .is-style-eyebrow-white {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--white) 88%,
		transparent
	);
}

.thula-home-hero__title {
	max-width: 41rem;
	margin-top: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: clamp(2.5rem, 2.5vw, 2.8rem);
	font-weight: 400;
	text-wrap: pretty;
}

.thula-home-hero__text {
	max-width: 38rem;
	font-size: clamp(1.125rem, calc(0.8vw + 0.85rem), 1.3rem) !important;
	font-weight: 300;
	line-height: 1.4;
}

.thula-home-hero__actions {
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
	justify-content: flex-start;
}

/**
 * Give the desktop composition a little more space from the left edge.
 * Tablet and mobile naturally fall back to the normal Site Container position.
 */
@media (min-width: 1100px) {

	.wp-block-group.is-style-site-container.thula-home-hero__inner {
		padding-left: clamp(5rem, 6vw, 6rem);
	}
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                  */
/* -------------------------------------------------------------------------- */

.thula-home-hero__pagination {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: clamp(1.35rem, 2.5vw, 2.25rem);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
}

/**
 * Match the Product Carousel's visible dots while retaining a larger
 * interactive target around each control.
 */
.thula-home-hero__dot {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.thula-home-hero__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.thula-home-hero__dot[aria-pressed="true"]::before {
	background: var(--wp--preset--color--thula-teal);
}

.thula-home-hero__dot:hover::before {
	background: var(--wp--preset--color--white);
}

.thula-home-hero__dot[aria-pressed="true"]:hover::before {
	background: var(--wp--preset--color--thula-teal);
}

.thula-home-hero__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 1px;
}

/**
 * Compact pause/play control for automatic landscape rotation.
 */
.thula-home-hero__pause {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.8);
	background: transparent;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.thula-home-hero__pause:hover {
	color: var(--wp--preset--color--white);
}

.thula-home-hero__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 1px;
}


/* -------------------------------------------------------------------------- */
/* Tablet                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/**
	 * Keep a predictable minimum hero height rather than tying the layout to
	 * each device's viewport height. If the content needs more space, the hero
	 * can grow naturally beyond this minimum.
	 */
	.thula-home-hero {
		min-height: 57rem;
	}

	.thula-home-hero::before {
		background:
			linear-gradient(
				180deg,
				rgba(9, 24, 60, 0.50) 0%,
				rgba(9, 24, 60, 0.72) 32%,
				rgba(9, 24, 60, 0.92) 100%
			);
	}

	.wp-block-group.is-style-site-container.thula-home-hero__inner {
		align-items: flex-start;
		padding-top: 15rem;
		padding-right: 0;
		padding-bottom: 5.5rem;
		padding-left: 0;
	}

	/**
	 * On narrower screens, anchor the content from a predictable top position.
	 * This prevents different amounts of text wrapping from moving the entire
	 * content group towards the sticky header.
	 */
	.thula-home-hero__inner {
		align-items: flex-start;
		padding-top: 10rem;
		padding-bottom: 5.5rem;
		padding-left: 0;
	}

	.thula-home-hero__content {
		width: min(100%, 40rem);
		margin-inline: auto;
		text-align: center;
	}

	.thula-home-hero__eyebrow {
		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-bottom: calc(var(--wp--preset--spacing--20) + 10px);
		margin-left: auto;
	}

	.thula-home-hero__title {
	max-width: 38rem;
	margin-right: auto;
	margin-left: auto;
	font-size: clamp(2rem, 5.5vw, 2.35rem);
}

	.thula-home-hero__text {
		max-width: 34rem;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.thula-home-hero__actions {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	justify-content: center;
	column-gap: var(--wp--preset--spacing--20);
	row-gap: var(--wp--preset--spacing--10);
}

	.thula-home-hero__actions .wp-block-button {
		flex: 0 0 auto;
	}

	.thula-home-hero__actions .wp-block-button__link {
		width: auto;
	}

	.thula-home-hero__slides::before {
		width: 34rem;
		height: 23rem;
		top: -16rem;
		left: -15rem;
	}

}


/* -------------------------------------------------------------------------- */
/* Mobile                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	/**
	 * Fill at least the visible phone viewport.
	 *
	 * 100vh is retained as a fallback, while 100svh gives more predictable
	 * sizing around mobile browser controls. Because this is min-height rather
	 * than height, the hero can still grow if its content needs more room.
	 */
	.thula-home-hero {
		min-height: 100vh;
		min-height: max(42rem, 100lvh);
	}

	/**
	 * Centre the hero content vertically within the phone viewport.
	 *
	 * Equal top and bottom padding replaces the previous large fixed top
	 * offsets, which varied too much between different phone screen heights.
	 */
	.wp-block-group.is-style-site-container.thula-home-hero__inner {
		min-height: 100vh;
		min-height: max(42rem, 100lvh);
		box-sizing: border-box;
		align-items: center;
		padding-top: 9rem;
		padding-right: 0;
		padding-bottom: 5rem;
		padding-left: 0;
	}

	/**
	 * Mobile overlay becomes progressively darker towards the bottom,
	 * keeping centred text readable over the landscape.
	 */
	.thula-home-hero::before {
		background:
			linear-gradient(
				180deg,
				rgba(9, 24, 60, 0.42) 0%,
				rgba(9, 24, 60, 0.70) 28%,
				rgba(9, 24, 60, 0.94) 100%
			);
	}

	.thula-home-hero__slides > .wp-block-image img {
		object-position: 62% center;
	}

	.thula-home-hero__content {
		width: min(100%, 32rem);
		margin-inline: auto;
		text-align: center;
	}

	.thula-home-hero__eyebrow {
		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-bottom: var(--wp--preset--spacing--20);
		margin-left: auto;
	}

	/**
	 * Scale the homepage H1 down for narrow phones.
	 */
	.thula-home-hero__title {
		max-width: 28rem;
		margin-right: auto;
		margin-left: auto;
		font-size: clamp(1.8rem, 7vw, 2rem);
		line-height: 1.12;
	}

	.thula-home-hero__text {
		max-width: 29rem;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		font-size: var(--wp--preset--font-size--base);
	}

	.thula-home-hero__actions {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: var(--wp--preset--spacing--30);
		margin-right: auto;
		margin-left: auto;
		gap: var(--wp--preset--spacing--10);
	}

	.thula-home-hero__actions.wp-block-buttons.is-content-justification-left {
		justify-content: center;
	}

	.thula-home-hero__actions .wp-block-button {
		flex: 0 0 auto;
		width: auto;
	}

	.thula-home-hero__actions .wp-block-button__link {
		width: auto;
		min-width: 11rem;
		padding-right: 1.25rem;
		padding-left: 1.25rem;
		text-align: center;
	}

	.thula-home-hero__slides::before {
		width: 27rem;
		height: 19rem;
		top: -14rem;
		left: -15rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.thula-home-hero__slides > .wp-block-image,
	.thula-home-hero__dot::before {
		transition: none;
	}

}

/* -------------------------------------------------------------------------- */
/* Block editor                                                                */
/* -------------------------------------------------------------------------- */

/**
 * Show all landscape images in the editor so that editors can replace and
 * reorder them without interacting with the front-end slider behaviour.
 */
.editor-styles-wrapper .thula-home-hero {
	min-height: 0;
	overflow: visible;
	background: #09183c;
}

.editor-styles-wrapper .thula-home-hero::before,
.editor-styles-wrapper .thula-home-hero__slides::before {
	display: none;
}

.editor-styles-wrapper .thula-home-hero__slides {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	height: auto;
	min-height: 0;
	gap: var(--wp--preset--spacing--10);
}

.editor-styles-wrapper
	.thula-home-hero__slides > .wp-block-image,
.editor-styles-wrapper
	.thula-home-hero__slides > .wp-block-image:first-child {
	position: relative;
	inset: auto;
	width: auto;
	height: auto;
	aspect-ratio: 16 / 9;
	opacity: 1;
	visibility: visible;
}

.editor-styles-wrapper
	.thula-home-hero__slides > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.editor-styles-wrapper .thula-home-hero__inner {
	display: block;
	min-height: 0;
	padding-top: var(--wp--preset--spacing--50);
	padding-right: 0;
	padding-bottom: var(--wp--preset--spacing--50);
	padding-left: 0;
}

.editor-styles-wrapper .thula-home-hero__content {
	margin: 0;
	text-align: left;
}