/* ==========================================================================
   BUDDIES — MAP CONSENT GATE
   Replaces the design's dashed "Platzhalter · Google-Maps-Embed" boxes, so it
   inherits the same reserved height and never shifts the layout.
   ========================================================================== */

.bwm-host {
	display: grid;
	gap: 20px;
	margin-top: 28px;
}
/* The Standorte overview asks for both locations. A single keyless embed can
   only carry one marker, so that placeholder becomes two panes side by side.
   A genuine two-marker map needs either the Maps JavaScript API (API key plus
   a billing account) or a Google My Maps link — a client decision, not ours. */
.bwm-host--pair { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.bwm-pane {
	position: relative;
	min-height: 380px;
	border-radius: var(--radius-lg, 18px);
	overflow: hidden;
	background: var(--sand-100, #F7F2ED);
	border: 1px solid var(--sand-300, #E2D7CB);
}
.bwm-host--pair .bwm-pane { min-height: 320px; }

/* --- The gate ------------------------------------------------------------ */

.bwm-gate {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 32px 28px;

	/* A faint street-grid suggestion, drawn in CSS. Enough to read as "map"
	   without shipping a screenshot of Google's copyrighted tiles. */
	background-color: var(--sand-100, #F7F2ED);
	background-image:
		linear-gradient(var(--sand-300, #E2D7CB) 1px, transparent 1px),
		linear-gradient(90deg, var(--sand-300, #E2D7CB) 1px, transparent 1px);
	background-size: 44px 44px, 44px 44px;
	background-position: -1px -1px, -1px -1px;
}
.bwm-gate::after {
	/* A single pin, so the empty state still reads as a location. */
	content: "";
	position: absolute;
	top: 26px; right: 30px;
	width: 14px; height: 14px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--blue-500, #2660FF);
	opacity: .35;
}

.bwm-gate-title {
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--black, #000);
	margin: 0;
}
.bwm-gate-addr {
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	font-size: 16px;
	color: var(--ink-600, #3D3D3D);
	margin: 0 0 6px;
}
.bwm-gate-note {
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-400, #6E6A66);
	max-width: 42ch;
	margin: 6px 0 0;
}

.bwm-btn {
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--black, #000);
	background: var(--gold-500, #EFAB00);
	border: 2px solid var(--gold-500, #EFAB00);
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}
.bwm-btn:hover {
	background: var(--gold-600, #D69A00);
	border-color: var(--gold-600, #D69A00);
}

.bwm-link {
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	font-size: 14px;
	color: var(--text-link, #2660FF);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- The loaded map ------------------------------------------------------ */

.bwm-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
	position: absolute;
	inset: 0;
}

.bwm-reset {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	font-size: 12px;
	color: var(--ink-600, #3D3D3D);
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--sand-300, #E2D7CB);
	border-radius: 999px;
	padding: 6px 13px;
	cursor: pointer;
}
.bwm-reset:hover { background: #fff; color: var(--black, #000); }

.bwm-pane :focus-visible,
.bwm-btn:focus-visible,
.bwm-reset:focus-visible {
	outline: 3px solid var(--focus-ring, #2660FF);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bwm-btn, .bwm-reset { transition: none; }
}