.plm-map {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	aspect-ratio: 790 / 595;
	background: linear-gradient(135deg, #3b445a, #29303d);
	color: #f7f2eb;
}

.plm-map .plm-map__art {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.plm-map .plm-map__marker {
	--plm-display-x: calc(var(--plm-x) + var(--plm-shift-x, 0px));
	--plm-display-y: calc(var(--plm-y) + var(--plm-shift-y, 0px));
}

.plm-map .plm-map__pin {
	position: absolute;
	z-index: 1;
	left: var(--plm-display-x);
	top: var(--plm-display-y);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	color: #241b11;
	cursor: pointer;
	list-style: none;
	font: 700 .72rem/1 system-ui, sans-serif;
}

.plm-map .plm-map__pin::-webkit-details-marker {
	display: none;
}

.plm-map .plm-map__pin::before,
.plm-map .plm-map__pin::after {
	content: "";
	pointer-events: none;
	grid-area: 1 / 1;
	border-radius: 50%;
}

.plm-map .plm-map__pin::before {
	width: clamp(1.125rem, 5cqw, 2.75rem);
	aspect-ratio: 1;
	background: rgba(184, 144, 96, .22);
}

.plm-map .plm-map__pin::after {
	width: clamp(.625rem, 2.5cqw, 1.375rem);
	aspect-ratio: 1;
	background: #b89060;
}

.plm-map .plm-map__pin span {
	z-index: 1;
	grid-area: 1 / 1;
}

.plm-map .plm-map__pin:has(span:not(:empty))::after {
	width: auto;
	min-width: 1.125rem;
	height: 1.125rem;
}

.plm-map .plm-map__pin:hover,
.plm-map .plm-map__pin:focus-visible,
.plm-map .plm-map__marker[open] > .plm-map__pin {
	z-index: 2;
}

.plm-map .plm-map__pin:focus-visible {
	outline: 2px solid #f7dfb5;
	outline-offset: -3px;
}

.plm-map .plm-map__panel {
	--plm-panel-width: min(16rem, calc(100% - 1rem));
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	left: clamp(.5rem, calc(var(--plm-display-x) - var(--plm-panel-width) / 2), calc(100% - var(--plm-panel-width) - .5rem));
	top: calc(var(--plm-display-y) + 1.5rem);
	width: var(--plm-panel-width);
	max-height: 14rem;
	overflow: auto;
	padding: .85rem 1rem;
	border: 1px solid #756752;
	border-radius: .5rem;
	background: #242a36;
	color: #f7f2eb;
	box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28);
	font: .9rem/1.4 system-ui, sans-serif;
	overflow-wrap: anywhere;
}

.plm-map [data-panel-above] > .plm-map__panel {
	top: auto;
	bottom: calc(100% - var(--plm-display-y) + 1.5rem);
}

.plm-map .plm-map__locations,
.plm-map .plm-map__state {
	margin: 0;
	padding: 0;
	list-style: none;
}

.plm-map .plm-map__locations li + li {
	margin-top: .625rem;
	padding-top: .625rem;
	border-top: 1px solid #525865;
}

.plm-map .plm-map__locations a {
	color: #f0c995;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.plm-map .plm-map__state {
	margin-bottom: .5rem;
	color: #f0c995;
	font-size: .8rem;
}

.plm-map .plm-map__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 1rem;
	text-align: center;
}

@container (max-width: 48rem) {
	.plm-map .plm-map__pin {
		width: max(1.25rem, 3.8cqw);
		height: max(1.25rem, 3.8cqw);
	}
}

.plm-map .plm-map__pin:is(:hover, :focus-visible)::after {
	background-color: #d94f3a;
}

@media (prefers-reduced-motion: no-preference) {
	.plm-map .plm-map__pin::after {
		transition: background-color .35s ease;
	}

	.plm-map .plm-map__pin:is(:hover, :focus-visible)::before {
		animation: plm-pin-pulse 1s ease-out infinite;
	}
}

@keyframes plm-pin-pulse {
	from {
		transform: scale(.8);
		opacity: 1;
	}
	to {
		background-color: #d94f3a;
		transform: scale(1.55);
		opacity: 0;
	}
}

.plm-directory {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--wp--style--block-gap, 2rem);
}

.plm-directory .prep-location-state + .prep-location-state {
	margin-block-start: 1.5rem;
}
