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

/* ==========================================================================
   HERO-02: SPLIT SCREEN (.sentio-hsp)
   ========================================================================== */

.sentio-hsp {
	position: relative; width: 100%; overflow: hidden; display: flex;
}
.sentio-hsp--fullscreen { height: 100vh; }
.sentio-hsp--fixed { height: var(--hsp-height, 700px); }
.sentio-hsp--vertical { flex-direction: column; }

/* Panels */
.sentio-hsp__panel { position: relative; overflow: hidden; }
.sentio-hsp__panel--content {
	flex: 0 0 var(--hsp-ratio-content, 50%);
	display: flex; align-items: center; justify-content: center;
	background: var(--hsp-content-bg, #fff); z-index: 2;
}
.sentio-hsp__panel--media {
	flex: 0 0 var(--hsp-ratio-media, 50%); z-index: 1;
}
.sentio-hsp--content-right { flex-direction: row-reverse; }

/* Content slides */
.sentio-hsp__slides-content, .sentio-hsp__slides-media {
	position: relative; width: 100%; height: 100%;
}
.sentio-hsp__slide-content, .sentio-hsp__slide-media {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity var(--hsp-transition-speed, 800ms) ease, transform var(--hsp-transition-speed, 800ms) ease;
}
.sentio-hsp__slide-content--active, .sentio-hsp__slide-media--active { opacity: 1; }

/* Counter-slide animation: content goes up, media goes down */
.sentio-hsp[data-transition="counter-vertical"] .sentio-hsp__slide-content {
	transform: translateY(40px);
}
.sentio-hsp[data-transition="counter-vertical"] .sentio-hsp__slide-content--active {
	transform: translateY(0);
}
.sentio-hsp[data-transition="counter-vertical"] .sentio-hsp__slide-media {
	transform: translateY(-40px);
}
.sentio-hsp[data-transition="counter-vertical"] .sentio-hsp__slide-media--active {
	transform: translateY(0);
}

/* Counter-horizontal animation: content slides from left, media from right */
.sentio-hsp[data-transition="counter-horizontal"] .sentio-hsp__slide-content {
	transform: translateX(-40px);
}
.sentio-hsp[data-transition="counter-horizontal"] .sentio-hsp__slide-content--active {
	transform: translateX(0);
}
.sentio-hsp[data-transition="counter-horizontal"] .sentio-hsp__slide-media {
	transform: translateX(40px);
}
.sentio-hsp[data-transition="counter-horizontal"] .sentio-hsp__slide-media--active {
	transform: translateX(0);
}

/* Content styling */
.sentio-hsp__slide-content {
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--hsp-content-pad, 60px);
}
.sentio-hsp__subtitle {
	font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
	margin: 0 0 12px; color: var(--hsp-subtitle-color, #6C63FF);
}
.sentio-hsp__title {
	font-size: 44px; font-weight: 800; margin: 0 0 16px; line-height: 1.15;
	color: var(--hsp-title-color, #111);
}
.sentio-hsp__desc {
	font-size: 16px; margin: 0 0 28px; line-height: 1.65; max-width: var(--hsp-desc-max-w, 480px);
	color: var(--hsp-desc-color, #555);
}
.sentio-hsp__btn {
	display: inline-flex; align-items: center; padding: 14px 32px;
	border-radius: 8px; font-size: 16px; font-weight: 600;
	text-decoration: none; color: #fff; transition: all 0.3s; line-height: 1.2;
}
.sentio-hsp__btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

/* Media */
.sentio-hsp__slide-media img, .sentio-hsp__slide-media video {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Counter */
.sentio-hsp__counter {
	position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
	font-size: 14px; color: var(--hsp-counter-color, #999); z-index: 5; font-weight: 500;
}
.sentio-hsp__counter-current { font-weight: 700; color: var(--hsp-counter-active, #111); font-size: 18px; }

/* Arrows */
.sentio-hsp__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
	width: var(--hsp-arrow-size, 48px); height: var(--hsp-arrow-size, 48px);
	border-radius: 50%; background: var(--hsp-arrow-bg, transparent);
	color: var(--hsp-arrow-color, #333); border: 2px solid currentColor;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	font-size: 18px; transition: all 0.2s;
}
.sentio-hsp__arrow:hover { color: var(--hsp-arrow-hover, #6C63FF); }
.sentio-hsp__arrow--prev { left: 24px; }
.sentio-hsp__arrow--next { right: 24px; }

/* Dots */
.sentio-hsp__dots {
	position: absolute; bottom: 30px; right: 40px; z-index: 10;
	display: flex; gap: 8px;
}
.sentio-hsp__dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--hsp-dot-color, #ccc); border: none; cursor: pointer; padding: 0;
	transition: background 0.3s, transform 0.3s;
}
.sentio-hsp__dot--active { background: var(--hsp-dot-active, #6C63FF); transform: scale(1.3); }

@media (max-width: 767px) {
	.sentio-hsp { flex-direction: column-reverse; }
	.sentio-hsp--content-right { flex-direction: column-reverse; }
	.sentio-hsp__panel--content, .sentio-hsp__panel--media { flex: 0 0 50%; }
	.sentio-hsp__title { font-size: 28px; }
	.sentio-hsp__slide-content { padding: 30px 20px; }
}