/* ic_ba_reveal widget styles. Compiled by hand -- no build step. */

.ic-ba-reveal {
	/* --ba-pos MUST have a fallback: if it's ever undefined, var() fails,
	   clip-path becomes invalid-at-computed-value -> none, and the before
	   pane silently covers everything. */
	--ba-pos: 50%;
	--ba-cross: 50%;
	--ba-pane-bg: #fff;
	--ba-divider-width: 2px;
	--ba-divider-color: #fff;
	--ba-handle-size: 40px;
	--ba-handle-bg: rgba(0, 0, 0, 0.55);
	--ba-handle-color: #fff;
	--ba-label-offset-h: 16px;
	--ba-label-offset-v: 16px;

	position: relative;
	display: grid;
	grid-template-areas: "ba";
	grid-template-columns: minmax(0, 1fr);
	isolation: isolate;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.ic-ba-reveal[data-orientation="vertical"] {
	touch-action: pan-x;
}

/* Both panes are in-flow grid items in the same cell: wrapper height is
   max(before, after), and grid items are independent formatting contexts
   so neither pane can margin-collapse against the other.

   The opaque background is load-bearing, not decorative: a template rarely
   paints every pixel of its own box (a plain text column has no background
   of its own), and without this backstop, whatever's directly behind it --
   the other pane, since both occupy the same grid cell -- shows through
   those gaps instead. */
.ic-ba-reveal__pane {
	grid-area: ba;
	min-width: 0;
	min-height: 0;
	position: relative;
	background: var(--ba-pane-bg);
}

.ic-ba-reveal__pane--after {
	z-index: 1;
}

.ic-ba-reveal__pane--before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__pane--before {
	clip-path: inset(0 0 calc(100% - var(--ba-pos)) 0);
}

/* Opt-in: stretch each template to the widget's full height.
   .e-con is `height: var(--height)` with --height:auto by default, so the
   custom property is the correct lever -- setting height directly would
   only win on specificity, not on the cascade Elementor already set up. */
.ic-ba-reveal--fill .ic-ba-reveal__pane > .elementor {
	height: 100%;
}

.ic-ba-reveal--fill .ic-ba-reveal__pane > .elementor > .e-con {
	--height: 100%;
}

.ic-ba-reveal--fill .ic-ba-reveal__pane > .elementor > .elementor-section,
.ic-ba-reveal--fill .ic-ba-reveal__pane > .elementor > .elementor-section > .elementor-container {
	height: 100%;
}

/* ---------- labels ---------- */

.ic-ba-reveal__label {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	/* A label sits over whatever the template renders, so it needs a scrim
	   by default to stay legible regardless of that content -- the widget's
	   own Style tab controls (higher-specificity, per-instance selectors)
	   override every property here when the user sets one. */
	padding: 0.35em 0.75em;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}

/* Each label sits on its own pane's side of the reveal -- before at the
   "start" edge (left in horizontal, top in vertical), after at the "end"
   edge -- so the two can never land on the same spot regardless of the
   cross-axis corner chosen below. */
.ic-ba-reveal__label--before {
	left: var(--ba-label-offset-h);
	right: auto;
}

.ic-ba-reveal__label--after {
	right: var(--ba-label-offset-h);
	left: auto;
}

.ic-ba-reveal[data-label-cross="start"] .ic-ba-reveal__label {
	top: var(--ba-label-offset-v);
	bottom: auto;
}

.ic-ba-reveal[data-label-cross="end"] .ic-ba-reveal__label {
	bottom: var(--ba-label-offset-v);
	top: auto;
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__label--before {
	top: var(--ba-label-offset-v);
	bottom: auto;
	left: auto;
	right: auto;
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__label--after {
	bottom: var(--ba-label-offset-v);
	top: auto;
	left: auto;
	right: auto;
}

.ic-ba-reveal[data-orientation="vertical"][data-label-cross="start"] .ic-ba-reveal__label {
	left: var(--ba-label-offset-h);
	right: auto;
}

.ic-ba-reveal[data-orientation="vertical"][data-label-cross="end"] .ic-ba-reveal__label {
	right: var(--ba-label-offset-h);
	left: auto;
}

/* ---------- UI layer: divider + handle ---------- */

.ic-ba-reveal__ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.ic-ba-reveal__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	width: var(--ba-divider-width);
	transform: translateX(-50%);
	background: var(--ba-divider-color);
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__divider {
	top: var(--ba-pos);
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: var(--ba-divider-width);
	transform: translateY(-50%);
}

.ic-ba-reveal__handle {
	position: absolute;
	left: var(--ba-pos);
	top: var(--ba-cross);
	transform: translate(-50%, -50%);
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	color: var(--ba-handle-color);
	cursor: ew-resize;
	touch-action: none;
	pointer-events: auto;
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__handle {
	left: var(--ba-cross);
	top: var(--ba-pos);
	cursor: ns-resize;
}

.ic-ba-reveal__handle-visual {
	position: relative;
	inline-size: var(--ba-handle-size);
	block-size: var(--ba-handle-size);
	border-radius: 50%;
	background: var(--ba-handle-bg);
	border: var(--ba-divider-width) solid var(--ba-divider-color);
	box-sizing: border-box;
}

/* Solid CSS border-triangles, not chevrons: a zero-size box with one border
   side coloured, no rotation. Matches the technique Essential Addons' own
   twentytwenty-based comparison widget uses for its handle arrows -- it's
   simpler and doesn't fight `display:grid` auto-placement the way stacking
   two rotated pseudo-elements as grid items did. */
.ic-ba-reveal__handle-visual::before,
.ic-ba-reveal__handle-visual::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	box-sizing: content-box;
	border: 5px solid transparent;
}

/* Horizontal (default): "<" left of centre, ">" right of centre. */
.ic-ba-reveal__handle-visual::before {
	top: 50%;
	right: 50%;
	margin-top: -5px;
	margin-right: 4px;
	border-right-color: currentColor;
}

.ic-ba-reveal__handle-visual::after {
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: 4px;
	border-left-color: currentColor;
}

/* Vertical orientation: swap to "^" above centre, "v" below centre. */
.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__handle-visual::before,
.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__handle-visual::after {
	top: auto;
	left: 50%;
	right: auto;
	margin-top: 0;
	margin-left: -5px;
	margin-right: 0;
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__handle-visual::before {
	bottom: 50%;
	margin-bottom: 4px;
	border-right-color: transparent;
	border-bottom-color: currentColor;
}

.ic-ba-reveal[data-orientation="vertical"] .ic-ba-reveal__handle-visual::after {
	top: 50%;
	margin-top: 4px;
	border-left-color: transparent;
	border-top-color: currentColor;
}

.ic-ba-reveal__handle:focus {
	outline: none;
}

.ic-ba-reveal__handle:focus-visible .ic-ba-reveal__handle-visual {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- interaction states ---------- */

.ic-ba-reveal.is-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

/* While dragging, template content can't compete for the pointer -- an
   <iframe> (maps/video embed) especially would otherwise swallow it and
   kill the gesture mid-drag. */
.ic-ba-reveal.is-dragging .ic-ba-reveal__pane {
	pointer-events: none;
}

.ic-ba-reveal.is-dragging .ic-ba-reveal__pane--before {
	will-change: clip-path;
}