/* ==========================================================================
   B2Wise: stacking cards, sticky version (see stack-sticky.js)
   Used on Home ("When Planning Breaks") and Materials Planning ("What Changes").
   Layout, colours and type are set in Elementor. This file only covers the
   stacking itself. The JS adds b2w-stack-on / b2w-stack-active while the cards
   are in a column.

   Tuning, set on the b2w-stack section:
     --b2w-stack-top   where the first card sticks (140px; 24px on tablet/mobile)
     --b2w-stack-step  how much of each earlier card peeks out (24px; 20px on tablet/mobile)
     --b2w-stack-hold  how long the finished deck holds before scrolling on (35vh)
   ========================================================================== */

.b2w-stack {
	--b2w-stack-top: 140px;
	--b2w-stack-step: 24px;
	--b2w-stack-hold: 35vh;
}

@media (max-width: 1024px) {
	.b2w-stack {
		--b2w-stack-top: 24px;
		--b2w-stack-step: 20px;
	}
}

/* Each card sticks one step lower than the one before, so the deck builds as you scroll. */
.b2w-stack-cards.b2w-stack-on > .b2w-stack-card {
	position: sticky;
	top: calc(var(--b2w-stack-top) + var(--b2w-stack-i, 0) * var(--b2w-stack-step));
	transform-origin: 50% 0;
	will-change: scale;
}

/* Room after the last card, so the finished deck holds for a moment. */
.b2w-stack-cards.b2w-stack-on::after {
	content: '';
	display: block;
	flex: none;
	height: var(--b2w-stack-hold);
}

/* A soft shadow on the leading edge so each card reads as lying on top of the previous one. */
.b2w-stack-cards.b2w-stack-on > .b2w-stack-card:not(:first-child) {
	box-shadow: 0 -10px 28px -14px rgba(26, 25, 26, 0.18);
}

/* Entrance animations that move the cards (e.g. the "rise" on Materials Planning)
   keep only their fade, so they never fight the stacking. */
.b2w-stack-cards.b2w-stack-on > .b2w-stack-card {
	animation-name: b2wStackFadeIn !important;
}

@keyframes b2wStackFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* The side column (e.g. the Home heading) stays beside the deck on desktop. */
@media (min-width: 1025px) {
	.b2w-stack.b2w-stack-active > .b2w-stack-side {
		position: sticky;
		top: var(--b2w-stack-top);
		align-self: flex-start;
	}
}

/* Generic dimming for pages without their own is-dimmed styles (Home). */
.b2w-stack-active:not(.b2w-stack-focus) .b2w-stack-card .b2w-stack-fade {
	transition: opacity 0.3s ease;
}

.b2w-stack-active:not(.b2w-stack-focus) .b2w-stack-card.is-dimmed .b2w-stack-fade {
	opacity: 0.4;
}