/*!
 * WooKit — Hero Slider (split card + image carousel).
 * Each slide: a dark translucent text card on one side, a product image on the
 * other; boxed/centered, autoplay + arrows + dots + swipe, fade-up active card.
 * CTA uses the --wookit-* brand tokens.
 */

.wookit-hero {
	position: relative;
	max-width: var( --wookit-hero-max, 1200px );
	margin-inline: auto;
	/* Padding lives on the slide now (the container that holds card + image). */
	padding: 0;
	font-family: var( --wookit-font, inherit ) !important;
	outline: none;
}

.wookit-hero *,
.wookit-hero *::before,
.wookit-hero *::after { box-sizing: border-box !important; }

/* ── Viewport + sliding track ───────────────────────────────────────────── */
/* Height is set by JS to the ACTIVE slide's height (so each image shows full,
   never clipped); transition makes the change smooth between slides. */
.wookit-hero__viewport {
	overflow: hidden;
	transition: height 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.wookit-hero__track {
	display: flex;
	/* flex-start so slides keep their OWN height instead of all stretching to
	   the tallest — otherwise a taller image would be clipped to the shortest. */
	align-items: flex-start;
	transition: transform 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}

/* ── Slide: two columns (text card + image), vertically centred ─────────── */
.wookit-hero__slide {
	flex: 0 0 100%;
	min-width: 100%;
	display: flex;
	/* Card vertically centred. */
	align-items: center;
	/* Clear gap so the card and image NEVER touch. */
	gap: clamp( 20px, 4vw, 56px );
	/* Padded container — generous side padding so the card breathes off the
	   edges (and keeps its shadow off the slide edges, so it can't bleed onto
	   the neighbouring slide). NO bottom padding: the image sits flush on the
	   bottom edge. */
	padding: clamp( 18px, 3vw, 48px ) clamp( 28px, 6vw, 100px ) 0;
}
.wookit-hero--img-left .wookit-hero__slide { flex-direction: row-reverse; }

.wookit-hero__text,
.wookit-hero__media { min-width: 0; }
/* Split: text box 45%, image 50% (remaining ~5% is the gap between them). */
.wookit-hero__text  { flex: 0 1 45%; }
.wookit-hero__media {
	flex: 0 1 50%;
	/* Pin the image to the bottom of the slide (card stays vertically centred). */
	align-self: flex-end;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* ── Image ──────────────────────────────────────────────────────────────── */
.wookit-hero__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	/* Cap the height so a tall image can't blow up the hero — it scales DOWN
	   proportionally and is NEVER cropped. Configurable via `image_max_height`. */
	max-height: var( --wookit-hero-img-maxh, 560px );
	vertical-align: bottom;
}

/* `height` attribute = a MINIMUM height only. The slide still grows for taller
   images (image stays height:auto), so the image is ALWAYS shown in full and is
   never cropped. JS then fits the viewport to the slide. */
.wookit-hero--fixed .wookit-hero__slide { min-height: var( --wookit-hero-h, 520px ); }

/* ── Text card (dark translucent panel) ─────────────────────────────────── */
.wookit-hero__card {
	position: relative;
	background: var( --wookit-hero-cardbg, rgba( 20, 22, 28, 0.55 ) );
	-webkit-backdrop-filter: blur( 18px ) saturate( 1.4 );
	backdrop-filter: blur( 18px ) saturate( 1.4 );
	border: 1px solid rgba( 255, 255, 255, 0.10 );
	border-radius: var( --wookit-radius-lg, 14px );
	padding: clamp( 28px, 6%, 56px );
	color: #fff;
	/* Desktop: text + button left-aligned (centered only when stacked, below). */
	text-align: left;
	box-shadow:
		0 24px 60px -28px rgba( 0, 0, 0, 0.6 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.14 );
}
.wookit-hero--align-center .wookit-hero__card { text-align: center; }

.wookit-hero__title {
	margin: 0 0 18px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: clamp( 1.6rem, 1.1rem + 2.3vw, 3.4rem ) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: #fff !important;
}
/* Short accent rule under the title for editorial hierarchy. */
.wookit-hero__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 16px 0 0;
	border-radius: 2px;
	background: var( --wookit-accent, #6366f1 );
}
.wookit-hero--align-center .wookit-hero__card .wookit-hero__title::after {
	margin-left: auto;
	margin-right: auto;
}

.wookit-hero__subtitle {
	margin: 0 0 26px !important;
	padding: 0 !important;
	max-width: 46ch;
	font-family: inherit !important;
	font-size: clamp( 0.95rem, 0.9rem + 0.4vw, 1.2rem ) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba( 255, 255, 255, 0.82 ) !important;
}
.wookit-hero--align-center .wookit-hero__card .wookit-hero__subtitle {
	margin-left: auto;
	margin-right: auto;
}

/* Scoped under .wookit-hero for extra specificity so a theme's generic `a`
   color rule can't repaint the CTA text to match its background. */
.wookit-hero .wookit-hero__btn,
.wookit-hero .wookit-hero__btn:link,
.wookit-hero .wookit-hero__btn:hover,
.wookit-hero .wookit-hero__btn:focus,
.wookit-hero .wookit-hero__btn:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 14px 28px !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	color: var( --wookit-accent-fg, #fff ) !important;
	background: var( --wookit-accent, #6366f1 ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.wookit-hero .wookit-hero__btn:hover {
	background: var( --wookit-accent-hover, var( --wookit-accent, #6366f1 ) ) !important;
}
/* Arrow that nudges forward on hover. */
.wookit-hero .wookit-hero__btn::after {
	content: "→";
	font-size: 1.05em;
	line-height: 1;
	transition: transform 0.2s ease;
}
.wookit-hero .wookit-hero__btn:hover::after { transform: translateX( 3px ); }

/* Fade + rise the active card on every slide change. The delay (~0.45s) holds
   it hidden until the horizontal track transition (0.5s) has settled, so the
   entrance is fully visible instead of happening mid-slide. Re-fires whenever
   aria-hidden flips back to false (i.e. each time the slide becomes active).
   (No overflow-clip here — that would cut the card's glass shadow.) */
.wookit-hero__slide[aria-hidden="false"] .wookit-hero__card {
	animation: wookit-hero-up 0.6s cubic-bezier( 0.16, 0.84, 0.24, 1 ) 0.45s both;
}
@keyframes wookit-hero-up {
	from { opacity: 0; transform: translateY( 48px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */
/* Bare icon-only arrows — no button chrome (no bg/border/box). */
.wookit-hero__nav,
.wookit-hero__nav:hover,
.wookit-hero__nav:focus {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px !important;
	color: var( --wookit-text, #0f172a ) !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.wookit-hero__nav:hover { opacity: 0.6; }
.wookit-hero__nav svg { width: 30px; height: 30px; }
.wookit-hero__nav--prev { left: 4px; }
.wookit-hero__nav--next { right: 4px; }

/* ── Dots ───────────────────────────────────────────────────────────────── */
.wookit-hero__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	display: flex;
	gap: 8px;
}
.wookit-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba( 255, 255, 255, 0.6 ) !important;
	box-shadow: 0 0 0 1px rgba( 15, 23, 42, 0.15 );
	cursor: pointer !important;
	transition: background-color 0.15s ease, width 0.15s ease !important;
}
.wookit-hero__dot.is-active {
	width: 24px;
	background: var( --wookit-accent, #6366f1 ) !important;
}

/* ── Responsive: stack the columns ───────────────────────────────────────
   Switch to the stacked (text → image) layout early — at the tablet width — so
   the image is always shown full-width (never squeezed into a narrow side-by-
   side column). Side-by-side is reserved for wide screens where it fits. */
@media ( max-width: 1024px ) {
	/* Full-bleed image on mobile; the card insets itself. */
	.wookit-hero { padding: 0; }

	.wookit-hero__slide,
	.wookit-hero--img-left .wookit-hero__slide {
		/* column (DOM order) → text box FIRST (top), image below it. */
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 0;
		/* Let the slide grow as tall as the content needs — never clip. */
		height: auto !important;
	}
	.wookit-hero__text {
		flex: 0 0 auto;
		width: 90%;
		align-self: center;
		/* Centered, breathing room above/below, and reset the desktop overlap. */
		margin: 18px auto;
	}
	.wookit-hero__subtitle { max-width: 100%; }
	.wookit-hero__media {
		flex: 0 0 auto;
		width: 100%;
		align-self: stretch;
		/* Pin the image to the bottom of the slide — any extra height goes above
		   it (between the text box and the image), never below. */
		margin-top: auto;
	}
	/* Centered text + button when stacked (incl. the accent rule under the title). */
	.wookit-hero__card { text-align: center; }
	.wookit-hero__title::after { margin-left: auto; margin-right: auto; }
	/* No fixed-height cover on mobile — image keeps its natural height. */
	.wookit-hero--fixed .wookit-hero__img { height: auto; object-fit: initial; }
	.wookit-hero__nav { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wookit-hero__track { transition: none; }
	.wookit-hero__slide[aria-hidden="false"] .wookit-hero__card { animation: none; }
	.wookit-hero__btn:hover { transform: none; }
}