/**
 * Styles for the Championworks Approach Stages Elementor widget.
 *
 * The left column is pinned with the plain CSS "sticky sidebar" trick:
 * it's `position:sticky` inside a CSS Grid row, and that row is only as
 * tall as it is because the right column (a stack of generously
 * min-height'd stage blocks) is much taller than the left column's own
 * content — so the grid row itself spans the full scrollable distance
 * and the browser keeps the left column in view for all of it, with no
 * JS-computed scroller height needed (unlike this theme's other
 * scroll-linked widgets, which pin a single sticky panel whose own
 * height they must explicitly inflate). scroll-list.js only tracks which
 * stage has crossed the active-threshold line and slides the counter's
 * digit to match. Colors/typography/spacing come from Elementor's
 * control CSS; this file only handles the structural layout.
 */

.cw-sl {
	width: 100%;
}

.cw-sl__top {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: start;
	padding: 0 24px;
	box-sizing: border-box;
}

.cw-sl__eyebrow,
.cw-sl__heading,
.cw-sl__description {
	margin: 0;
}

.cw-sl__description {
	margin-top: 12px;
}

.cw-sl__grid {
	display: grid;
	grid-template-columns: 45% minmax( 0, 1fr );
	align-items: start;
	padding: 0 24px;
	box-sizing: border-box;
}

.cw-sl__left {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	box-sizing: border-box;
	z-index: 1;
}

.cw-sl__counter {
	display: flex;
	font-weight: 800;
	letter-spacing: -.06em;
	line-height: .85;
}

.cw-sl__slash {
	margin-right: .05em;
}

.cw-sl__digit-wrap {
	height: .85em;
	overflow: hidden;
}

.cw-sl__digits {
	transition: transform .8s cubic-bezier( .16, 1, .3, 1 );
	will-change: transform;
}

.cw-sl__digits span {
	display: block;
	height: .85em;
}

/*
 * Each stage can have its own image (Stages tab), falling back to the
 * Photo tab's single fallback image when a stage has none. All of them
 * stack in the same box (position:absolute + inset:0 on each .cw-sl__photo,
 * sized by .cw-sl__photos) and crossfade via the .is-on class, which
 * scroll-list.js toggles onto whichever stage's image is current using
 * the exact same active-index tracking already driving the stage
 * dimming and the digit counter.
 */
.cw-sl__photos {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.cw-sl__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .6s ease;
}

.cw-sl__photo.is-on {
	opacity: 1;
}

.cw-sl__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	scale: 0.8
}

.cw-sl__list {
	display: grid;
	gap: 0;
}

.cw-sl__stage {
	border-top: 1px solid;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
	align-content: center;
	transition: opacity .5s;
	box-sizing: border-box;
}

/*
 * !important here because Elementor's own generated CSS for the Stage
 * Blocks > Vertical Padding control targets `.cw-sl__stage` with a more
 * specific (ID-based) selector, which would otherwise win over a plain
 * :first-child override and put padding back above the first stage.
 */
.cw-sl__stage:first-child {
	border-top: 0;
	padding-top: 0 !important;
}

.cw-sl__stage-k,
.cw-sl__stage-title,
.cw-sl__stage-text {
	margin: 0;
}

.cw-sl__stage-out {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	border: 1px solid;
	border-radius: 4px;
	margin-top: 8px;
	box-sizing: border-box;
}

.cw-sl__stage-out svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Before JS marks the widget ready (or if it fails to init for any
   reason), the first stage stays "on" (its class is set server-side)
   and the sticky column simply behaves like a normal top-of-column
   block — nothing is hidden either way, so there's no fallback CSS
   needed here beyond what the responsive rules below already do. */

/*
 * Below 900px the two columns stack instead of sitting side by side, but
 * the sticky counter/photo still pin — same mechanic as desktop, just a
 * different CSS trick to get "room" to stick. Desktop relies on CSS
 * Grid's row-sizing (both columns share one grid row, sized to the
 * taller one). That trick stops working once the columns stack into
 * *separate* grid rows (each row would size to only its own item, so
 * .cw-sl__left's row would be exactly its own short height — no room to
 * stick at all). Switching .cw-sl__grid to plain block flow sidesteps
 * that: in normal flow, .cw-sl__left (sticky, first in the DOM) sticks
 * within its parent for the parent's *entire* height — left's own height
 * plus .cw-sl__list's, stacked below it — which is exactly the "room" it
 * needs, no grid trick required.
 */
@media ( max-width: 900px ) {
	.cw-sl__top {
		grid-template-columns: minmax( 0, 1fr );
	}

	.cw-sl__grid {
		display: block;
	}

	.cw-sl__left {
		margin-bottom: 24px;
		background: var( --e-global-color-9fa721a );
		box-shadow: 0 0 25px 25px var( --e-global-color-9fa721a );
	}

	.cw-sl__stage-out {
		font-size: 14px;
		line-height: 20px;
	}
}