/* Sticky Scroll Cards 1.04.00
   .pwf-sscards               two-column grid section
   .pwf-sscards__col--header  sticky header column (eyebrow/headline/body/button)
   .pwf-sscards__col--cards   scrolling card stack
   .pwf-sscards__card         per-card wrapper (custom containers or posts card)
*/

.elementor-widget-pwf-sticky-scroll-cards {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Honor Elementor's Advanced > Width control when the user sets one. */
.elementor-widget-pwf-sticky-scroll-cards.elementor-widget__width-initial,
.elementor-widget-pwf-sticky-scroll-cards.elementor-widget__width-auto {
	width: var(--container-widget-width, 100%);
}

.pwf-sscards {
	width: 100%;
	display: grid;
	grid-template-columns: var(--pwf-ssc-hw, 42%) minmax(0, 1fr);
	gap: var(--pwf-ssc-gap, 64px);
	align-items: start;
}

.pwf-sscards--header-right {
	grid-template-columns: minmax(0, 1fr) var(--pwf-ssc-hw, 42%);
}

.pwf-sscards--header-right .pwf-sscards__col--header {
	order: 2;
}

.pwf-sscards--header-right .pwf-sscards__col--cards {
	order: 1;
}

.pwf-sscards__col--header {
	min-width: 0;
	position: sticky;
	top: var(--pwf-ssc-top, 96px);
	align-self: start;
}

.pwf-sscards__col--header > .e-con {
	width: 100%;
	max-width: 100%;
}

/* Sticky column height modes: give the composed container real height so
   its own Justify Content has room to distribute. */
.pwf-sscards--hh-fill .pwf-sscards__col--header > .e-con {
	min-height: calc( 100vh - var(--pwf-ssc-top, 96px) - 24px );
}

.pwf-sscards--hh-custom .pwf-sscards__col--header > .e-con {
	min-height: var(--pwf-ssc-hminh, 70vh);
}

.elementor-editor-active .pwf-sscards--editor.pwf-sscards--hh-fill > :nth-child(1 of .e-con) {
	min-height: calc( 100vh - var(--pwf-ssc-top, 96px) - 24px );
}

.elementor-editor-active .pwf-sscards--editor.pwf-sscards--hh-custom > :nth-child(1 of .e-con) {
	min-height: var(--pwf-ssc-hminh, 70vh);
}

.pwf-sscards__col--cards {
	min-width: 0;
}

.pwf-sscards__stack {
	display: flex;
	flex-direction: column;
	gap: var(--pwf-ssc-cardgap, 40px);
}

/* Edge fades: sticky overlays that hold the viewport edges while the
   column scrolls past, so cards dissolve into the fade color at the top
   and bottom of the screen. Negative margins keep them out of the flow. */
.pwf-sscards__fade {
	position: sticky;
	height: var(--pwf-ssc-fadesize, 140px);
	opacity: var(--pwf-ssc-fadeopacity, 1);
	z-index: 2;
	pointer-events: none;
}

.pwf-sscards__fade--top {
	top: 0;
	margin-bottom: calc( -1 * var(--pwf-ssc-fadesize, 140px) );
	background: linear-gradient( to bottom, var(--pwf-ssc-fadecolor, #fff), transparent );
	transition: opacity 300ms ease;
}

.pwf-sscards__fade--top.pwf-sscards__fade--off {
	opacity: 0;
}

.pwf-sscards__sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

.pwf-sscards__fade--bottom {
	bottom: 0;
	margin-top: calc( -1 * var(--pwf-ssc-fadesize, 140px) );
	background: linear-gradient( to top, var(--pwf-ssc-fadecolor, #fff), transparent );
}

/* Posts-mode card baseline. Custom cards are containers and bring their
   own styling. */
.pwf-sscards__card--post {
	position: relative;
	overflow: hidden;
	background: #eee9dc;
}

.pwf-sscards__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pwf-sscards__cardinner {
	position: relative;
	padding: 48px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: flex-end;
	min-height: inherit;
	box-sizing: border-box;
}

.pwf-sscards__ctitle {
	margin: 0;
}

.pwf-sscards__cbody {
	margin: 0;
}

.pwf-sscards__cbtn {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

/* Stacking: header above cards, sticky off. */
@media ( max-width: 1024px ) {
	.pwf-sscards--stack-tablet,
	.pwf-sscards--stack-tablet.pwf-sscards--header-right {
		grid-template-columns: minmax(0, 1fr);
	}
	.pwf-sscards--stack-tablet .pwf-sscards__col--header {
		position: static;
		order: 1;
	}
	.pwf-sscards--stack-tablet .pwf-sscards__col--cards {
		order: 2;
	}
}

@media ( max-width: 767px ) {
	.pwf-sscards--stack-mobile,
	.pwf-sscards--stack-mobile.pwf-sscards--header-right {
		grid-template-columns: minmax(0, 1fr);
	}
	.pwf-sscards--stack-mobile .pwf-sscards__col--header {
		position: static;
		order: 1;
	}
	.pwf-sscards--stack-mobile .pwf-sscards__col--cards {
		order: 2;
	}
}

/* Editor: the columns are fully decoupled so neither's height can push
   the other around. The sticky column is an absolutely positioned panel
   on its side of the wrapper; the cards flow as a normal stack in the
   remaining width. (The editor canvas doesn't preview stickiness — the
   front end owns that.) */
.elementor-editor-active .pwf-sscards--editor {
	display: block;
	padding-left: calc( var(--pwf-ssc-hw, 42%) + var(--pwf-ssc-gap, 64px) );
}

.elementor-editor-active .pwf-sscards--editor.pwf-sscards--header-right {
	padding-left: 0;
	padding-right: calc( var(--pwf-ssc-hw, 42%) + var(--pwf-ssc-gap, 64px) );
}

.elementor-editor-active .pwf-sscards--editor > .e-con {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.elementor-editor-active .pwf-sscards--editor > :nth-child(1 of .e-con) {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--pwf-ssc-hw, 42%);
}

/* The sticky column announces its role on the canvas. The badge lives on
   the widget's own wrapper — never on the container, whose pseudo
   elements belong to Elementor's editor chrome. */
.elementor-editor-active .pwf-sscards--editor {
	position: relative;
}

.elementor-editor-active .pwf-sscards--editor::before {
	content: 'STICKY COLUMN';
	position: absolute;
	top: -20px;
	left: 0;
	width: auto;
	height: auto;
	font: 700 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: 0.12em;
	color: #d5d8dc;
	background: #232629;
	padding: 5px 8px 4px;
	border-radius: 3px;
	z-index: 10;
	pointer-events: none;
}

.elementor-editor-active .pwf-sscards--editor.pwf-sscards--header-right::before {
	left: auto;
	right: 0;
}

.elementor-editor-active .pwf-sscards--editor > .e-con:not(:nth-child(1 of .e-con)):not(:nth-last-child(1 of .e-con)) {
	margin-bottom: var(--pwf-ssc-cardgap, 40px);
}

.elementor-editor-active .pwf-sscards--editor.pwf-sscards--header-right > :nth-child(1 of .e-con) {
	left: auto;
	right: 0;
}


/* Editor mobile preview: below the stack breakpoint the editor layout
   mirrors the front end — sticky panel returns to flow above the cards. */
@media ( max-width: 1024px ) {
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-tablet,
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-tablet.pwf-sscards--header-right {
		padding-left: 0;
		padding-right: 0;
	}
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-tablet > :nth-child(1 of .e-con),
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-tablet.pwf-sscards--header-right > :nth-child(1 of .e-con) {
		position: static;
		width: 100%;
		margin-bottom: var(--pwf-ssc-cardgap, 40px);
	}
}


/* Editor mobile preview: below the stack breakpoint the editor layout
   mirrors the front end — sticky panel returns to flow above the cards. */
@media ( max-width: 767px ) {
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-mobile,
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-mobile.pwf-sscards--header-right {
		padding-left: 0;
		padding-right: 0;
	}
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-mobile > :nth-child(1 of .e-con),
	.elementor-editor-active .pwf-sscards--editor.pwf-sscards--stack-mobile.pwf-sscards--header-right > :nth-child(1 of .e-con) {
		position: static;
		width: 100%;
		margin-bottom: var(--pwf-ssc-cardgap, 40px);
	}
}