/*** Archive: ROI Calculators ***/

.roi-calculators-list {
	overflow-x: clip;
	padding-bottom: var(--module-spacing-xlarge);
	position: relative;
}

/* Straddles the hero/section boundary via top: 0 + translateY(-50%). */
.roi-calculators-list .roi-badge {
	height: 140px;
	left: var(--container-outer-margin);
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	width: 140px;
	z-index: 1;
}

.roi-calculators {
	grid-column: 1 / -1;
	margin-top: var(--module-spacing-large);
}

.roi-calculators .accordion:has(> button) {
	padding-block: var(--text-spacing-large);
}

/* ::before paints the gradient field so it can fade in (gradients can't transition); isolate scopes the z-index:-1 layer. */
.roi-calculators .accordion {
	isolation: isolate;
	position: relative;
	transition:
		color 0.4s ease 0.12s,
		margin 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.roi-calculators .accordion::before {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.roi-calculators .accordion.active::before {
	opacity: 1;
}

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

	.roi-calculators .accordion.active::before {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.roi-calculators .accordion.active {
	color: var(--white);
	margin-inline: calc(-1 * var(--text-spacing-large));
	/* Top padding matches closed-row padding-block so opening doesn't shift the question (no CLS). */
	padding: var(--text-spacing-large) var(--text-spacing-large) 100px;
}

.roi-calculators .accordion.active,
.roi-calculators .accordion.active + .accordion {
	border-top: 0;
}

.roi-calculators .accordion.active + .accordion {
	margin-top: var(--text-spacing-large);
}

.roi-calculators .roi-calculators-question,
.roi-calculators .roi-calculators-question .highlight {
	transition: color 0.4s ease;
}

.roi-calculators .accordion.active .roi-calculators-question {
	color: var(--lavender);
}

.roi-calculators .accordion.active .roi-calculators-question .highlight {
	color: var(--white);
}

.roi-calculators .accordion.active .accordion-toggle {
	background: var(--carousel-purple);
	color: var(--white);
}

.roi-calculators .accordion:not(.active) button:hover .accordion-toggle {
	background: var(--black-hover);
}

.roi-calculators .accordion-panel {
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Panel content padding scoped to .active — padding isn't clipped by overflow:hidden, so an unscoped value would keep the closed panel ~80px tall instead of collapsing via `grid-template-rows: 0fr`. */
.roi-calculators .accordion-panel > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.5s ease 0.1s,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.roi-calculators .accordion.active .accordion-panel > * {
	opacity: 1;
	padding: var(--module-spacing-small) 0 0;
	transform: translateY(0);
}

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

	.roi-calculators .accordion,
	.roi-calculators .accordion::before,
	.roi-calculators .accordion-panel,
	.roi-calculators .accordion-panel > *,
	.roi-calculators .roi-calculators-question,
	.roi-calculators .roi-calculators-question .highlight {
		transition: none;
	}

	.roi-calculators .accordion-panel > * {
		opacity: 1;
		transform: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* --container-outer-margin collapses to 0 here, so anchor the badge to the
	   container's padding instead of the viewport edge. */
	.roi-calculators-list .roi-badge {
		left: var(--container-outer-padding);
	}

	.roi-calculators .accordion.active {
		padding-bottom: var(--module-spacing-medium);
	}

	.roi-calculators .roi-calc-inputs,
	.roi-calculators .roi-calc-disclaimer {
		padding-left: 0;
	}

}

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

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

	.roi-calculators .accordion.active {
		padding: var(--text-spacing-large) var(--text-spacing-large) var(--text-spacing-xlarge);
	}

	.roi-calculators .accordion.active .accordion-panel > * {
		padding-top: var(--text-spacing-xlarge);
	}

	.roi-calculators .roi-calc-inputs {
		margin-top: 0;
	}

}

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

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

	.roi-calculators-list {
		padding-bottom: var(--module-spacing-medium);
	}

	.roi-calculators .accordion:has(> button) {
		padding-block: var(--text-spacing-medium);
	}

	.roi-calculators-list .roi-badge {
		height: 96px;
		width: 96px;
	}

}