/* Lite Hero Slider — dependency-free fade carousel. No Swiper. */

.mca-ls {
	position: relative;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.mca-ls__viewport {
	position: relative;
	width: 100%;
	height: 100%;
}

.mca-ls__slide {
	position: absolute;
	inset: 0;
	display: block;
	background-size: cover;
	background-position: center;
	background-color: #f2f2f2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s ease;
	text-decoration: none;
	touch-action: pan-y;
	-webkit-user-drag: none;
	user-select: none;
}

.mca-ls__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.mca-ls__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 44px 56px;
	max-width: 600px;
}

.mca-ls__subheading {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--e-global-color-primary, #1e90ff);
}

.mca-ls__heading {
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	color: var(--e-global-color-text, #1a1a1a);
}

.mca-ls__description {
	font-size: 15px;
	line-height: 1.5;
	color: var(--e-global-color-text, #1a1a1a);
	opacity: 0.8;
}

.mca-ls__button {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-top: 6px;
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--e-global-color-secondary, #0d3b2e);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

.mca-ls__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.mca-ls:hover .mca-ls__nav {
	opacity: 1;
}

.mca-ls__nav:hover {
	background: #fff;
}

.mca-ls__nav--prev { left: 15px; }
.mca-ls__nav--next { right: 15px; }

.mca-ls__nav svg {
	width: 18px;
	height: 18px;
	fill: var(--e-global-color-text, #1a1a1a);
}

.mca-ls__dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.mca-ls__dot {
	width: 9px;
	height: 9px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.6);
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	transition: width 0.25s ease, background 0.25s ease;
}

/* Accessibility fix (PSI "Touch targets do not have sufficient size", 2026-09-07):
   the visible dot stays 9px (the intended design), but WCAG 2.5.8 wants at
   least a 24x24px hit area — an invisible ::before, centered on the dot,
   extends the clickable/tappable area without changing what's actually
   drawn. Clicks anywhere inside it still hit this same <button>. */
.mca-ls__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
}

.mca-ls__dot.is-active {
	width: 26px;
	background: #fff;
}

.mca-ls.is-dragging .mca-ls__slide {
	transition: none;
}

@media (max-width: 1024px) {
	.mca-ls__viewport { height: 28.33vw; }
	.mca-ls__content { padding: 24px 32px; max-width: 80%; }
}

/* XStore's own mobile breakpoint (Theme Options > Starting point of the
   mobile header) is 992px — match it so arrows disappear exactly where
   the site switches to its mobile header, since touch devices can swipe. */
@media (max-width: 992px) {
	.mca-ls__nav { display: none; }
}

@media (max-width: 767px) {
	/* The Elementor widget wrapper keeps its desktop custom-width setting
	   (80%, no per-breakpoint override) all the way down to mobile — left
	   at 80vw wide, feeding a 60vw-tall viewport zoomed background-size:cover
	   into a box far narrower than the banner's own 1920x544 (~3.53:1) ratio,
	   cropping most of the image down to a tight center strip. Force the
	   wrapper to full width here so the slider's own sizing below is based
	   on the real viewport, not a shrunken 80% of it. */
	.elementor-widget-mcakey_hero_slider { width: 100% !important; }

	/* aspect-ratio (not a fixed vw height) keeps the box matched to the
	   banner images' actual 1920x544 ratio at any width, so cover never
	   has to crop — this is what "reduce height" / "show full image" meant. */
	.mca-ls { width: 100% !important; max-width: 100% !important; padding: 0 5px; box-sizing: border-box; border-radius: 12px !important; }
	/* !important: the widget's own "Height (desktop)" style control generates
	   a page-specific rule (.elementor-element-mcahero01 .mca-ls__viewport
	   {height:420px}) with higher selector specificity than a plain class
	   here, and it isn't responsive (applies at every breakpoint) — at
	   desktop widths 420px happens to roughly match the banner's own ratio,
	   which is why this went unnoticed until mobile, where 420px is nearly
	   the full width and crops the image down to almost nothing. */
	.mca-ls__viewport { height: auto !important; aspect-ratio: 1920 / 544; }
	.mca-ls__content { padding: 10px 14px; }
}