/**
 * Slider Cards 1.10.15
 */

/* Full-bleed breakout: the stage leaves the content column and spans
   the screen. CSS lands the close approximation for centered layouts;
   the runtime then measures the true viewport (scrollbar excluded)
   and corrects width and offset exactly, so the page can never grow
   a horizontal scrollbar. The html guard below is the hard promise.

   Landing points: the runtime measures the content column of the
   nearest Boxed container above the widget, left and right edges
   separately, and publishes them as --pwf-inset-l / --pwf-inset-r.
   At rest the first card, the arrows, and the track all sit on that
   box like any sibling; cards only cross it mid-scroll. */
.pwf-slcards {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	--pwf-card-w: calc(
		(
			var(--pwf-stage, 100vw) - var(--pwf-inset-l, 6vw) -
			(var(--pwf-civ, 3) - 1) * var(--pwf-gap, 24px)
		) / var(--pwf-civ, 3)
	);
}

html:has(.pwf-slcards) {
	overflow-anchor: none;
	overflow-x: clip;
}

.pwf-slcards__stage {
	/* The clip is the no-scrollbar promise, and it only needs to hold
	   sideways. Rather than trust any engine's per-axis behavior, the
	   stage reserves breathing room inside its own clip above and
	   below the cards and cancels it back out of the layout, so the
	   clip line sits far from the cards: lift, grow, bounce overshoot,
	   and shadows clear it in every browser. The per-axis clip stays
	   on as the belt where supported. The headroom is invisible but
	   real, so the stage never carries the pointer; the rail is the
	   touch surface. */
	overflow: hidden;
	overflow: clip visible;
	padding-top: var(--pwf-headroom, 96px);
	padding-bottom: var(--pwf-headroom, 96px);
	margin-top: calc(-1 * var(--pwf-headroom, 96px));
	margin-bottom: calc(-1 * var(--pwf-headroom, 96px));
	pointer-events: none;
}

/* Edge Fade: the stage's sides dissolve to nothing so cards sink into
   whatever is behind them instead of being cut by the screen edge.
   The fade spans the gutter between the box and the screen by
   default (--pwf-inset-l / -r); a Custom reach writes --pwf-fade-l /
   -r instead. The runtime scales each side by --pwf-fade-on-l / -r,
   0 to 1, so the fade exists only where cards overflow: off on the
   left at rest, off on the right at the end. Two eased ramps. */
.pwf-slcards-fade-yes .pwf-slcards {
	--pwf-fl: calc(var(--pwf-fade-l, var(--pwf-inset-l, 6vw)) * var(--pwf-fade-on-l, 0));
	--pwf-fr: calc(var(--pwf-fade-r, var(--pwf-inset-r, 6vw)) * var(--pwf-fade-on-r, 1));
}

.pwf-slcards-fade-yes .pwf-slcards__stage {
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0.35) calc(var(--pwf-fl) * 0.4),
		rgba(0, 0, 0, 0.8) calc(var(--pwf-fl) * 0.75),
		#000 var(--pwf-fl),
		#000 calc(100% - var(--pwf-fr)),
		rgba(0, 0, 0, 0.8) calc(100% - var(--pwf-fr) * 0.75),
		rgba(0, 0, 0, 0.35) calc(100% - var(--pwf-fr) * 0.4),
		rgba(0, 0, 0, 0) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0.35) calc(var(--pwf-fl) * 0.4),
		rgba(0, 0, 0, 0.8) calc(var(--pwf-fl) * 0.75),
		#000 var(--pwf-fl),
		#000 calc(100% - var(--pwf-fr)),
		rgba(0, 0, 0, 0.8) calc(100% - var(--pwf-fr) * 0.75),
		rgba(0, 0, 0, 0.35) calc(100% - var(--pwf-fr) * 0.4),
		rgba(0, 0, 0, 0) 100%
	);
}

.pwf-slcards--dragging .pwf-slcards__rail {
	cursor: grabbing;
}

.pwf-slcards__rail {
	pointer-events: auto;
	touch-action: pan-y;
	cursor: grab;
	display: flex;
	align-items: stretch;
	gap: var(--pwf-gap, 24px);
	padding-left: var(--pwf-inset-l, 6vw);
	padding-right: var(--pwf-inset-r, 6vw);
	width: max-content;
	will-change: transform;
}

.pwf-slcards__card--link {
	cursor: pointer;
}

.pwf-slcards__card--link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pwf-slcards__card {
	position: relative;
	flex: 0 0 var(--pwf-card-fixed, var(--pwf-card-w));
	min-width: 0;
	display: flex;
	flex-direction: column;
	transition:
		transform var(--pwf-hdur, 240ms) var(--pwf-hcurve, cubic-bezier(0.22, 0.61, 0.21, 1)),
		box-shadow var(--pwf-hdur, 240ms) var(--pwf-hcurve, cubic-bezier(0.22, 0.61, 0.21, 1)),
		opacity var(--pwf-hdur, 240ms) var(--pwf-hcurve, cubic-bezier(0.22, 0.61, 0.21, 1));
}

/* Match Tallest (the default): the rail stretches every card to the
   tallest in the set, and whatever fills the card — a canvas
   container or a post template — grows to fill it, whatever class
   Elementor gives its root. Asserted with priority because
   Elementor's own container stylesheet loads after this one and
   hands the inner container its own grow value on a tie, which
   quietly hugs the visible surface inside a full-height wrapper.
   Hug Content releases both, so each card ends where its own
   content does. */
.pwf-slcards__card > * {
	flex-grow: 1 !important;
	min-height: 0;
}

.pwf-slcards[data-cardheight='hug'] .pwf-slcards__rail {
	align-items: flex-start;
}

.pwf-slcards[data-cardheight='hug'] .pwf-slcards__card > * {
	flex-grow: 0 !important;
}

/* The whole card answers the cursor as one object. Pointer-only so a
   tap never sticks a card in its hover pose, and the entire layer
   suspends while a drag is live so cards don't twitch under a thumb
   mid-swipe. */
@media (hover: hover) and (pointer: fine) {
	/* Scaling a content-heavy card is exactly where browsers drop
	   frames unless warned; hover-capable screens pre-promote the
	   cards so the motion starts smooth, not after a stutter. */
	.pwf-slcards__card {
		will-change: transform;
	}

	.pwf-slcards:not(.pwf-slcards--dragging) .pwf-slcards__card:hover {
		transform: translateY(calc(-1 * var(--pwf-hlift, 6px))) scale(var(--pwf-hgrow, 1.01));
		z-index: 2;
	}

	/* Lean: the card tilts toward the cursor like it's being pressed.
	   The runtime feeds the two angles and the same soft transition
	   carries them, so the tilt trails the pointer instead of
	   snapping to it. */
	.pwf-slcards[data-hlean='cursor']:not(.pwf-slcards--dragging) .pwf-slcards__card:hover {
		transform: perspective(900px) rotateX(var(--pwf-lx, 0deg)) rotateY(var(--pwf-ly, 0deg)) translateY(calc(-1 * var(--pwf-hlift, 6px))) scale(var(--pwf-hgrow, 1.01));
	}

	/* Spotlight: while one card takes the cursor, the rest make room.
	   Dim lays a veil over them in the designer's color, so its
	   transparency is the strength; Step Back eases them away by the
	   chosen distance; Both does both. The veil rides the card's own
	   corners. */
	.pwf-slcards__card::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
		background: var(--pwf-hdim, rgba(255, 255, 255, 0.55));
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--pwf-hdur, 240ms) var(--pwf-hcurve, cubic-bezier(0.22, 0.61, 0.21, 1));
	}

	.pwf-slcards[data-hspot='dim']:not(.pwf-slcards--dragging) .pwf-slcards__rail:has(> .pwf-slcards__card:hover) .pwf-slcards__card:not(:hover)::after,
	.pwf-slcards[data-hspot='both']:not(.pwf-slcards--dragging) .pwf-slcards__rail:has(> .pwf-slcards__card:hover) .pwf-slcards__card:not(:hover)::after {
		opacity: 1;
	}

	.pwf-slcards[data-hspot='back']:not(.pwf-slcards--dragging) .pwf-slcards__rail:has(> .pwf-slcards__card:hover) .pwf-slcards__card:not(:hover),
	.pwf-slcards[data-hspot='both']:not(.pwf-slcards--dragging) .pwf-slcards__rail:has(> .pwf-slcards__card:hover) .pwf-slcards__card:not(:hover) {
		transform: scale(var(--pwf-hback, 0.965));
	}
}

/* ---------------------------------------------------------- footer */

.pwf-slcards__footer {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-left: var(--pwf-inset-l, 6vw);
	padding-right: var(--pwf-inset-r, 6vw);
	margin-top: 32px;
}

.pwf-slcards__btns {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pwf-slcards__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #111111;
	color: #ffffff;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.pwf-slcards__btn:hover:not([disabled]) {
	background: #000000;
}

.pwf-slcards__btn[disabled] {
	background: #dddddd;
	color: #ffffff;
	cursor: default;
}

.pwf-slcards__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.pwf-slcards__btn i {
	font-size: 18px;
	line-height: 1;
}

.pwf-slcards__trackline {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	border-radius: 999px;
	background: #e5e5e5;
}

.pwf-slcards__marker {
	position: absolute;
	top: 50%;
	left: 0;
	width: 30%;
	height: 4px;
	translate: 0 -50%;
	border-radius: 999px;
	background: #111111;
}

/* ---------------------------------------------------------- editor */

/* Cards inject as bare containers in the editor; they take the same
   sizing so the canvas matches the render, dragging stays off, and
   the arrows stay live for reaching later cards. */
.pwf-slcards--editor .pwf-slcards__rail {
	cursor: default;
}

.pwf-slcards--editor .pwf-slcards__rail > .elementor-element {
	flex: 0 0 var(--pwf-card-fixed, var(--pwf-card-w));
	min-width: 0;
}

.pwf-slcards__posts-note {
	margin: 0;
	padding: 40px var(--pwf-inset-l, 6vw);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.75;
}