/**
* Shared scroll-stacking treatment for SCF repeater card sections.
*/

:root {
	--stack-heading-sticky-top: 140px;
	--stack-final-hold: 80px;
}

.card-stack {
	--stack-base-offset: 112px;
	--stack-gap: 48px !important;
	--stack-heading-gap: 6px;
	--stack-heading-top: var(--stack-heading-sticky-top);
	--stack-offset-step: 4px;
	display: grid;
	gap: var(--stack-gap);
	isolation: isolate;
	width: 100%;
}

.card-stack__item {
	min-width: 0;
	position: relative;
}

.card-stack.is-stack-ready .card-stack__item {
	position: sticky;
	top: var(--stack-card-offset, 0px);
}

.card-stack__inner {
	transform-origin: center top;
}

.card-stack.is-stack-ready .card-stack__inner {
	will-change: filter, transform;
}

.card-stack.is-single .card-stack__item,
.card-stack.is-reduced-motion .card-stack__item {
	padding-top: 0 !important;
	position: relative;
	top: auto !important;
	z-index: auto !important;
}

.card-stack.is-single .card-stack__inner,
.card-stack.is-reduced-motion .card-stack__inner {
	filter: none !important;
	transform: none !important;
	will-change: auto;
}

.card-stack__spacer {
	display: block;
	height: 0;
	margin-top: calc(var(--stack-gap) * -1);
	pointer-events: none;
	visibility: hidden;
}

main [data-stack-heading] {
	background: transparent;
	margin-top: 0;
	/* 	position: sticky; */
	position: static;
	top: var(--stack-heading-sticky-top);
	z-index: 20;
}

[data-stack-heading].is-stack-heading-flow,
[data-stack-heading].is-stack-heading-released {
	/* 	position: relative;
	top: auto;
	z-index: auto; */
	z-index: -1;
}

.comparison__sticky,
.how-comparison__top {
	height: auto;
}

.comparison__sticky .comparison__heading,
.how-comparison__top .how-comparison__heading {
	gap: 12px;
	height: auto;
	padding-block: 10px;
}

.comparison > .container,
.how-comparison__inner {
	gap: 48px;
}

.hospitality-audiences__heading {
	padding-block: 10px;
	text-align: center;
}

.hospitality-audiences__heading h2 {
	margin-inline: auto;
}

.hospitality-audiences__stack {
	--stack-gap: 0px;
	margin-top: 48px;
}

.how-comparison,
.how-comparison__inner,
.hospitality-audiences {
	height: auto;
	min-height: 0;
}

.how-comparison__inner {
	top: 0;
}

.card-stack__item > .audience-row {
	position: relative;
	top: auto;
	z-index: auto;
}

@media only screen and (max-width: 1024px) {
	:root {
		--stack-heading-sticky-top: 112px;
		--stack-final-hold: 56px;
	}

	.card-stack {
		--stack-base-offset: 92px;
		--stack-gap: 36px !important;
		--stack-offset-step: 3px;
	}

	.how-comparison,
	.how-comparison__inner,
	.hospitality-audiences {
		height: auto;
		min-height: 0;
	}

	.hospitality-audiences__stack {
		--stack-gap: 0px;
		margin-top: 24px;
	}

	.method-card__image img {
		object-position: center calc(100% - 10%);
	}
}

@media only screen and (max-width: 767px) {
	main [data-stack-heading] {
		top: 70px;
	}
	:root {
		--stack-heading-sticky-top: 96px;
		--stack-final-hold: 40px;
	}

	.card-stack {
		--stack-base-offset: 82px;
		--stack-gap: 25px !important;
		--stack-heading-gap: 5px;
		--stack-heading-top: 82px;
		--stack-offset-step: 3px;
	}

	.comparison__sticky .comparison__heading,
	.how-comparison__top .how-comparison__heading {
		gap: 8px;
		padding-block: 8px;
	}

	.comparison > .container,
	.how-comparison__inner {
		gap: 20px;
	}

	.hospitality-audiences__stack {
		--stack-gap: 0px;
		margin-top: 20px;
	}

	.method-card__image {
		max-height: 345px !important;
	}
	.method-card__image {
		aspect-ratio: 610 / 340;
	}
}

@media only screen and (max-width: 479px) {
	:root {
		--stack-heading-sticky-top: 65px;
	}

	.card-stack {
		--stack-base-offset: 76px;
		--stack-gap: 20px !important;
		--stack-heading-top: 76px;
		--stack-offset-step: 3px;
	}

	.hospitality-audiences__stack {
		--stack-gap: 0px;
	}


	.method-card__image {
		aspect-ratio: 670 / 378;
	}
	.method-list ul {
		gap: 5px;
	}
	.method-card__image img {
		object-position: 50% 60%;
	}
	.method-card--old .method-card__panel, .method-card--new .method-card__panel {
		padding: 28px 14px;
	}
	.method-card__panel {
		gap: 14px;
	}
	.method-list ul li{
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-stack__item {
		padding-top: 0 !important;
		position: relative !important;
		top: auto !important;
		z-index: auto !important;
	}

	.card-stack__inner {
		filter: none !important;
		transform: none !important;
		will-change: auto !important;
	}
}