/* ==========================================================================
   SamSam Split Solutions
   Structure + default look. Every colour, size, distance and timing below is
   a CSS variable that the Elementor controls override per widget instance.
   ========================================================================== */

.samsam-split {
	--sp-auto-cols: 2;      /* set inline = number of windows            */
	--sp-cols: var(--sp-auto-cols, 2);
	--sp-px: 50%;           /* image position X (per window, per device) */
	--sp-py: 50%;           /* image position Y (per window, per device) */
	--sp-zoom: 25;          /* image zoom on hover/click, in %          */
	--sp-zoom-ms: 900ms;
	--sp-rest: 85%;         /* resting centre of the text, from top     */
	--sp-rise: 70%;         /* how far the text rises, % of window      */
	--sp-rise-ms: 500ms;
	--sp-ease: ease-out;
	--sp-shade: #000000;    /* dark shade colour                        */
	--sp-shade-o: 20;       /* dark shade strength on hover/click, in % */
	--sp-grad: #0b2e25;     /* bottom gradient colour                   */
	--sp-grad-o: 100;       /* bottom gradient strength, in %           */
	--sp-dim: 70;           /* opacity of the OTHER window, in %        */
	--sp-focus: #f2a900;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* White by default, and !important so it always wins over the site /
	   theme background. The Elementor "Background Color" control also uses
	   !important with a more specific selector, so your choice still wins. */
	background-color: #ffffff !important;
}

/* ---------- Full-bleed: break out of any Elementor container width ----------
   CSS does the centred breakout; samsam-split.js then measures the real
   left offset and corrects it, so it also works when the widget sits in an
   off-centre column or a container with its own padding. */
.samsam-split--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
}

.samsam-split__grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-cols), minmax(0, 1fr));
	gap: 0;
	width: 100%;
}

/* ---------- One window ---------- */
.samsam-split__window,
.samsam-split .samsam-split__window:hover,
.samsam-split .samsam-split__window:focus,
.samsam-split .samsam-split__window:active {
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}

.samsam-split__window {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 60vh;
	min-height: 420px;
	overflow: hidden;
	isolation: isolate;
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: opacity 0.5s ease;
	-webkit-tap-highlight-color: transparent;
}

div.samsam-split__window {
	cursor: default;
}

.samsam-split__window:focus-visible {
	outline: 4px solid var(--sp-focus);
	outline-offset: -4px;
}

/* Background image */
.samsam-split__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--sp-px, 50%) var(--sp-py, 50%);
	transform-origin: var(--sp-px, 50%) var(--sp-py, 50%);
	transform: scale(1);
	transition: transform var(--sp-zoom-ms) var(--sp-ease);
	will-change: transform;
	z-index: 0;
}

/* Layer 1: always-on bottom gradient (keeps the words readable) */
.samsam-split__gradient {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, var(--sp-grad) 0%, transparent 100%);
	opacity: calc(var(--sp-grad-o) / 100);
}

/* Layer 2: the dark shade that fades in on hover / click */
.samsam-split__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	background-color: var(--sp-shade);
	opacity: 0;
	transition: opacity var(--sp-rise-ms) ease;
}

/* The words. `top` is animated so the rise distance is a true % of the
   window's height, whatever height you choose. */
.samsam-split__text {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--sp-rest);
	z-index: 3;
	box-sizing: border-box;
	padding: 0 32px;
	text-align: center;
	pointer-events: none;
	transform: translateY(-50%);
	transition: top var(--sp-rise-ms) var(--sp-ease);
}

.samsam-split .samsam-split__kicker {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	color: #f2a900;
}

.samsam-split .samsam-split__title {
	display: block;
	margin: 12px 0 0;
	padding: 0;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: #ffffff;
}

/* ---------- ACTIVE STATE: hover, keyboard focus, tap/click, editor preview ---------- */
.samsam-split__window:is(:hover, :focus-visible, .is-active, .is-preview) .samsam-split__img {
	transform: scale(calc(1 + var(--sp-zoom) / 100));
}

.samsam-split__window:is(:hover, :focus-visible, .is-active, .is-preview) .samsam-split__shade {
	opacity: calc(var(--sp-shade-o) / 100);
}

.samsam-split__window:is(:hover, :focus-visible, .is-active, .is-preview) .samsam-split__text {
	top: max(0%, calc(var(--sp-rest) - var(--sp-rise)));
}

/* The window that is NOT being hovered fades back slightly. */
.samsam-split__window:is(.is-dimmed, .is-preview-dim) {
	opacity: calc(var(--sp-dim) / 100);
}

/* ---------- Phones: stack by default (the "Windows Per Row" control overrides) ---------- */
@media (max-width: 767px) {
	.samsam-split {
		--sp-cols: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.samsam-split__img,
	.samsam-split__shade,
	.samsam-split__text,
	.samsam-split__window {
		transition: none !important;
	}
}