/**
 * Scroll Cube — fluid size on resize (JS sets --scw-size from column width).
 * Max size from Elementor: --scw-size-max (default 200px).
 */

.scroll-cube-widget {
	--scw-half: calc(var(--scw-size, 200px) / 2);
	--scw-size-min: 140px;
	--scw-size-max: 200px;
	box-sizing: content-box;
	width: 100%;
	max-width: var(--scw-size-max, 200px);
	margin: var(--scw-margin-top, 100px) 0 0 auto;
	padding: var(--scw-pad-top, 50px) var(--scw-pad-sides, 32px) var(--scw-pad-sides, 32px);
	position: relative;
	height: auto;
	min-height: 0;
	flex-shrink: 0;
}

.scroll-cube-widget__scene {
	position: sticky;
	top: auto;
	bottom: var(--scw-sticky-bottom, 80px);
	z-index: 5;
	width: var(--scw-size, 200px);
	height: var(--scw-size, 200px);
	max-width: 100%;
	margin-inline-start: 0;
	margin-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1400px;
	perspective-origin: 50% 50%;
}

.scroll-cube-widget__cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
	transform: rotateX(-25deg) rotateY(-8deg);
}

.scroll-cube-widget__face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	backface-visibility: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.scroll-cube-widget__face--front {
	transform: translateZ(var(--scw-half));
}

.scroll-cube-widget__face--back {
	transform: rotateY(180deg) translateZ(var(--scw-half));
}

.scroll-cube-widget__face--top {
	transform: rotateX(90deg) translateZ(var(--scw-half));
}

.scroll-cube-widget__face--bottom {
	transform: rotateX(-90deg) translateZ(var(--scw-half));
}

.scroll-cube-widget__face--left {
	transform: rotateY(-90deg) translateZ(var(--scw-half));
}

.scroll-cube-widget__face--right {
	transform: rotateY(90deg) translateZ(var(--scw-half));
}

/* lcube / cubblock */
.elementor-element.lcube,
.elementor-section.lcube {
	overflow: visible !important;
}

.elementor-element.lcube > .elementor-container,
.elementor-section.lcube > .elementor-container {
	overflow: visible !important;
	align-items: stretch !important;
}

.elementor-element.lcube .elementor-column.cubblock,
.elementor-element.lcube .elementor-column.cubblockvideo,
.elementor-section.lcube .elementor-column.cubblock,
.elementor-section.lcube .elementor-column.cubblockvideo {
	align-self: stretch !important;
	overflow: visible !important;
}

.elementor-element.lcube .elementor-column.cubblock > .elementor-widget-wrap,
.elementor-element.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap,
.elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
.elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-end !important;
	min-height: 100% !important;
	height: 100% !important;
	overflow: visible !important;
}

.elementor-element.lcube .scroll-cube-widget,
.elementor-section.lcube .scroll-cube-widget {
	margin-top: var(--scw-margin-top, 100px);
	margin-bottom: var(--scw-pad-sides, 32px);
	margin-inline-start: auto;
	margin-inline-end: auto;
}

/* Min cube size per breakpoint (JS respects --scw-size-min) */
@media screen and (max-width: 360px) {
	.scroll-cube-widget {
		--scw-size-min: 130px;
		--scw-pad-top: min(var(--scw-pad-top, 50px), 20px);
		--scw-pad-sides: min(var(--scw-pad-sides, 32px), 14px);
		--scw-margin-top: min(var(--scw-margin-top, 100px), 32px);
		max-width: calc(100vw - 32px);
		margin-left: auto;
		margin-right: auto;
	}

	.scroll-cube-widget__scene {
		position: relative;
		top: auto;
		bottom: auto;
		margin: 0 auto;
	}

	.elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
	.elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
		align-items: center !important;
		justify-content: center !important;
		min-height: auto !important;
		height: auto !important;
	}
}

@media screen and (min-width: 361px) and (max-width: 640px) {
	.scroll-cube-widget {
		--scw-size-min: 140px;
		--scw-pad-top: min(var(--scw-pad-top, 50px), 24px);
		--scw-margin-top: min(var(--scw-margin-top, 100px), 40px);
		max-width: calc(100vw - 40px);
		margin-left: auto;
		margin-right: auto;
	}

	.scroll-cube-widget__scene {
		position: relative;
		top: auto;
		bottom: auto;
		margin: 0 auto;
	}

	.elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
	.elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
		align-items: center !important;
		justify-content: center !important;
		min-height: auto !important;
		height: auto !important;
	}
}

@media screen and (min-width: 641px) and (max-width: 767px) {
	.scroll-cube-widget {
		--scw-size-min: 150px;
		--scw-margin-top: min(var(--scw-margin-top, 100px), 48px);
		margin-left: auto;
		margin-right: auto;
	}

	.scroll-cube-widget__scene {
		position: relative;
		top: auto;
		bottom: auto;
		margin: 0 auto;
	}

	.elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
	.elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
		align-items: center !important;
		justify-content: center !important;
		min-height: auto !important;
		height: auto !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.scroll-cube-widget {
		--scw-size-min: 160px;
		--scw-pad-top: min(var(--scw-pad-top, 50px), 36px);
		--scw-margin-top: min(var(--scw-margin-top, 100px), 64px);
		--scw-sticky-bottom: min(var(--scw-sticky-bottom, 80px), 56px);
	}

	.scroll-cube-widget__scene {
		perspective: 1250px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1023px) {
	.scroll-cube-widget {
		--scw-size-min: 170px;
		--scw-sticky-bottom: min(var(--scw-sticky-bottom, 80px), 64px);
	}
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.scroll-cube-widget {
		--scw-size-min: 175px;
		--scw-sticky-bottom: min(var(--scw-sticky-bottom, 80px), 72px);
	}

	.scroll-cube-widget__scene {
		perspective: 1350px;
	}
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
	.scroll-cube-widget__scene {
		perspective: 1400px;
	}
}

@media screen and (min-width: 1440px) and (max-width: 1549px) {
	.scroll-cube-widget__scene {
		perspective: 1450px;
	}
}

@media screen and (min-width: 1550px) and (max-width: 1599px) {
	.scroll-cube-widget__scene {
		perspective: 1500px;
		bottom: min(var(--scw-sticky-bottom, 80px), 88px);
	}
}

@media screen and (min-width: 1600px) {
	.scroll-cube-widget__scene {
		perspective: 1500px;
	}
}

html[dir="rtl"] .elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
html[dir="rtl"] .elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
	align-items: flex-start !important;
}

@media screen and (max-width: 767px) {
	html[dir="rtl"] .elementor-section.lcube .elementor-column.cubblock > .elementor-widget-wrap,
	html[dir="rtl"] .elementor-section.lcube .elementor-column.cubblockvideo > .elementor-widget-wrap {
		align-items: center !important;
	}
}
