.hero-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background: transparent;
	box-sizing: border-box;
	perspective: 1200px; /* used by the flip transition; harmless otherwise */
}

.hero-slider * {
	box-sizing: border-box;
}

.hero-slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* --- Base slide state: default is a fade/opacity based hide/show,
   overridden per transition type below. Positioning is forced with
   !important because many WordPress themes apply their own global
   image/element resets (e.g. "img { height:auto }") that are strong
   enough to override plain rules - without !important here, slides can
   collapse to their natural content size instead of filling the
   slider, which is especially visible on mobile. --- */
.hero-slider-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--hs-speed, 800ms) ease,
		transform var(--hs-speed, 800ms) ease,
		clip-path var(--hs-speed, 800ms) ease,
		visibility 0s linear var(--hs-speed, 800ms);
}

.hero-slider-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Fade (default) - just uses the opacity rules above. */

/* Zoom */
.hero-slider-transition-zoom .hero-slider-slide {
	transform: scale(1.12);
}
.hero-slider-transition-zoom .hero-slider-slide.is-active {
	transform: scale(1);
}

/* Flip */
.hero-slider-transition-flip .hero-slider-slide {
	transform: rotateY(18deg);
	backface-visibility: hidden;
}
.hero-slider-transition-flip .hero-slider-slide.is-active {
	transform: rotateY(0deg);
}

/* Wipe (left-to-right reveal) */
.hero-slider-transition-wipe .hero-slider-slide {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 0 0 100%);
}
.hero-slider-transition-wipe .hero-slider-slide.is-active {
	clip-path: inset(0 0 0 0%);
}

/* Slide (horizontal) / Slide up / Slide down - these are positioned via
   inline transform set by JS (translateX or translateY), driven by each
   slide's offset from the active index. No opacity fade for these. */
.hero-slider-transition-slide .hero-slider-slide,
.hero-slider-transition-slide-up .hero-slider-slide,
.hero-slider-transition-slide-down .hero-slider-slide {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition: transform var(--hs-speed, 800ms) ease;
}
.hero-slider-transition-slide .hero-slider-slide.is-active,
.hero-slider-transition-slide-up .hero-slider-slide.is-active,
.hero-slider-transition-slide-down .hero-slider-slide.is-active {
	pointer-events: auto;
}

.hero-slider-bg-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background-size: cover;
	background-position: center;
}

.hero-slider-media {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	display: block;
}

.hero-slider-overlay {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background: var(--hs-overlay, rgba(0,0,0,0.3));
	pointer-events: none;
}

/* --- Content box (per-slide width/height, word-wrapped text) --- */
.hero-slider-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 24px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	gap: 14px;
	/* Lets child text scale against THIS box's width (via cqw units)
	   instead of the full viewport - fixes oversized/overlapping text
	   when a narrower content box is used on a wide screen. */
	container-type: inline-size;
}

/* When a fixed width/height is set inline, the box no longer stretches
   to the full slide height - center it instead. */
.hero-slider-content[style*="width"],
.hero-slider-content[style*="height"] {
	height: auto;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	left: 50%;
	margin-left: 0;
}

.hero-slider-align-center.hero-slider-content[style*="width"],
.hero-slider-content.hero-slider-align-center[style*="width"] {
	transform: translate(-50%, -50%);
}

.hero-slider-align-left.hero-slider-content[style*="width"] {
	left: 6%;
	transform: translateY(-50%);
}

.hero-slider-align-right.hero-slider-content[style*="width"] {
	left: auto;
	right: 6%;
	transform: translateY(-50%);
}

.hero-slider-align-left   { align-items: flex-start; text-align: left; }
.hero-slider-align-right  { align-items: flex-end; text-align: right; }
.hero-slider-align-center { align-items: center; text-align: center; }

/* --- Content image next to text (two-column layout) --- */
.hero-slider-content-wrap {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 40px 6%;
}

.hero-slider-content-wrap .hero-slider-content {
	position: static !important;
	transform: none !important;
	height: auto !important;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	margin: 0;
	left: auto !important;
	right: auto !important;
}

.hero-slider-layout-image {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-slider-layout-image img {
	max-width: 100%;
	max-height: 70vh;
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* image left, text right (markup order: image, content -> normal row) */
.hero-slider-layout-left { flex-direction: row; }
/* image right, text left (visually swap without changing markup order) */
.hero-slider-layout-right { flex-direction: row-reverse; }

@media (max-width: 782px) {
	.hero-slider-content-wrap {
		flex-direction: column !important;
		gap: 20px;
		padding: 24px 16px;
	}
	.hero-slider-layout-image img {
		max-height: 35vh;
	}
}

.hero-slider-title,
.hero-slider-text {
	margin: 0;
	width: 100%;
	min-width: 0;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

.hero-slider-text {
	line-height: 1.5;
}

.hero-slider-accent {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hero-slider-button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	padding: 0.75em 1.75em;
	border-radius: 4px;
	transition: filter 0.2s ease, transform 0.2s ease;
}

a.hero-slider-button:hover {
	filter: brightness(0.88);
	transform: translateY(-1px);
}

/* --- Arrows --- */
.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.85);
	color: #111;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.hero-slider-arrow:hover {
	background: #fff;
}

.hero-slider-prev { left: 16px; }
.hero-slider-next { right: 16px; }

/* --- Dots --- */
.hero-slider-dots {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hero-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.8);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hero-slider-dot.is-active {
	background: #fff;
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.hero-slider-arrow {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
	.hero-slider-content {
		padding: 24px 16px;
		gap: 10px;
	}
	.hero-slider-content[style*="width"] {
		width: 90% !important;
		left: 5% !important;
		right: 5% !important;
		transform: translateY(-50%) !important;
	}
}

/* Admin preview box */
.hero-slider-preview-box {
	border: 1px solid #dcdcde;
	background: #fff;
	padding: 0;
	margin: 1rem 0 2rem;
	border-radius: 4px;
	overflow: hidden;
}