/*** Module: Hero — Style: product_hero ***/

.module.hero.style-product-hero {
	background: var(--off-white);
	color: var(--black);
	/* Symmetric block padding so tall copy gains breathing room below and the section grows with it, rather than crowding the last line against the edge. */
	/*padding-block: calc(var(--header-clearance) + var(--text-spacing-small)) var(--module-spacing-small);*/
	padding-block: calc(var(--header-clearance) + var(--text-spacing-small)) 0;
}

.module.hero.style-product-hero.bg-parchment,
.module.hero.style-product-hero.bg-parchment-inset {
	background: var(--parchment);
}

.module.hero.style-product-hero.bg-white {
	background: var(--white);
}

/* Over-sized gradient layers give the euphoria-drift animation room to pan. */
.module.hero.style-product-hero.bg-digital-blue {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	color: var(--white);
}

.module.hero.style-product-hero.bg-orange .bg-field {
	background: var(--orange-gradient);
}

@media (prefers-reduced-motion: no-preference) {

	.module.hero.style-product-hero.bg-digital-blue {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.module.hero.style-product-hero .container {
	align-items: center;
}

.module.hero.style-product-hero .content {
	grid-column: 1 / span 6;
}

.module.hero.style-product-hero .content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.hero.style-product-hero .content .xlarge-text + .buttons {
	margin-top: var(--text-spacing-medium);
}

.module.hero.style-product-hero .buttons {
	display: flex;
	gap: var(--text-spacing-medium);
}

/* aspect-ratio: auto lets the uploaded image dictate its shape so varying UI mockups don't crop. */
.module.hero.style-product-hero .media {
	align-self: center;
	aspect-ratio: auto;
	grid-column: 8 / -1;
	grid-row: 1 / -1;
	isolation: isolate;
	margin-left: calc(-1 * var(--text-spacing-large));
	margin-right: calc(var(--viewport-edge) + var(--text-spacing-small));
}

/* No image: give the empty panel a shape so it still renders. */
.module.hero.style-product-hero .media:not(:has(img)) {
	aspect-ratio: 4 / 3;
}

.module.hero.style-product-hero .media img {
	display: block;
	height: auto;
	max-width: 100%;
	position: relative;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* Stacked, the copy leads directly under the header — restore the module gap up top. */
	.module.hero.style-product-hero.bg-page-default {
		padding-top: calc(var(--header-clearance) + var(--module-spacing-small));
	}

	.module.hero.style-product-hero .container {
		display: block;
	}

	.module.hero.style-product-hero .media {
		margin: var(--module-spacing-small) 0 0;
	}

	.module.hero.style-product-hero .buttons {
		align-items: flex-start;
		flex-direction: column;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.hero.style-product-hero .media {
		margin-top: var(--text-spacing-xlarge);
	}

}