/**
 * Destination Map widget styles.
 *
 * Figma reference:
 * https://www.figma.com/design/UFbyQSXqjJ3fkYXo3ORgO7/Wellenreiten-2026-Handoff-Ext--Copy-?node-id=70-13999
 *
 * 'Archivo' (Figma's heading font) is loaded as a dependency of this
 * stylesheet (see functions.php); body copy reuses the theme's
 * --font-family stack.
 */
.wrdm-section {
	--wrdm-heading-font: 'Archivo', var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrdm-body-font: var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrdm-text-primary: #171717;
	--wrdm-text-secondary: #404040;
	--wrdm-text-muted: #6b7280;
	--wrdm-border: #e5e5e5;
	--wrdm-brand: #0f4c81;
	--wrdm-radius: 16px;

	display: flex;
	align-items: flex-start;
	gap: 64px;
}

/* The map comes second in the markup, so it's the left-hand variant
   that needs reversing. */
.wrdm-section--map-left {
	flex-direction: row-reverse;
}

.wrdm-text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wrdm-heading-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wrdm-eyebrow {
	display: block;
	font: 600 18px/24px var(--wrdm-body-font);
	color: var(--wrdm-text-muted);
}

.wrdm-heading {
	margin: 0;
	font: 700 36px/44px var(--wrdm-heading-font);
	letter-spacing: -0.02em;
	color: var(--wrdm-text-primary);
}

.wrdm-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font: 400 18px/28px var(--wrdm-body-font);
	color: var(--wrdm-text-secondary);
}

.wrdm-body p {
	margin: 0;
}

/* The WYSIWYG editor often leaves a trailing empty <p></p>, which would
   still take a flex gap. */
.wrdm-body p:empty {
	display: none;
}

/* Figma "Image": 673×508, 0.5px border, 16px radius. */
.wrdm-map {
	position: relative;
	flex: 0 0 673px;
	width: 673px;
	max-width: 100%;
	aspect-ratio: 673 / 508;
	border: 0.5px solid var(--wrdm-border);
	border-radius: var(--wrdm-radius);
	overflow: hidden;
	background: #e5e7eb;
}

.wrdm-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wrdm-map__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: #e5e7eb;
	background-size: cover;
	background-position: center;
}

.wrdm-map__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 360px;
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	text-align: center;
}

.wrdm-map__notice {
	margin: 0;
	font: 400 14px/20px var(--wrdm-body-font);
	color: var(--wrdm-text-secondary);
}

/* Scoped with .wrdm-section so it out-specifies the Elementor Kit's
   global `button` / `button:hover` reset. */
.wrdm-section .wrdm-map__load {
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--wrdm-brand);
	color: #ffffff;
	font: 600 16px/24px var(--wrdm-body-font);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.wrdm-section .wrdm-map__load:hover,
.wrdm-section .wrdm-map__load:focus-visible {
	background: #0b3a63;
	color: #ffffff;
}

@media (max-width: 900px) {
	.wrdm-section,
	.wrdm-section--map-left {
		flex-direction: column;
		gap: 32px;
	}

	.wrdm-text {
		flex: none;
		width: 100%;
	}

	.wrdm-map {
		flex: none;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.wrdm-heading {
		font-size: 28px;
		line-height: 34px;
	}
}