/**
 * Product Banner.
 *
 * Core blocks own the normal layout, colour, border, spacing and typography.
 *
 * Shared horizontal page alignment and the Site Container are handled in
 * site-layout.css.
 *
 * Floating-header clearance is provided by the Page Header variation applied
 * to the outer Product Banner Group.
 *
 * Keep this stylesheet limited to Product Banner-specific behaviours and
 * interaction states that are clearer to maintain centrally.
 */


/* -------------------------------------------------------------------------- */
/* Product Banner - Section spacing                                           */
/* -------------------------------------------------------------------------- */

/**
 * Provide clearance beneath the floating navigation.
 */
.wp-block-group.thula-product-banner {
	padding-block-start: 14rem;
}

/**
 * Provide space beneath the banner content.
 */
.thula-product-banner > .wp-block-group.is-style-site-container {
	padding-block-end: 6rem;
}

/**
 * Adjust spacing when the banner stacks.
 */
@media (max-width: 1100px) {
	.wp-block-group.thula-product-banner {
		padding-block-start: 11rem;
	}

	.thula-product-banner > .wp-block-group.is-style-site-container {
		padding-block-end: var(--wp--preset--spacing--50);
	}
}

/**
 * Remove additional bottom spacing on small screens.
 */
@media (max-width: 480px) {
	.thula-product-banner > .wp-block-group.is-style-site-container {
		padding-block-end: var(--wp--preset--spacing--40);

	}
}


/* --------------------------------------------------------------------------
 * Product Label
 * -------------------------------------------------------------------------- */

.wp-block-group.thula-product-banner__label {
	align-self: flex-start;
	box-sizing: border-box;

	width: fit-content;
	max-width: 100%;

	/**
	 * Gradually tighten the spacing between Product Label items as the
	 * available width decreases, while preserving the Desktop spacing.
	 */
	gap: clamp(0.625rem, 1.5vw, 0.875rem);
}


/**
 * Protect the Product Label's primary identity elements from being crushed
 * when available space becomes narrower.
 *
 * The subtitle is given its own responsive behaviour below.
 */
.thula-product-banner__label > * {
	flex-shrink: 0;
}


/**
 * Allow only the Product subtitle area to become narrower when space is
 * limited.
 *
 * min-width: 0 lets the subtitle shrink below its intrinsic width and wrap
 * naturally rather than forcing the complete Product Label wider.
 */
.thula-product-banner__subtitle {
	flex: 1 1 auto;
	min-width: 0;
}


.thula-product-banner__logo {
	flex-shrink: 0;
	margin: 0;
}


.thula-product-banner__logo svg {
	display: block;

	width: 100%;
	height: auto;
}


.thula-product-banner__label .wp-block-post-title,
.thula-product-banner__subtitle,
.thula-product-banner__subtitle p,
.thula-product-banner__tagline,
.thula-product-banner__description {
	margin-block: 0;
}

.thula-product-banner__tagline {
	font-size: clamp(2rem, 1.4vw + 1.4rem, 2.25rem) !important;
}

.thula-product-banner__description {
	font-size: clamp(1.125rem, calc(0.8vw + 0.85rem), 1.3rem) !important;
	font-weight: 300;
}


/**
 * Keep Product names such as ALFA and ATLAS intact rather than allowing them
 * to wrap into narrow multi-line text.
 */
.thula-product-banner__label .wp-block-post-title {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}


/**
 * Keep the Product subtitle readable while allowing it to wrap naturally at
 * word boundaries.
 *
 * Left alignment keeps wrapped lines aligned even where the complete Product
 * presentation becomes centred on Mobile.
 */
.thula-product-banner__subtitle p {
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}


/* --------------------------------------------------------------------------
 * Core Breadcrumbs interaction states
 * -------------------------------------------------------------------------- */

.thula-product-banner__breadcrumbs {
	margin-block: 0;

	color: var(--wp--preset--color--thula-grey);
}


.thula-product-banner__breadcrumbs a {
	color: inherit;
	text-decoration: none;
}


.thula-product-banner__breadcrumbs a:hover {
	color: var(--wp--preset--color--thula-teal);
}


.thula-product-banner__breadcrumbs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--thula-teal);
	outline-offset: 2px;

	border-radius: 2px;
}


/* --------------------------------------------------------------------------
 * Product Banner layout
 * -------------------------------------------------------------------------- */

/**
 * Add separation between the Breadcrumbs and the complete Product Banner
 * composition.
 *
 * The spacing belongs on the Grid rather than the Product Label so Product
 * Content and Product Artwork move down together.
 */



/**
 * The full-width Product Banner is the final horizontal clipping boundary.
 *
 * Individual Product artwork may deliberately extend beyond the Site Container
 * towards the right-hand edge, but must not create horizontal page scrolling.
 */
.thula-product-banner {
	overflow-x: clip;
}

/**
 * Adds a little extra inset to the Product Banner copy on larger screens
 * so it aligns more closely with the homepage hero composition.
 *
 * This only affects the content inside the left column - it does not alter
 * the grid or the width of either Product Banner column.
 */
.thula-product-banner__content {
	padding-inline-start: clamp(2.5rem, 3.5vw, 3.75rem);
}

/**
 * Remove the additional inset as the layout approaches tablet widths.
 */
@media (max-width: 1100px) {
	.thula-product-banner__content {
		padding-inline-start: 0;
	}
}


/* --------------------------------------------------------------------------
 * Product Content
 * -------------------------------------------------------------------------- */

/**
 * Keep the Product Banner copy able to shrink safely inside the Core Grid.
 */
.thula-product-banner__content {
	width: clamp(92%, calc(100% + 48px - 10vw), 100%);
	min-width: 0;
}

.thula-section-lead__heading {
	font-size: clamp(1.75rem, 1vw + 1.4rem, 1.875rem) !important;
}


/* --------------------------------------------------------------------------
 * Product Artwork - base
 * -------------------------------------------------------------------------- */

/**
 * Keep the artwork Group as a normal Grid item.
 *
 * Product-specific Image blocks may use a different width when their visual
 * composition requires it. The Banner itself does not force every Product
 * artwork to use the same oversized presentation.
 */
.thula-product-banner__artwork {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;

	box-sizing: border-box;

	width: 100%;
	min-width: 0;

	overflow: visible;
}


/**
 * Default Product artwork fills its available artwork area.
 *
 * Product-specific classes may override this width where a particular image
 * needs a different visual scale.
 */
.thula-product-banner__artwork > .wp-block-image {
	flex: 0 0 auto;

	width: 100%;
	max-width: none;

	margin: 0 !important;

	overflow: visible;
}


/**
 * The actual image always fills its Image block.
 *
 * This keeps the Image block responsible for the artwork's overall size.
 */
.thula-product-banner__artwork > .wp-block-image img {
	display: block;

	width: 100%;
	max-width: none;
	height: auto;

	margin: 0;

	object-fit: contain;
	object-position: left top;

	border-radius: 0;
}


/* --------------------------------------------------------------------------
 * Wide Desktop - Two-column layout
 * -------------------------------------------------------------------------- */

@media (min-width: 1101px) {
	/**
	 * Use an even split between Product Content and Product Artwork.
	 */
	.wp-block-group.thula-product-banner__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		overflow: visible;
	}


	/**
	 * Add breathing room between the Product copy and artwork.
	 */
	.thula-product-banner__content {
		padding-inline-end: clamp(0.75rem, 1.5vw, 1.5rem);
	}


	/**
	 * Keep Product artwork anchored to the top-left of the second Grid column.
	 *
	 * Product-specific artwork may be wider than this column and continue
	 * towards the right-hand edge of the Product Banner.
	 */
	.thula-product-banner__artwork {
		justify-content: flex-start;
		align-items: flex-start;
	}
}


/* -------------------------------------------------------------------------- 
 * Stacked layout 
 * -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/**
	 * Explicitly switch to one column before the Product visual becomes
	 * squeezed by the two-column composition.
	 */
	.wp-block-group.thula-product-banner__layout {
		grid-template-columns: minmax(0, 1fr);

		row-gap: 7rem;

		overflow: visible;
	}


/**
 * Keep the Product copy narrower when the Banner first stacks,
 * then gradually allow it to widen as the viewport becomes smaller.
 */
	.thula-product-banner__content {
		--thula-content-progress:
			clamp(
				0,
				calc((1100px - 100vw) / 620px),
				1
			);

		width:
			calc(
				72% + (28% * var(--thula-content-progress))
			);

		justify-self: start;
	}


	/**
	 * Keep stacked artwork anchored to the left and top.
	 *
	 * Do not clip here. Oversized Product-specific artwork may continue beyond
	 * the Site Container towards the right-hand edge of the outer Banner.
	 */
	.thula-product-banner__artwork {
		justify-content: flex-start;
		align-items: flex-start;

		overflow: visible;
	}
}


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

@media (max-width: 480px) {
	/**
	 * Centre the Product copy while leaving the Breadcrumbs unchanged.
	 */
	.thula-product-banner__content {
		width: 100%;
		text-align: center;
	}


	/**
	 * Centre the complete Product Label and slightly reduce its outer padding.
	 */
	.wp-block-group.thula-product-banner__label {
		align-self: center;

		margin-inline: auto;

		padding-inline-start: 0.5rem !important;
		padding-inline-end: 0.75rem !important;
	}


	/**
	 * Let the Buttons Group occupy the available Product Content width and
	 * centre its Buttons within that width.
	 */
	.thula-product-banner .wp-block-buttons {
		width: 100%;

		justify-content: center;
	}


	/**
	 * Keep Product artwork anchored to the same left/top starting point on
	 * Mobile. Product-specific sizing continues to be respected.
	 */
	.thula-product-banner__artwork {
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		overflow: visible;
	}
}

/* -------------------------------------------------------------------------- */
/* Product Banner - Background position                                      */
/* -------------------------------------------------------------------------- */

/**
 * Smoothly shift the Product Banner background focal point as
 * the viewport narrows.
 *
 * 1440px and wider: 50% 50%
 * 480px and narrower: 76% 70%
 */
.wp-block-group.thula-product-banner {
	--thula-banner-focal-shift:
		clamp(
			0,
			calc((90rem - 100vw) / 60rem),
			1
		);

	background-position:
		calc(50% + (26% * var(--thula-banner-focal-shift)))
		calc(50% + (20% * var(--thula-banner-focal-shift))) !important;
}


/* -------------------------------------------------------------------------- */
/* Product-specific artwork adjustments                                      */
/* -------------------------------------------------------------------------- */

/**
 * Alfa Product Banner artwork.
 *
 * On large screens the artwork is deliberately oversized and pulled slightly
 * left/up to balance the two-column Product Banner composition.
 */
.thula-product-banner__artwork
	> .wp-block-image.thula-product-banner__artwork--alfa {
	width: 130%;

	margin-inline-start:
		clamp(-2rem, calc(2rem - 8vw), 0rem) !important;

	margin-block-start:
		clamp(-1rem, calc(2rem - 9vw), 1rem) !important;
}


/**
 * Stacked layout.
 *
 * Once the Banner becomes one column, remove the desktop horizontal offset.
 * Keep the artwork slightly narrower than the full Content Container and
 * progressively pull it upwards as more space becomes available.
 */
@media (max-width: 1100px) and (min-width: 481px) {
	.thula-product-banner__artwork
		> .wp-block-image.thula-product-banner__artwork--alfa {
		width: 96%;

		margin-inline-start: 0 !important;

		margin-block-start:
			clamp(-2.5rem, calc(1rem - 0.35vw), -0.5rem) !important;
	}
}


/**
 * Mobile Alfa artwork.
 *
 * Enlarge the artwork and offset it slightly to the right so that
 * the visual can intentionally extend beyond the Banner edge.
 */
@media (max-width: 480px) {
	.thula-product-banner__artwork
		> .wp-block-image.thula-product-banner__artwork--alfa {
		width: 160%;
		max-width: none;

		margin-inline-start: 4% !important;
		margin-block-start: -1rem !important;
	}
}