/* ==========================================================================
   HIMPEL About intro — boxed white section, copy row above a wide image
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-aintro (plus the two helper classes the
   overlap effect needs). Nothing targets the theme or any global element.
   ========================================================================== */

.himpel-aintro {
	/* 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(--hai-bg, var(--himpel-white));
	box-sizing: border-box;
}

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

/* The scroll button focuses this section, and a focus ring around a whole
   page-width band is noise — the movement is the feedback. */
.himpel-aintro:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Overlap reveal
   The hero's own wrapper is made sticky by himpel-about-intro.js, so the hero
   holds still while this section scrolls up over it — and slides back down to
   uncover it on the way up. Sticky rather than a scroll handler: the browser
   drives it, so it is smooth, reverses for free, and costs no JS per frame.

   These two helpers are deliberate duplicates of the ones in
   himpel-products.css. The About page never loads that stylesheet, and the
   declarations are identical, so a page carrying both sections is unaffected.
   -------------------------------------------------------------------------- */

/* The generated wrapper spans the hero plus this section, giving the sticky
   hero both room to travel and a bottom edge to release at. */
.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-aintro__inner {
	width: 100%;
	max-width: var(--hai-max, 1340px);
	margin: 0 auto;
	padding: var(--hai-py-d, 80px) var(--hai-px-d, 40px);
}

/* --------------------------------------------------------------------------
   Copy row
   --------------------------------------------------------------------------
   Two explicit rows rather than a plain two-column flow: the pill belongs
   above the heading on the left, but the heading and the paragraph have to
   start on the same line as each other. Placing all three by hand is what
   gets the paragraph level with the heading instead of level with the pill.
   -------------------------------------------------------------------------- */
.himpel-aintro__head {
	display: grid;
	grid-template-columns: var(--hai-cols, 1fr 1fr);
	column-gap: var(--hai-col-gap, 48px);
	row-gap: var(--hai-row-gap, 20px);
	align-items: start;
}

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

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

.himpel-aintro__title {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	margin: 0;
	padding: 0;
	/* Inherits the Liquid theme's H3 typography; only scale and colour here. */
	color: var(--hai-title-color, var(--himpel-dark));
	font-size: var(--hai-title-d, 42px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
	text-wrap: balance;
}

.himpel-aintro__desc {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--hai-desc-color, rgba(18, 18, 18, 0.72));
	font-size: var(--hai-desc-d, 17px);
	font-weight: 400;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Image band
   -------------------------------------------------------------------------- */
.himpel-aintro__media {
	margin-top: var(--hai-media-gap, 56px);
	min-height: var(--hai-media-h, 420px);
	border-radius: var(--hai-radius, 20px);
	/* Shows through while the image loads, so the band never flashes white
	   against the white section and appears to jump into place. */
	background-color: var(--himpel-secondary);
	background-position: var(--hai-media-pos, center center);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

/* ==========================================================================
   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-aintro.is-revealing .himpel-aintro__eyebrow,
.himpel-aintro.is-revealing .himpel-aintro__title,
.himpel-aintro.is-revealing .himpel-aintro__desc,
.himpel-aintro.is-revealing .himpel-aintro__media {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-aintro.is-revealing .himpel-aintro__eyebrow,
	.himpel-aintro.is-revealing .himpel-aintro__title,
	.himpel-aintro.is-revealing .himpel-aintro__desc,
	.himpel-aintro.is-revealing .himpel-aintro__media {
		opacity: 1;
	}
}

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

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

	.himpel-aintro__head {
		column-gap: var(--hai-col-gap-t, 32px);
	}

	.himpel-aintro__title {
		font-size: var(--hai-title-t, 32px);
	}

	.himpel-aintro__desc {
		font-size: var(--hai-desc-t, 16px);
		line-height: 1.7;
	}

	.himpel-aintro__media {
		margin-top: var(--hai-media-gap-t, 40px);
		min-height: var(--hai-media-h-t, 320px);
		background-position: var(--hai-media-pos-t, center center);
	}
}

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

	/*
	 * One column, and the hand-placed grid positions are released so the three
	 * blocks fall back into source order: pill, heading, paragraph. Leaving
	 * them placed would stack the heading and the paragraph on top of each
	 * other in row 2.
	 *
	 * 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.
	 */
	.himpel-aintro__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--hai-row-gap-m, 16px);
	}

	.himpel-aintro__eyebrow,
	.himpel-aintro__title,
	.himpel-aintro__desc {
		grid-column: auto;
		grid-row: auto;
	}

	.himpel-aintro__eyebrow {
		font-size: var(--hai-eyebrow-m, 13px);
	}

	.himpel-aintro__title {
		font-size: var(--hai-title-m, 26px);
		line-height: 1.2;
		text-wrap: normal;
	}

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

	.himpel-aintro__media {
		margin-top: var(--hai-media-gap-m, 30px);
		min-height: var(--hai-media-h-m, 240px);
		border-radius: var(--hai-radius-m, 14px);
		background-position: var(--hai-media-pos-m, center center);
	}
}

/* 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;
}