/* ==========================================================================
   HIMPEL About slider — boxed tinted section, heading above a looping rail
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-aslider (plus the two helper classes the
   overlap effect needs). Nothing targets the theme or any global element.

   The rail is a transform-driven track rather than the CSS scroll-snap used
   by the testimonial carousel: this one has to loop endlessly and advance on
   a timer, and a snap rail cannot be moved from one end to the other without
   the jump being visible as a scroll.
   ========================================================================== */

.himpel-aslider {
	/* Brand tokens, overridden inline when global colours are bound. */
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	/* Sits above the pinned hero so it can scroll over the top of it. */
	z-index: 2;
	width: 100%;
	background-color: var(--hsl-bg, var(--himpel-secondary));
	box-sizing: border-box;
}

.himpel-aslider *,
.himpel-aslider *::before,
.himpel-aslider *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Overlap reveal
   Duplicated from himpel-products.css on purpose: the About page never loads
   that stylesheet, and the declarations are identical, so a page carrying
   both sections is unaffected.
   -------------------------------------------------------------------------- */
.himpel-overlap-wrap {
	position: relative;
}

.himpel-sticky-host {
	position: sticky;
	top: var(--himpel-sticky-top, 0px);
	z-index: 0;
}

/*
 * himpel-overlap.js re-parents both branches into this wrapper as a plain
 * block, which becomes a direct child of Elementor's flex container. A flex
 * item's default min-width is its content's own minimum, not 0 — Elementor
 * gives its own .elementor-widget children min-width: 0 to prevent exactly
 * this, but a script-inserted wrapper carries no such class. Left alone, the
 * wrapper stayed at its intrinsic desktop width and sat off screen to the
 * right on any viewport narrower than that.
 *
 * .himpel-sticky-host deliberately carries none of this — see himpel-overlap.css.
 */
.himpel-overlap-wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Boxed shell
   -------------------------------------------------------------------------- */
.himpel-aslider__inner {
	width: 100%;
	max-width: var(--hsl-max, 1340px);
	margin: 0 auto;
	padding: var(--hsl-py-d, 80px) var(--hsl-px-d, 40px);
}

/* --------------------------------------------------------------------------
   Heading block
   -------------------------------------------------------------------------- */
.himpel-aslider__head {
	margin-bottom: var(--hsl-head-gap, 48px);
	text-align: left;
}

/* The <h2> is the pill itself. */
.himpel-aslider__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--hsl-gap-eyebrow, 22px);
	padding: 8px 18px;
	border: 1px solid var(--hsl-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;
	color: var(--hsl-pill-color, var(--himpel-dark));
	font-size: var(--hsl-eyebrow-d, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.himpel-aslider__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: var(--himpel-primary);
	flex: 0 0 auto;
}

.himpel-aslider__title {
	margin: 0;
	padding: 0;
	max-width: var(--hsl-title-mw, 20ch);
	/* Inherits the Liquid theme's H3 typography; only scale and colour here. */
	color: var(--hsl-title-color, var(--himpel-dark));
	font-size: var(--hsl-title-d, 42px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
}

/* --------------------------------------------------------------------------
   The rail
   -------------------------------------------------------------------------- */
.himpel-aslider__viewport {
	/*
	 * Clips the cards waiting off to either side. The card shadow is soft and
	 * close, so nothing of it is lost at the cut.
	 */
	overflow: hidden;
	/* Sits above the section's own stacking so the shadow is not flattened. */
	position: relative;
}

.himpel-aslider__track {
	display: flex;
	gap: var(--hsl-gap, 24px);
	/* The script writes the transform; this is only how it gets there. */
	will-change: transform;
	transition: transform var(--hsl-speed, 0.62s) cubic-bezier(0.4, 0.02, 0.2, 1);
}

/* Set by the script for the frame in which the loop jumps from one end of the
   rail to the other, so that move is not animated and cannot be seen. */
.himpel-aslider__track.is-jumping {
	transition: none;
}

.himpel-aslider__slide {
	flex: 0 0
		calc(
			(100% - (var(--hsl-per, 2) - 1) * var(--hsl-gap, 24px)) /
				var(--hsl-per, 2)
		);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--hsl-slide-gap, 24px);
	padding: var(--hsl-slide-pad, 20px);
	border: 1px solid var(--hsl-slide-border, rgba(18, 18, 18, 0.1));
	border-radius: var(--hsl-radius, 18px);
	background-color: var(--hsl-card-bg, var(--himpel-white));
	/*
	 * The negative spread is what keeps the gap between cards clean. A plain
	 * blur reaches further sideways than the 24px between two cards, so the two
	 * shadows met in the middle and stacked into a visible dark stripe.
	 * Pulling the shadow in by more than half the blur leaves it with no
	 * horizontal reach at all — it only grounds the card downwards.
	 */
	box-shadow: var(--hsl-shadow, 0 14px 26px -18px rgba(18, 18, 18, 0.5));
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* The card picks up the brand colour under the pointer. */
.himpel-aslider__slide:hover {
	border-color: var(--himpel-primary);
	box-shadow: var(--hsl-shadow-hover, 0 20px 32px -20px rgba(18, 18, 18, 0.55));
}

/* --- Card top: thumbnail left, number right --- */
.himpel-aslider__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.himpel-aslider__thumb {
	flex: 0 0 var(--hsl-thumb-w, 260px);
	height: var(--hsl-thumb-h, 184px);
	border-radius: var(--hsl-thumb-radius, 12px);
	background-color: var(--himpel-secondary);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.himpel-aslider__num {
	flex: 0 0 auto;
	/* Tabular figures so 01 and 02 occupy the same width and the number does
	   not shift between cards. */
	font-variant-numeric: tabular-nums;
	font-size: var(--hsl-num-d, 34px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.5px;
	/* Brand green rather than a grey: it is the largest mark on the card, so
	   it is what carries the colour, and it matches the fill on the line. */
	color: var(--hsl-num-color, var(--himpel-primary));
}

/* --- Card body --- */

/* A hairline across the card, separating the image and number above from the
   copy below. Full width at 1px rather than 3px: a heavier rule running the
   whole way across stops reading as a divider and starts reading as a bar. */
.himpel-aslider__body::before {
	content: "";
	display: block;
	width: var(--hsl-accent-w, 100%);
	height: var(--hsl-accent-h, 1px);
	margin-bottom: var(--hsl-accent-gap, 16px);
	background-color: var(--hsl-accent-color, rgba(18, 18, 18, 0.14));
}

.himpel-aslider__stitle {
	margin: 0 0 10px;
	padding: 0;
	color: var(--hsl-stitle-color, var(--himpel-dark));
	font-size: var(--hsl-stitle-d, 19px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.2px;
}

.himpel-aslider__text {
	margin: 0;
	padding: 0;
	color: var(--hsl-text-color, rgba(18, 18, 18, 0.7));
	font-size: var(--hsl-text-d, 15px);
	font-weight: 400;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Navigation row — progress line left, arrows right
   -------------------------------------------------------------------------- */
.himpel-aslider__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: var(--hsl-nav-gap, 32px);
}

/*
 * One rule with a fill that slides along it, rather than a row of segments.
 * The fill is sized and positioned by the script from the rail's own position,
 * so it advances by exactly one card-width every time the rail does — which a
 * fixed set of segments cannot do unless there happens to be one per resting
 * position.
 */
.himpel-aslider__line {
	position: relative;
	width: var(--hsl-line-w, 220px);
	max-width: 55%;
	height: var(--hsl-line-h, 3px);
	border-radius: 2px;
	background-color: var(--hsl-line-color, rgba(18, 18, 18, 0.16));
	overflow: hidden;
}

.himpel-aslider__line-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	/* Width and offset are written by the script; these are the fallbacks for
	   the moment before it runs. */
	width: 100%;
	border-radius: 2px;
	background-color: var(--himpel-primary);
	transition: transform var(--hsl-speed, 0.62s) cubic-bezier(0.4, 0.02, 0.2, 1);
}

.himpel-aslider__btns {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}

.himpel-aslider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hsl-btn-size, 46px);
	height: var(--hsl-btn-size, 46px);
	padding: 0;
	border: 1px solid var(--hsl-btn-border, rgba(18, 18, 18, 0.22));
	border-radius: 50%;
	background-color: transparent;
	color: var(--himpel-dark);
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease,
		color 0.25s ease, transform 0.25s ease;
}

.himpel-aslider__btn svg {
	display: block;
	width: 40%;
	height: 40%;
}

/* The forward button carries the accent, so the natural next move reads first. */
.himpel-aslider__btn--next {
	background-color: var(--himpel-primary);
	border-color: var(--himpel-primary);
	color: var(--himpel-white);
}

.himpel-aslider__btn:hover {
	transform: translateY(-2px);
}

.himpel-aslider__btn--prev:hover {
	background-color: var(--himpel-primary);
	border-color: var(--himpel-primary);
	color: var(--himpel-white);
}

.himpel-aslider__btn--next:hover {
	background-color: var(--himpel-primary-dark);
	border-color: var(--himpel-primary-dark);
}

.himpel-aslider__btn:focus-visible {
	outline: 2px solid var(--himpel-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   Scroll-in animation
   .is-revealing is printed server-side so the pre-animation state exists in
   the first paint; the script removes it once GSAP has seeded the tween.
   ========================================================================== */
.himpel-aslider.is-revealing .himpel-aslider__eyebrow,
.himpel-aslider.is-revealing .himpel-aslider__title,
.himpel-aslider.is-revealing .himpel-aslider__slide,
.himpel-aslider.is-revealing .himpel-aslider__nav {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-aslider.is-revealing .himpel-aslider__eyebrow,
	.himpel-aslider.is-revealing .himpel-aslider__title,
	.himpel-aslider.is-revealing .himpel-aslider__slide,
	.himpel-aslider.is-revealing .himpel-aslider__nav {
		opacity: 1;
	}

	/* The rail still works; it just arrives instead of sliding. Autoplay is
	   switched off in the script for the same preference. */
	.himpel-aslider__track,
	.himpel-aslider__btn,
	.himpel-aslider__line-fill {
		transition: none;
	}

	.himpel-aslider__btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   Responsive — breakpoints mirror Elementor's defaults
   ========================================================================== */

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-aslider__inner {
		padding: var(--hsl-py-t, 60px) var(--hsl-px-t, 20px);
	}

	.himpel-aslider__title {
		font-size: var(--hsl-title-t, 32px);
		max-width: var(--hsl-title-mw-t, 24ch);
	}

	.himpel-aslider__head {
		margin-bottom: var(--hsl-head-gap-t, 40px);
	}

	/* The desktop thumbnail is too wide for a card at this width: at 768px it
	   would leave barely enough room beside it for the number. */
	.himpel-aslider__thumb {
		flex-basis: var(--hsl-thumb-w-t, 200px);
		height: var(--hsl-thumb-h-t, 142px);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-aslider__inner {
		padding: var(--hsl-py-m, 40px) var(--hsl-px-m, 15px);
	}

	.himpel-aslider__head {
		margin-bottom: var(--hsl-head-gap-m, 30px);
	}

	.himpel-aslider__eyebrow {
		margin-bottom: var(--hsl-gap-eyebrow-m, 16px);
		font-size: var(--hsl-eyebrow-m, 13px);
	}

	.himpel-aslider__title {
		font-size: var(--hsl-title-m, 26px);
		max-width: 100%;
		line-height: 1.2;
	}

	/* One whole card per screen. */
	.himpel-aslider__track {
		gap: var(--hsl-gap-m, 14px);
	}

	.himpel-aslider__slide {
		flex-basis: calc(
			(100% - (var(--hsl-per-m, 1) - 1) * var(--hsl-gap-m, 14px)) /
				var(--hsl-per-m, 1)
		);
		gap: var(--hsl-slide-gap-m, 18px);
		padding: var(--hsl-slide-pad-m, 16px);
		border-radius: var(--hsl-radius-m, 14px);
	}

	/*
	 * One card fills the screen here, so the image can take a much larger share
	 * of it than it does beside a second card on desktop.
	 *
	 * Allowed to shrink, unlike at the wider breakpoints: on a 320px phone the
	 * card has only ~258px of room inside its padding, and a fixed 230px image
	 * plus the number would run past the edge. Growing up to the cap and
	 * shrinking below it keeps the pair on one line at any width, and
	 * background-size: cover re-crops rather than squashing the photo.
	 */
	.himpel-aslider__thumb {
		flex: 1 1 var(--hsl-thumb-w-m, 230px);
		max-width: var(--hsl-thumb-w-m, 230px);
		height: var(--hsl-thumb-h-m, 162px);
	}

	.himpel-aslider__num {
		font-size: var(--hsl-num-m, 26px);
	}

	.himpel-aslider__stitle {
		font-size: var(--hsl-stitle-m, 17px);
	}

	.himpel-aslider__text {
		font-size: var(--hsl-text-m, 14px);
	}

	.himpel-aslider__nav {
		margin-top: var(--hsl-nav-gap-m, 24px);
	}

	.himpel-aslider__line {
		width: var(--hsl-line-w-m, 130px);
	}

	.himpel-aslider__btn {
		width: var(--hsl-btn-size-m, 40px);
		height: var(--hsl-btn-size-m, 40px);
	}
}

/* Elementor editor: keep the sticky trick out of the preview canvas, where
   the hero and this section are edited in isolation. */
.elementor-editor-active .himpel-sticky-host {
	position: relative;
}