.rc-clinic-map {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.rc-clinic-map__heading {
	margin: 0;
	font-size: var(--text-h4);
	line-height: var(--leading-tight);
	color: var(--color-text);
}

/*
 * The frame reserves its space with an aspect ratio rather than a fixed height,
 * so the map never causes layout shift as it loads and stays responsive on
 * narrow screens. The sunken background shows while the frame is still loading.
 */
.rc-clinic-map__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: var(--border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background-color: var(--color-surface-sunken);
}

.rc-clinic-map__embed {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.rc-clinic-map__caption {
	margin: 0;
}

/*
 * Compact variant — the footer's narrow column. No heading (the iframe title
 * labels the map), a tighter gap, and a taller-for-its-width frame so the map
 * still reads as a map when the column is only a few hundred pixels wide. A
 * 16:9 frame at that width collapses to a sliver; 4:3 keeps enough map visible.
 */
.rc-clinic-map--compact {
	gap: var(--space-3);
}

.rc-clinic-map--compact .rc-clinic-map__frame {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
}