/**
 * Scroll Stack Cards — layout. The pile is CSS `position: sticky`; the script only
 * adds motion. Never set `overflow: hidden` on an ancestor of a card — it kills sticky.
 */
.dmoe-scroll-stack-wrap {
	position: relative;
}
.dmoe-scroll-stack-inner {
	display: block;
}

/* Equal rows, so cards are not released one at a time, and in CSS so the builder
   matches the front end. `1fr` rows all take the tallest row's size. */
.dmoe-scroll-stack--vertical .dmoe-scroll-stack-inner {
	display: grid;
	grid-auto-rows: 1fr;
}

/* Grid does not collapse Divi's module margin. `.et_pb_module` outranks their rule. */
.dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item.et_pb_module {
	margin-bottom: 0;
}

/* `top` comes from the module's styles — where cards rest is a setting. */
.dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item {
	position: sticky;
	width: 100%;
	transform-origin: center top;
	will-change: transform;
	backface-visibility: hidden;
}

/* Collapse clips its content as the height shrinks. Sliding across narrows the card
   instead, and there the content is meant to stay whole. */
.dmoe-scroll-stack--vertical.dmoe-scroll-stack--collapse .dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item {
	overflow: hidden;
}
.dmoe-scroll-stack--depth .dmoe-scroll-stack-inner {
	perspective: 1200px;
}

/* Place in the pile, so the peek stagger needs no script. The runtime sets the same
   property for lists longer than this. */
.dmoe-scroll-stack-inner > *:nth-child(1) { --dmoe-card-index: 0; }
.dmoe-scroll-stack-inner > *:nth-child(2) { --dmoe-card-index: 1; }
.dmoe-scroll-stack-inner > *:nth-child(3) { --dmoe-card-index: 2; }
.dmoe-scroll-stack-inner > *:nth-child(4) { --dmoe-card-index: 3; }
.dmoe-scroll-stack-inner > *:nth-child(5) { --dmoe-card-index: 4; }
.dmoe-scroll-stack-inner > *:nth-child(6) { --dmoe-card-index: 5; }
.dmoe-scroll-stack-inner > *:nth-child(7) { --dmoe-card-index: 6; }
.dmoe-scroll-stack-inner > *:nth-child(8) { --dmoe-card-index: 7; }
.dmoe-scroll-stack-inner > *:nth-child(9) { --dmoe-card-index: 8; }
.dmoe-scroll-stack-inner > *:nth-child(10) { --dmoe-card-index: 9; }
.dmoe-scroll-stack-inner > *:nth-child(11) { --dmoe-card-index: 10; }
.dmoe-scroll-stack-inner > *:nth-child(12) { --dmoe-card-index: 11; }
.dmoe-scroll-stack-inner > *:nth-child(13) { --dmoe-card-index: 12; }
.dmoe-scroll-stack-inner > *:nth-child(14) { --dmoe-card-index: 13; }
.dmoe-scroll-stack-inner > *:nth-child(15) { --dmoe-card-index: 14; }
.dmoe-scroll-stack-inner > *:nth-child(16) { --dmoe-card-index: 15; }
.dmoe-scroll-stack-inner > *:nth-child(17) { --dmoe-card-index: 16; }
.dmoe-scroll-stack-inner > *:nth-child(18) { --dmoe-card-index: 17; }
.dmoe-scroll-stack-inner > *:nth-child(19) { --dmoe-card-index: 18; }
.dmoe-scroll-stack-inner > *:nth-child(20) { --dmoe-card-index: 19; }

.dmoe-scroll-stack-card {
	display: flex;
	gap: 24px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.dmoe-scroll-stack-card-media {
	flex: 0 1 auto;
	margin: 0;
	overflow: hidden;
}

/* Height is a setting; auto keeps the image's own proportions. */
.dmoe-scroll-stack-card-image {
	display: block;
	width: 100%;
	height: auto;
}

/* min-width lets the text shrink instead of forcing the card wider. */
.dmoe-scroll-stack-card-content {
	flex: 1 1 auto;
	min-width: 0;
}
.dmoe-scroll-stack-card-icon {
	display: inline-block;
	line-height: 1;
}
.dmoe-scroll-stack-card .et_pb_button_wrapper {
	margin-top: 16px;
}
/* Nothing on the page makes the button a block box, and an inline one ignores
   width and height and lets the hover icon escape its background. */
.dmoe-scroll-stack-card .et_pb_button {
	display: inline-block;
}

/* Without the script this stays a scrollable row rather than overflowing. */
.dmoe-scroll-stack--horizontal .dmoe-scroll-stack-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
}

/* A narrowed card keeps its content at full width, so the next card covers it rather
   than the text reflowing. */
.dmoe-scroll-stack--horizontal .dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item {
	position: relative;
	top: auto;
	flex: 0 0 auto;
	overflow: visible;
}

/* Below the Enable Stacking On breakpoint the runtime never builds, so neither
   direction should behave as though it had: sliding across would leave a sideways
   scrollbar, and stacking down would pile the cards with nothing to animate them.
   Both fall back to a plain list. Breakpoints match mediaQuery() in script.min.js. */
@media (max-width: 980px) {
	/* The class is doubled for +1 specificity — the generated width:calc(100%/N)
	   rule lands in Divi's own dynamic <style> block, which always prints after
	   this enqueued stylesheet, so at equal specificity it would otherwise win
	   this tie regardless of which media query actually matches. */
	.dmoe-scroll-stack-wrap.dmoe-scroll-stack-wrap[data-enable_on="desktop"] .dmoe-scroll-stack-inner {
		display: grid;
		grid-auto-rows: auto;
		overflow-x: visible;
	}
	.dmoe-scroll-stack-wrap.dmoe-scroll-stack-wrap[data-enable_on="desktop"] .dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item {
		position: relative;
		top: auto;
		width: 100%;
	}
}
@media (max-width: 767px) {
	.dmoe-scroll-stack-wrap.dmoe-scroll-stack-wrap[data-enable_on="desktopTablet"] .dmoe-scroll-stack-inner {
		display: grid;
		grid-auto-rows: auto;
		overflow-x: visible;
	}
	.dmoe-scroll-stack-wrap.dmoe-scroll-stack-wrap[data-enable_on="desktopTablet"] .dmoe-scroll-stack-inner > .dmoe_scroll_stack_cards_item {
		position: relative;
		top: auto;
		width: 100%;
	}
}