/* =================================================================
   File:    inc/elementor/widgets/hero-slider/style.css
   Purpose: Scoped CSS for the Liqui Hero Slider widget. Loaded on
            demand (only when the widget is on the page).
   ================================================================= */

.liqui-hero {
	position: relative;
	overflow: hidden;
}

/* Full-bleed variant — escapes any container max-width. Use in Elementor
   sections set to "Full width" container, or anywhere; this CSS escapes
   ancestor max-widths by using 100vw + negative inline-margin. */
.liqui-hero--fullbleed {
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
	max-width: 100vw;
}

/* Contained variant — caps at the page content width. */
.liqui-hero--contained {
	width: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.liqui-hero__swiper {
	width: 100%;
	height: 100%;
}

/* Each slide */
.liqui-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
}

.liqui-hero__bg {
	position: absolute;
	inset: -10% -10% -10% -10%;     /* extra padding so parallax never reveals edges */
	background-size: cover;
	background-position: center;
	z-index: 1;
	will-change: transform;
}

.liqui-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.25);
	z-index: 2;
}

.liqui-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 64px);
	padding-block: clamp(48px, 8vw, 120px);
	display: flex;
}

/* Alignment */
.liqui-hero__slide--align-start .liqui-hero__inner  { justify-content: flex-start; }
.liqui-hero__slide--align-center .liqui-hero__inner { justify-content: center;     text-align: center; }
.liqui-hero__slide--align-end .liqui-hero__inner    { justify-content: flex-end;   text-align: end; }

/* Glass copy panel */
.liqui-hero__copy {
	max-width: 640px;
	padding: clamp(20px, 3vw, 36px);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.20);
	border: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	backdrop-filter:         blur(var(--glass-blur)) saturate(140%);
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.25);
	color: #fff;
}
.liqui-hero__eyebrow { color: #fff; opacity: 0.9; margin-bottom: 12px; letter-spacing: 0.14em; }
.liqui-hero__title { color: #fff; margin: 0 0 12px; line-height: 1.05; letter-spacing: -0.02em; }
.liqui-hero__subhead { color: rgba(255,255,255,0.92); margin: 0 0 20px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.liqui-hero__ctas { gap: var(--space-3); }

/* Center-aligned slides → centre the copy */
.liqui-hero__slide--align-center .liqui-hero__copy { margin-inline: auto; text-align: center; }
.liqui-hero__slide--align-center .liqui-hero__ctas { justify-content: center; }
.liqui-hero__slide--align-end .liqui-hero__copy { margin-inline-start: auto; text-align: end; }
.liqui-hero__slide--align-end .liqui-hero__ctas { justify-content: flex-end; }

/* Dots */
.liqui-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: 8px;
}
.liqui-hero__dots .swiper-pagination-bullet {
	width: 8px; height: 8px;
	background: rgba(255,255,255,0.55);
	opacity: 1;
	transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
	border-radius: 999px;
}
.liqui-hero__dots .swiper-pagination-bullet-active {
	width: 32px;
	background: #fff;
}

/* Arrows */
.liqui-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.25);
	border: 1px solid rgba(255,255,255,0.45);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter:         blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.liqui-hero__arrow:hover { background: rgba(255,255,255,0.40); }
.liqui-hero__arrow::after { font-size: 18px; font-weight: 700; }
.liqui-hero__arrow--prev { inset-inline-start: clamp(12px, 2vw, 32px); }
.liqui-hero__arrow--next { inset-inline-end:   clamp(12px, 2vw, 32px); }
[dir="rtl"] .liqui-hero__arrow--prev::after { content: '›'; }
[dir="rtl"] .liqui-hero__arrow--next::after { content: '‹'; }

/* Creative effect helpers — Swiper handles the transform; we just blur on out. */
.swiper-creative .liqui-hero__slide.swiper-slide-prev,
.swiper-creative .liqui-hero__slide.swiper-slide-next {
	filter: blur(2px) brightness(0.85);
}

/* Mobile */
@media (max-width: 768px) {
	.liqui-hero__inner   { padding-block: clamp(48px, 14vw, 80px); }
	.liqui-hero__copy    { max-width: 100%; }
	.liqui-hero__arrow   { width: 40px; height: 40px; }
	.liqui-hero__arrow--prev { inset-inline-start: 12px; }
	.liqui-hero__arrow--next { inset-inline-end:   12px; }
}

/* Reduced motion — disable parallax, keep slider static-fade */
html[data-reduced-motion] .liqui-hero__bg { transform: none !important; }