/* ==========================================================================
   HIMPEL About hero — solid brand panel, copy left, image right
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-ahero. Nothing targets the theme or any
   global element.

   This is a separate stylesheet from himpel-hero.css on purpose: the About
   page loads only this one, so it carries its own copies of the two shared
   pieces (the full-width breakout and the Elementor host reset) rather than
   depending on the home hero's stylesheet being present.
   ========================================================================== */

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

	position: relative;
	display: flex;
	width: 100%;
	min-height: var(--hah-h-d, 75vh);
	background-color: var(--hah-bg, var(--himpel-primary));
	box-sizing: border-box;
}

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

/* --------------------------------------------------------------------------
   Elementor wraps a shortcode in padded divs, which render as bands of theme
   background around the panel. The script tags only the wrappers holding this
   section, so nothing else on the page is touched.
   -------------------------------------------------------------------------- */
.himpel-ahero-host {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	border: 0 !important;
}

/* Elementor gives widgets a bottom margin from the kit's widget spacing. */
.himpel-ahero-host.elementor-widget {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Full-width breakout
   --himpel-vw is written by the script and equals the document width WITHOUT
   the scrollbar, which 100vw wrongly includes — using 100vw here would push
   the page into a horizontal scroll on every desktop browser. The 100vw
   fallback keeps the layout correct if JS never runs.
   -------------------------------------------------------------------------- */
.himpel-ahero--fullwidth {
	width: var(--himpel-vw, 100vw);
	max-width: var(--himpel-vw, 100vw);
	margin-left: calc(50% - var(--himpel-vw, 100vw) / 2);
	margin-right: calc(50% - var(--himpel-vw, 100vw) / 2);
}

/* --------------------------------------------------------------------------
   The boxed container inside the full-bleed panel
   -------------------------------------------------------------------------- */
.himpel-ahero__inner {
	display: flex;
	width: 100%;
	max-width: var(--hah-max, 1340px);
	margin: 0 auto;
	padding: var(--hah-py-d, 80px) var(--hah-px-d, 40px);
}

/*
 * The grid is the inner's only flex child, so it stretches to the full height
 * the section's min-height gives it. That is what lets the image column fill
 * the panel rather than shrinking to the height of the copy beside it.
 */
.himpel-ahero__grid {
	display: grid;
	grid-template-columns: var(--hah-cols, 1fr 1fr);
	gap: var(--hah-gap, 48px);
	align-items: stretch;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Left — title and description, centred against the image
   -------------------------------------------------------------------------- */
.himpel-ahero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* A grid item's automatic minimum size is its content's minimum size; a
	   long unbroken word would otherwise widen the column past its share. */
	min-width: 0;
	text-align: left;
}

.himpel-ahero__title {
	margin: 0 0 var(--hah-gap-title, 22px);
	padding: 0;
	/* Inherits the Liquid theme's H1 typography; only scale and colour here. */
	color: var(--hah-title-color, var(--himpel-white));
	font-size: var(--hah-title-d, 58px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.5px;
}

.himpel-ahero__desc {
	margin: 0;
	padding: 0;
	max-width: var(--hah-desc-mw, 46ch);
	color: var(--hah-desc-color, var(--himpel-secondary));
	font-size: var(--hah-desc-d, 18px);
	font-weight: 400;
	line-height: 1.7;
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Right — the image column
   -------------------------------------------------------------------------- */
.himpel-ahero__media {
	position: relative;
	min-height: var(--hah-media-h, 360px);
	border-radius: var(--hah-radius, 20px);
	/* Shows through while the image is still loading, so the column never
	   flashes as a light gap in the green panel. */
	background-color: var(--himpel-primary-dark);
	overflow: hidden;
}

.himpel-ahero__media-bg {
	position: absolute;
	inset: 0;
	background-position: var(--hah-media-pos, center center);
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * A dark wash across the foot of the image, so a white button reads against
 * whatever the photo happens to show down there. Fading to transparent rather
 * than a flat band keeps it from looking like a stripe laid over the picture.
 */
.himpel-ahero__scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--hah-scrim-h, 40%);
	background-image: linear-gradient(
		to top,
		var(--hah-scrim-color, #000000) 0%,
		transparent 100%
	);
	opacity: var(--hah-scrim-op, 0.55);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Scroll-down button, bottom-right of the image
   -------------------------------------------------------------------------- */
.himpel-ahero__scroll {
	position: absolute;
	right: var(--hah-scroll-inset, 24px);
	bottom: var(--hah-scroll-inset, 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hah-scroll-size, 58px);
	height: var(--hah-scroll-size, 58px);
	border-radius: 50%;
	background-color: var(--hah-scroll-bg, var(--himpel-white));
	color: var(--hah-scroll-color, var(--himpel-dark));
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.25s ease, background-color 0.25s ease,
		color 0.25s ease;
}

.himpel-ahero__scroll svg {
	display: block;
	width: 38%;
	height: 38%;
}

/* The script sets [hidden] when the anchor has nowhere to go on this page.
   Both of these carry a display that would otherwise override it. */
.himpel-ahero__scroll[hidden],
.himpel-ahero__scrim[hidden] {
	display: none;
}

/* Nudged down rather than up: the button points down, and moving with the
   arrow is what tells the reader what the click will do. */
.himpel-ahero__scroll:hover,
.himpel-ahero__scroll:focus-visible {
	transform: translateY(3px);
	background-color: var(--himpel-primary);
	color: var(--himpel-white);
}

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

/* ==========================================================================
   GSAP intro animation
   --------------------------------------------------------------------------
   .is-animating is printed server-side so the pre-animation state exists in
   the very first paint — no flash of finished text. The script removes it
   after gsap.set() has taken over, and a safety timer removes it if GSAP
   never loads, so the copy can never stay stuck invisible.
   ========================================================================== */
.himpel-ahero.is-animating .himpel-ahero__title,
.himpel-ahero.is-animating .himpel-ahero__desc,
.himpel-ahero.is-animating .himpel-ahero__media,
.himpel-ahero.is-animating .himpel-ahero__scroll {
	opacity: 0;
}

/* Per-word mask, created by the script when it splits the title. */
.himpel-ahero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* Room for descenders so the mask never clips a 'g' or 'y'. */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.himpel-ahero__word-in {
	display: inline-block;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-ahero.is-animating .himpel-ahero__title,
	.himpel-ahero.is-animating .himpel-ahero__desc,
	.himpel-ahero.is-animating .himpel-ahero__media,
	.himpel-ahero.is-animating .himpel-ahero__scroll {
		opacity: 1;
	}
}

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

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-ahero {
		min-height: var(--hah-h-t, 450px);
	}

	.himpel-ahero__inner {
		padding: var(--hah-py-t, 60px) var(--hah-px-t, 20px);
	}

	/* Two columns still, but tighter: at 450px tall the copy and the image
	   both stay readable side by side, and stacking would crowd them. */
	.himpel-ahero__grid {
		gap: var(--hah-gap-t, 28px);
	}

	.himpel-ahero__title {
		margin-bottom: var(--hah-gap-title-t, 16px);
		font-size: var(--hah-title-t, 40px);
	}

	.himpel-ahero__desc {
		font-size: var(--hah-desc-t, 16px);
		line-height: 1.6;
		max-width: 100%;
	}

	.himpel-ahero__media {
		min-height: var(--hah-media-h-t, 260px);
	}

	.himpel-ahero__media-bg {
		background-position: var(--hah-media-pos-t, center center);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-ahero {
		min-height: var(--hah-h-m, 600px);
	}

	.himpel-ahero__inner {
		padding: var(--hah-py-m, 40px) var(--hah-px-m, 15px);
	}

	/*
	 * One column here. minmax(0, 1fr) rather than 1fr: the plain keyword is
	 * minmax(auto, 1fr), and an auto floor lets a wide child push the column
	 * past the screen — the same trap that cut off the testimonial rail.
	 */
	.himpel-ahero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: var(--hah-gap-m, 26px);
	}

	.himpel-ahero__content {
		/* The row is sized by the copy now, so centring inside it does nothing
		   and only fights the gap. */
		justify-content: flex-start;
	}

	.himpel-ahero__title {
		margin-bottom: var(--hah-gap-title-m, 14px);
		font-size: var(--hah-title-m, 32px);
		line-height: 1.14;
		letter-spacing: -0.3px;
	}

	.himpel-ahero__desc {
		font-size: var(--hah-desc-m, 15px);
		line-height: 1.65;
	}

	.himpel-ahero__media {
		min-height: var(--hah-media-h-m, 240px);
		border-radius: var(--hah-radius-m, 14px);
	}

	.himpel-ahero__media-bg {
		background-position: var(--hah-media-pos-m, center center);
	}

	.himpel-ahero__scroll {
		right: var(--hah-scroll-inset-m, 16px);
		bottom: var(--hah-scroll-inset-m, 16px);
		width: var(--hah-scroll-size-m, 48px);
		height: var(--hah-scroll-size-m, 48px);
	}
}

/* --------------------------------------------------------------------------
   Elementor editor: the breakout must not escape the preview canvas.
   -------------------------------------------------------------------------- */
.elementor-editor-active .himpel-ahero--fullwidth,
.elementor-editor-preview .himpel-ahero--fullwidth {
	max-width: 100%;
}