/*
 * The contact map frame and its click-to-load cover.
 * design/PAGE-STRUCTURE.md §6, DESIGN-SYSTEM.md §1.1 (map stripes) / §4.22.
 *
 * The frame keeps the prototype's geometry exactly -- 340px floor, 1px
 * rgba(255,255,255,0.12) border, the 45deg #1f1f1f / #232323 stripe pair -- but
 * what sat inside it was a Courier "MAPA -- vložiť Google Maps" note. Here the
 * stripes are the poster the real embed loads over.
 */

.sp-map {
	position: relative;
	display: flex;
	min-height: 340px;
	border: 1px solid var(--sp-line-strong);
	background: repeating-linear-gradient(
		45deg,
		var(--sp-stripe) 0 12px,
		var(--sp-surface) 12px 24px
	);
}

/* ---------------------------------------------------------------- cover */

.sp-map__cover {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	padding: var(--sp-10);
	text-align: center;
}

.sp-map__title {
	font-size: var(--sp-fs-xl);
}

.sp-map__address {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-md);
	text-transform: uppercase;
	color: var(--sp-text-60);
}

.sp-map__load {
	margin-top: var(--sp-2);
}

.sp-map__link {
	font-size: var(--sp-fs-xs);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-map__link:hover,
.sp-map__link:focus-visible {
	color: var(--sp-red);
}

/* §1.2: the map sub-note is 12px at the 0.5 ramp. */
.sp-map__note {
	margin: 0;
	max-width: 34ch;
	font-size: var(--sp-fs-micro);
	color: var(--sp-text-50);
}

/* ---------------------------------------------------------------- embed */

/* Fills the frame the cover was sized by, so the poster and the map agree. */
.sp-map__frame {
	display: block;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: 340px;
	border: 0;
}

/* The cover is removed from the flow, not just hidden, once the embed exists. */
.sp-map.is-loaded .sp-map__cover {
	display: none;
}