/* components/map-single/map-single.css */

.mvc-map-single__headline {
	text-align: center;
	margin-block-end: var(--space-8);
}

.mvc-map-single__canvas {
	width: 100%;
	height: var(--mvc-map-height, 420px);
	border-radius: var(--mvc-map-radius, var(--radius-lg));
	overflow: hidden;
	background-color: var(--color-surface-raised);
	box-shadow: var(--mvc-map-depth, var(--shadow-md));
	transition: box-shadow var(--transition-base, 200ms ease);
}

/* Preset heights (still supported for direct PHP callers using map_height) */
.mvc-map-single__canvas--sm   { --mvc-map-height: 300px; }
.mvc-map-single__canvas--md   { --mvc-map-height: 420px; }
.mvc-map-single__canvas--lg   { --mvc-map-height: 560px; }
.mvc-map-single__canvas--full { --mvc-map-height: 70vh; min-height: 420px; }

/* ── Depth modifiers ────────────────────────────────────────────────────── */
.mvc-map-single--depth-none    { --mvc-map-depth: none; }
.mvc-map-single--depth-soft    { --mvc-map-depth: var(--shadow-md); }
.mvc-map-single--depth-strong  { --mvc-map-depth: var(--shadow-lg); }
.mvc-map-single--depth-layered {
	--mvc-map-depth:
		0 2px 4px rgb(0 0 0 / 0.06),
		0 12px 24px -8px rgb(0 0 0 / 0.18),
		0 24px 48px -16px rgb(0 0 0 / 0.12);
}

/* ── Radius modifiers ───────────────────────────────────────────────────── */
.mvc-map-single--radius-none { --mvc-map-radius: 0; }
.mvc-map-single--radius-sm   { --mvc-map-radius: var(--radius-sm); }
.mvc-map-single--radius-md   { --mvc-map-radius: var(--radius-md); }
.mvc-map-single--radius-lg   { --mvc-map-radius: var(--radius-lg); }
.mvc-map-single--radius-xl   { --mvc-map-radius: var(--radius-xl); }

/* ── Width modifiers ────────────────────────────────────────────────────── */
/* Constrain canvas to a max-width inside the container and center it.
   Applies to the canvas AND the headline/address so they align with the map.
   --style-full-width override below resets these back to 100%. */
.mvc-map-single--width-wide   .mvc-map-single__canvas,
.mvc-map-single--width-wide   .mvc-map-single__headline,
.mvc-map-single--width-wide   .mvc-map-single__address   { max-width: 80%; margin-inline: auto; }
.mvc-map-single--width-medium .mvc-map-single__canvas,
.mvc-map-single--width-medium .mvc-map-single__headline,
.mvc-map-single--width-medium .mvc-map-single__address   { max-width: 65%; margin-inline: auto; }
.mvc-map-single--width-narrow .mvc-map-single__canvas,
.mvc-map-single--width-narrow .mvc-map-single__headline,
.mvc-map-single--width-narrow .mvc-map-single__address   { max-width: 50%; margin-inline: auto; }

@media (max-width: 767px) {
	.mvc-map-single--width-wide   .mvc-map-single__canvas,
	.mvc-map-single--width-medium .mvc-map-single__canvas,
	.mvc-map-single--width-narrow .mvc-map-single__canvas,
	.mvc-map-single--width-wide   .mvc-map-single__headline,
	.mvc-map-single--width-medium .mvc-map-single__headline,
	.mvc-map-single--width-narrow .mvc-map-single__headline,
	.mvc-map-single--width-wide   .mvc-map-single__address,
	.mvc-map-single--width-medium .mvc-map-single__address,
	.mvc-map-single--width-narrow .mvc-map-single__address { max-width: 100%; }
}

.mvc-map-single__address {
	margin-block-start: var(--space-4);
	font-style: normal;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
}

/* Leaflet marker override */
.mvc-map-marker {
	background: none;
	border: none;
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Full-width — map bleeds edge to edge, no container padding */
.mvc-map-single--style-full-width .mvc-container {
	max-width: 100%;
	padding-inline: 0;
}
.mvc-map-single--style-full-width .mvc-map-single__canvas,
.mvc-map-single--style-full-width .mvc-map-single__headline,
.mvc-map-single--style-full-width .mvc-map-single__address {
	max-width: 100%;
}
.mvc-map-single--style-full-width .mvc-map-single__canvas {
	--mvc-map-radius: 0;
	--mvc-map-depth: none;
}

/* Contained — standard container max-width, card-like border */
.mvc-map-single--style-contained .mvc-map-single__canvas {
	border: 1px solid var(--color-border);
}

/* Split NAP — map left, address/hours right */
.mvc-map-single--style-split-nap .mvc-container {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--space-8);
	align-items: start;
}
.mvc-map-single--style-split-nap .mvc-map-single__headline {
	grid-column: 1 / -1;
}
.mvc-map-single--style-split-nap .mvc-map-single__address {
	text-align: left;
	align-self: center;
	font-size: var(--text-base);
	color: var(--color-text);
}
@media (max-width: 767px) {
	.mvc-map-single--style-split-nap .mvc-container {
		grid-template-columns: 1fr;
	}
}