/*** Module: Hero — Style: value_props ***/

.module.hero.style-value-props {
	background: var(--off-white);
	isolation: isolate;
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
	position: relative;
}

/* isolate scopes z-index:-1 behind the content. */
.module.hero.style-value-props::before {
	background:
		radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--orange) 18%, transparent) 0%, transparent 60%),
		radial-gradient(70% 80% at 78% 28%, color-mix(in srgb, var(--orange) 9%, transparent) 0%, transparent 72%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	top: calc(-1 * var(--header-height));
	transform-origin: 100% 0%;
	z-index: -1;
}

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

	.module.hero.style-value-props::before {
		animation: hero-glow-breathe 12s ease-in-out infinite;
	}

}

.module.hero.style-value-props .container {
	align-content: center;
	gap: var(--text-spacing-xsmall);
}

.module.hero.style-value-props .container > * {
	grid-column: 1 / span 9;
}

.module.hero.style-value-props .xlarge-text {
	grid-column: 1 / span 8;
}

.module.hero.style-value-props .list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	grid-column: 1 / -1;
	list-style: none;
	margin: var(--text-spacing-xsmall) 0 0;
	padding: 0;
}

/* 12px gap and 120px measure are component sizing — no spacing token lands on either. */
.module.hero.style-value-props .item {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 100%;
	width: 120px;
}

.module.hero.style-value-props .item .icon img {
	display: block;
	height: 32px;
	width: auto;
}

.module.hero.style-value-props .btn {
	justify-self: start;
	margin-top: var(--text-spacing-small);
}

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

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

	.module.hero.style-value-props {
		padding-block: var(--module-spacing-medium);
	}

	.module.hero.style-value-props .container > *,
	.module.hero.style-value-props .xlarge-text {
		grid-column: 1 / -1;
	}

}

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

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

	/* Balanced 3×2 — equal columns instead of content-width flex wrapping. */
	.module.hero.style-value-props .list {
		display: grid;
		gap: var(--text-spacing-small) var(--text-spacing-xsmall);
		grid-template-columns: repeat(3, 1fr);
	}

	/* Items fill their equal grid column instead of the 120px measure. */
	.module.hero.style-value-props .item {
		width: auto;
	}

}