/* ==========================================================================
   HIMPEL Contact map — one boxed, full-width embedded map
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-cmap. Nothing targets the theme or any
   global element.
   ========================================================================== */

.himpel-cmap {
	--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(--hcm-bg, var(--himpel-white));
	box-sizing: border-box;
}

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

.himpel-cmap__inner {
	width: 100%;
	max-width: var(--hcm-max, 1340px);
	margin: 0 auto;
	padding: var(--hcm-pt-d, 0px) var(--hcm-px-d, 40px) var(--hcm-pb-d, 80px);
}

/*
 * The radius lives here rather than on the iframe. A cross-origin frame paints
 * its own content and will not reliably clip itself to a radius, so the
 * wrapper does the clipping instead.
 *
 * The tint underneath shows while the map is still loading — with loading
 * lazy, that gap is real, and an empty white rectangle would read as a hole in
 * the page rather than as something on its way.
 */
.himpel-cmap__frame {
	position: relative;
	height: var(--hcm-h, 480px);
	border-radius: var(--hcm-radius, 22px);
	background-color: var(--himpel-secondary);
	overflow: hidden;
}

/*
 * The embed ships with width and height attributes of its own; these override
 * them so the map fills the box at every width instead of sitting at 600x450.
 * display: block removes the inline-element baseline gap under the frame.
 */
.himpel-cmap__embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

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

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-cmap__inner {
		padding: var(--hcm-pt-t, 0px) var(--hcm-px-t, 20px) var(--hcm-pb-t, 60px);
	}

	.himpel-cmap__frame {
		height: var(--hcm-h-t, 400px);
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-cmap__inner {
		padding: var(--hcm-pt-m, 0px) var(--hcm-px-m, 15px) var(--hcm-pb-m, 40px);
	}

	.himpel-cmap__frame {
		height: var(--hcm-h-m, 300px);
		border-radius: var(--hcm-radius-m, 16px);
	}
}