/**
 * SigmaGraft Solutions — shared base.
 *
 * Icons, per-item responsive visibility and the scroll-reveal primitives.
 * Section layout lives in each widget's own stylesheet.
 *
 * Every value here is a default: each widget's Style controls emit scoped
 * rules that win over anything below.
 */

/*
 * Elementor already sets border-box inside `.elementor`, but these containers
 * carry both `width: 100%` and a side gutter, and under content-box that pair
 * overflows by exactly twice the gutter. Scoped to this plugin's own elements.
 */
[class*="sgxs-"],
[class*="sgxs-"]::before,
[class*="sgxs-"]::after {
	box-sizing: border-box;
}

/* ═════════ Icons ═════════ */

.sgxs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.sgxs-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.sgxs-icon i {
	font-size: inherit;
	line-height: 1;
}

/* ═════════ Per-item visibility ═════════ */

/*
 * Elementor's own visibility controls work per widget. These let a single
 * repeater item be hidden at one breakpoint, which the panel cannot express.
 * Breakpoints match Elementor's defaults.
 */
@media (min-width: 1025px) {

	.sgxs-hide-d {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {

	.sgxs-hide-t {
		display: none !important;
	}
}

@media (max-width: 767px) {

	.sgxs-hide-m {
		display: none !important;
	}
}

/* ═════════ Scroll reveal ═════════ */

.sgxs-reveal {
	--sgxs-rv-dur: 660ms;
	--sgxs-rv-delay: 0ms;
	--sgxs-rv-stagger: 80ms;
	--sgxs-rv-dist: 22px;
	--sgxs-rv-i: 0;
	--sgxs-rv-ease: cubic-bezier(.22, .7, .3, 1);

	opacity: 0;
	transition:
		opacity var(--sgxs-rv-dur) var(--sgxs-rv-ease),
		transform var(--sgxs-rv-dur) var(--sgxs-rv-ease);
	transition-delay: calc(var(--sgxs-rv-delay) + var(--sgxs-rv-i) * var(--sgxs-rv-stagger));
	will-change: opacity, transform;
}

.sgxs-rv-up .sgxs-reveal {
	transform: translateY(var(--sgxs-rv-dist));
}

.sgxs-rv-down .sgxs-reveal {
	transform: translateY(calc(-1 * var(--sgxs-rv-dist)));
}

.sgxs-rv-left .sgxs-reveal {
	transform: translateX(calc(-1 * var(--sgxs-rv-dist)));
}

.sgxs-rv-right .sgxs-reveal {
	transform: translateX(var(--sgxs-rv-dist));
}

.sgxs-rv-zoom .sgxs-reveal {
	transform: scale(.94);
}

.sgxs-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* The editor re-renders on every keystroke — never hide content there. */
.elementor-editor-active .sgxs-reveal,
.elementor-editor-preview .sgxs-reveal {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.sgxs-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}