/*!
 * Sentio for Elementor - hero-compare widget
 * Extracted from frontend.css during Batch 2356 Checkpoint 1 mechanical extraction (2026-04-19).
 * Tier 3 mechanical extraction — verbatim from monolith.
 */

/* ==========================================================================
   HERO-07: BEFORE/AFTER COMPARE (.sentio-hcm)
   ========================================================================== */

.sentio-hcm {
	position: relative; width: 100%; overflow: hidden;
	border-radius: var(--hcm-radius, 16px); user-select: none;
}

.sentio-hcm__slides { position: relative; width: 100%; height: var(--hcm-height, 600px); }

.sentio-hcm__comparison {
	position: absolute; inset: 0; height: var(--hcm-height, 600px);
	opacity: 0; pointer-events: none; overflow: hidden;
	transition: opacity 0.5s ease;
}
.sentio-hcm__comparison--active { opacity: 1; pointer-events: auto; position: relative; }

.sentio-hcm__before, .sentio-hcm__after {
	position: absolute; inset: 0; overflow: hidden;
}
.sentio-hcm__before { z-index: 2; }
.sentio-hcm__after { z-index: 1; }
.sentio-hcm__before img, .sentio-hcm__after img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	pointer-events: none;
}

/* Handle */
.sentio-hcm__handle {
	position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center;
	cursor: col-resize;
}
.sentio-hcm--horizontal .sentio-hcm__handle {
	top: 0; bottom: 0; left: var(--hcm-start, 50%); transform: translateX(-50%);
	flex-direction: column; width: 44px;
}
.sentio-hcm--vertical .sentio-hcm__handle {
	left: 0; right: 0; top: var(--hcm-start, 50%); transform: translateY(-50%);
	flex-direction: row; height: 44px; cursor: row-resize;
}

.sentio-hcm__handle-line {
	flex: 1; background-color: #fff;
}
.sentio-hcm--horizontal .sentio-hcm__handle-line { width: var(--hcm-line-width, 3px); }
.sentio-hcm--vertical .sentio-hcm__handle-line { height: var(--hcm-line-width, 3px); width: 100%; }

.sentio-hcm__handle-circle {
	width: var(--hcm-handle-size, 44px); height: var(--hcm-handle-size, 44px);
	border-radius: 50%; background-color: #6C63FF;
	color: #fff; display: flex; align-items: center;
	justify-content: center; font-size: 18px; flex-shrink: 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.sentio-hcm__handle:hover .sentio-hcm__handle-circle { transform: scale(1.1); }

/* Handle style: line-only — hide the circle, show only the line */
.sentio-hcm__handle--line-only .sentio-hcm__handle-circle { display: none; }

/* Handle style: circle-grip — grip dots inside circle */
.sentio-hcm__grip {
	display: grid; grid-template-columns: repeat(3, 4px); gap: 2px;
}
.sentio-hcm__grip span {
	width: 4px; height: 4px; border-radius: 50%; background-color: currentColor;
}

/* Handle style: square-icon — square shape instead of circle */
.sentio-hcm__handle--square-icon .sentio-hcm__handle-circle { border-radius: 6px; }

/* Labels */
.sentio-hcm__label {
	position: absolute; z-index: 3; padding: 8px 16px;
	background: var(--hcm-label-bg, rgba(0,0,0,0.6));
	color: var(--hcm-label-color, #fff); border-radius: 20px;
	font-size: 13px; font-weight: 600;
}
.sentio-hcm--horizontal .sentio-hcm__label--before { top: 16px; left: 16px; }
.sentio-hcm--horizontal .sentio-hcm__label--after { top: 16px; right: 16px; }
.sentio-hcm--vertical .sentio-hcm__label--before { top: 16px; left: 16px; }
.sentio-hcm--vertical .sentio-hcm__label--after { bottom: 16px; left: 16px; }

/* Overlay text */
.sentio-hcm__overlay-text {
	position: absolute; bottom: 20px; z-index: 3;
	padding: 16px 20px; border-radius: 8px;
	background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff; max-width: 280px; pointer-events: none;
}
.sentio-hcm__before .sentio-hcm__overlay-text { left: 20px; }
.sentio-hcm__after .sentio-hcm__overlay-text { right: 20px; }
.sentio-hcm__overlay-text h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.sentio-hcm__overlay-text p { font-size: 13px; margin: 0; opacity: 0.85; line-height: 1.4; }

/* Dots */
.sentio-hcm__dots { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.sentio-hcm__dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; padding: 0; transition: all 0.3s; }
.sentio-hcm__dot--active { background: #6C63FF; }