/* ==========================================================================
   HIMPEL Testimonials — boxed section with a 2.5-up carousel
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-test. Nothing targets the theme or any
   global element.

   The carousel is native CSS scroll-snap rather than a slider library: it
   gets momentum scrolling and swipe on touch for free, stays keyboard and
   screen-reader accessible, and adds no third-party JavaScript. The buttons
   only call scrollBy().
   ========================================================================== */

.himpel-test {
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	z-index: 2;
	width: 100%;
	background-color: var(--ht-bg, var(--himpel-secondary));
	box-sizing: border-box;
}

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

.himpel-test__inner {
	width: 100%;
	max-width: var(--ht-max, 1340px);
	margin: 0 auto;
	padding: var(--ht-py-d, 80px) var(--ht-px-d, 40px);
}

.himpel-test__grid {
	display: grid;
	grid-template-columns: var(--ht-cols, 0.8fr 1.5fr);
	gap: var(--ht-col-gap, 48px);
	align-items: start;
}

/* --------------------------------------------------------------------------
   Left — pill + heading
   -------------------------------------------------------------------------- */
.himpel-test__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--ht-gap-eyebrow, 22px);
	padding: 8px 18px;
	border: 1px solid var(--ht-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;
	color: var(--ht-pill-color, var(--himpel-dark));
	font-size: var(--ht-eyebrow-d, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

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

.himpel-test__title {
	margin: 0;
	padding: 0;
	/* Inherits the Liquid theme's H3 typography; only scale is ours. */
	color: var(--ht-title-color, var(--himpel-dark));
	font-size: var(--ht-title-d, 42px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Right — the track
   -------------------------------------------------------------------------- */
.himpel-test__viewport {
	position: relative;
	/*
	 * A grid item's automatic minimum size is its content's minimum size, and
	 * the rail's slides do not shrink — so without this the column inflates to
	 * fit a whole slide instead of clamping to the grid, and the card runs off
	 * the side of the screen. min-width: 0 lets the column win.
	 */
	min-width: 0;
	/* Widens the scrollport past the boxed container so the rail keeps going
	   instead of stopping at the section edge. The amount is set per
	   breakpoint below; on desktop the script measures it. */
	margin-right: calc(var(--ht-bleed, 0px) * -1);
}

.himpel-test__track {
	display: flex;
	min-width: 0;
	gap: var(--ht-gap, 20px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-right: var(--ht-tail, var(--ht-bleed, 0px));
	/* The rail is driven by the buttons and by swiping, so the bar itself is
	   redundant and would sit awkwardly under the cards. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.himpel-test__track::-webkit-scrollbar {
	display: none;
}

/*
 * Width for "N slides visible", gaps accounted for. --ht-visible is a plain
 * number so it can be a fraction: 2.5 leaves half a card showing at the edge,
 * which is what signals there is more to swipe.
 */
.himpel-test__slide {
	/*
	 * --ht-slide-w is a pixel width written by the script on desktop. The card
	 * has to keep the width it had before the rail was widened, or the bleed
	 * would simply make every card bigger instead of showing more of them.
	 */
	flex: 0 0
		var(
			--ht-slide-w,
			calc(
				(100% - (var(--ht-visible, 2.5) - 1) * var(--ht-gap, 20px)) /
					var(--ht-visible, 2.5)
			)
		);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--ht-slide-h, 360px);
	padding: var(--ht-slide-pad, 26px);
	border-radius: var(--ht-radius, 16px);
	background-color: var(--ht-slide-bg, var(--himpel-white));
}

/* --- Quote mark --- */
.himpel-test__quote {
	display: block;
	flex: 0 0 auto;
	width: var(--ht-quote, 34px);
	height: var(--ht-quote, 34px);
	margin-bottom: 18px;
	/* The mark is a mask rather than an <img>, so it takes the brand colour
	   instead of whatever colour the source file happens to be drawn in. */
	background-color: var(--ht-quote-color, var(--himpel-primary));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Without mask support the element would paint as a solid green square, so
   drop the fill and leave nothing rather than a block. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.himpel-test__quote {
		background-color: transparent;
	}
}

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

/* --- Name, above a hairline --- */
.himpel-test__foot {
	margin-top: auto;
	padding-top: var(--ht-rule-gap, 18px);
	border-top: 1px solid var(--ht-rule, rgba(18, 18, 18, 0.14));
}

.himpel-test__name {
	margin: 0;
	padding: 0;
	color: var(--ht-name-color, var(--himpel-dark));
	font-size: var(--ht-name-d, 17px);
	font-weight: 600;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.himpel-test__nav {
	display: flex;
	gap: 12px;
	margin-top: var(--ht-nav-gap, 26px);
}

.himpel-test__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ht-btn-size, 46px);
	height: var(--ht-btn-size, 46px);
	padding: 0;
	border: 1px solid var(--ht-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, opacity 0.25s ease, transform 0.25s ease;
}

.himpel-test__btn svg {
	display: block;
	width: 40%;
	height: 40%;
	stroke: currentColor;
	fill: none;
}

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

.himpel-test__btn:hover:not([disabled]) {
	transform: translateY(-2px);
}

.himpel-test__btn--prev:hover:not([disabled]) {
	background-color: var(--himpel-dark);
	border-color: var(--himpel-dark);
	color: var(--himpel-white);
}

.himpel-test__btn--next:hover:not([disabled]) {
	background-color: var(--himpel-primary-dark);
	border-color: var(--himpel-primary-dark);
}

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

.himpel-test__btn[disabled] {
	opacity: 0.32;
	cursor: default;
	transform: none;
}

/* ==========================================================================
   Scroll-in animation
   ========================================================================== */
.himpel-test.is-revealing .himpel-test__eyebrow,
.himpel-test.is-revealing .himpel-test__title,
.himpel-test.is-revealing .himpel-test__slide,
.himpel-test.is-revealing .himpel-test__nav {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-test.is-revealing .himpel-test__eyebrow,
	.himpel-test.is-revealing .himpel-test__title,
	.himpel-test.is-revealing .himpel-test__slide,
	.himpel-test.is-revealing .himpel-test__nav {
		opacity: 1;
	}

	.himpel-test__track {
		scroll-behavior: auto;
	}

	.himpel-test__btn {
		transition: none;
	}

	.himpel-test__btn:hover:not([disabled]) {
		transform: none;
	}
}

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

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

	.himpel-test__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ht-col-gap-t, 32px);
	}

	.himpel-test__title {
		font-size: var(--ht-title-t, 34px);
		max-width: 22ch;
	}

	/* Fewer cards in view, so each one stays readable rather than shrinking
	   the copy to fit. The half card still shows there is more. */
	.himpel-test__slide {
		flex-basis: calc(
			(100% - (var(--ht-visible-t, 1.8) - 1) * var(--ht-gap, 20px)) /
				var(--ht-visible-t, 1.8)
		);
		min-height: var(--ht-slide-h-t, 320px);
	}

	/* Cards run to the section edge, which reads as a rail rather than a
	   box that happens to be cut off. */
	.himpel-test__viewport {
		--ht-bleed: var(--ht-px-t, 20px);
	}
}

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

	.himpel-test__grid {
		gap: var(--ht-col-gap-m, 26px);
	}

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

	.himpel-test__title {
		font-size: var(--ht-title-m, 27px);
		max-width: 100%;
	}

	/* One whole card per screen: at this width a partial second card leaves
	   too little of either to read. */
	.himpel-test__slide {
		flex-basis: calc(
			(100% - (var(--ht-visible-m, 1) - 1) * var(--ht-gap-m, 14px)) /
				var(--ht-visible-m, 1)
		);
		min-height: var(--ht-slide-h-m, 300px);
		padding: var(--ht-slide-pad-m, 20px);
		gap: 18px;
	}

	.himpel-test__track {
		gap: var(--ht-gap-m, 14px);
	}

	/* No peeking card to run to the screen edge, so the bleed would only add
	   dead scroll space after the last slide. */
	.himpel-test__viewport {
		--ht-bleed: 0px;
	}

	.himpel-test__quote {
		width: var(--ht-quote-m, 28px);
		height: var(--ht-quote-m, 28px);
		margin-bottom: 14px;
	}

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

	.himpel-test__name {
		font-size: var(--ht-name-m, 16px);
	}

	.himpel-test__nav {
		margin-top: var(--ht-nav-gap-m, 20px);
	}

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