/* map.css — Section 15 (MAP SECTION) of MASTER_PROJECT.md.
 * Not one of the originally-stubbed files (Appendix O didn't list a
 * dedicated map.css) — added here since Map is its own component and
 * "organize styles by component" (Section 76) argues against bolting this
 * onto footer.css. Registered in functions.php's enqueue list.
 */

.ontop360-map {
	display: flex;
	flex-direction: column;
	gap: 24px; /* TODO: confirm against Figma */
}

.ontop360-map__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* TODO: confirm against Figma */
	border-radius: 16px; /* confirmed: "rounded container", exact radius not given */
	overflow: hidden; /* confirmed: 15.4 "do not crop the embedded map" refers to the map itself, not this wrapper */
}

.ontop360-map__frame iframe {
	width: 100%;
	height: 100%;
	display: block;
}

.ontop360-map__error {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	color: var(--color-text-muted);
	font-family: var(--font-primary);
	text-align: center;
	padding: 24px;
}

.ontop360-map__frame[data-map-failed] iframe {
	display: none;
}

.ontop360-map__frame[data-map-failed] .ontop360-map__error {
	display: flex;
}

/* .ontop360-map__route-btn uses the shared .btn-primary class (global.css)
 * for its look — this rule only adds the map-specific layout positioning.
 * Name/address/phone are shown once, in the Contacts section's left
 * column (front-page.php), not duplicated here. */
.ontop360-map__route-btn {
	align-self: flex-start; /* confirmed: 15.5 "Always visible" */
}