.irota-directory-layout {
	display: grid;
	gap: var(--irota-space-6, 1.5rem);
}

.irota-directory-map {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--irota-space-4, 1rem);
	min-inline-size: 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	overflow: clip;
	border: 1px solid var(--irota-color-border, #d8e2da);
	border-radius: var(--irota-radius-xl, 1.5rem);
	background: var(--irota-color-surface, #fff);
	box-shadow: var(--irota-shadow-sm, 0 0.5rem 1.5rem rgba(23, 53, 38, 0.06));
}

.irota-directory-map__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--irota-space-4, 1rem);
}

.irota-directory-map__header h2,
.irota-directory-map__header p,
.irota-directory-map__help,
.irota-directory-map__attribution,
.irota-directory-map__empty p {
	margin: 0;
}

.irota-directory-map__header h2 {
	color: var(--irota-color-green, #00530f);
}

.irota-directory-map__eyebrow {
	color: var(--irota-color-teal, #006070);
	font-size: var(--irota-font-size-sm, 0.875rem);
	font-weight: var(--irota-font-weight-semibold, 600);
}

.irota-directory-map__count {
	flex: 0 0 auto;
	padding: var(--irota-space-2, 0.5rem) var(--irota-space-3, 0.75rem);
	border-radius: var(--irota-radius-pill, 999px);
	background: var(--irota-color-surface-tint, #f0f6f2);
	color: var(--irota-color-text-strong, #173526);
	font-size: var(--irota-font-size-sm, 0.875rem);
}

.irota-directory-map__canvas {
	position: relative;
	isolation: isolate;
	block-size: clamp(22rem, 42vw, 29rem);
	min-block-size: 20rem;
	overflow: hidden;
	border: 1px solid var(--irota-color-border-strong, #b7c9ba);
	border-radius: var(--irota-radius-lg, 1.125rem);
	background: var(--irota-color-surface-warm, #f7f6f0);
	direction: ltr;
}

.irota-directory-map__canvas:focus-visible,
.irota-directory-map__marker:focus-visible,
.irota-directory-map__list-link:focus-visible,
.irota-directory-card__map-link:focus-visible {
	outline: var(--irota-focus-ring, 2px solid #006070);
	outline-offset: 3px;
	box-shadow: var(--irota-focus-ring-shadow, 0 0 0 3px rgba(0, 96, 112, 0.22));
}

.irota-directory-map__tiles,
.irota-directory-map__markers {
	position: absolute;
	inset: 0;
}

.irota-directory-map__tile {
	position: absolute;
	inline-size: 256px;
	block-size: 256px;
	max-inline-size: none;
	user-select: none;
}

.irota-directory-map.has-tile-error .irota-directory-map__tiles {
	opacity: 0.12;
}

.irota-directory-map__marker {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	transform: translate(-50%, -100%);
	border: 3px solid var(--irota-color-surface, #fff);
	border-radius: 50% 50% 50% 0;
	background: var(--irota-color-green, #00530f);
	color: var(--irota-color-surface, #fff);
	box-shadow: var(--irota-shadow-md, 0 1.25rem 3.5rem rgba(23, 53, 38, 0.1));
	cursor: pointer;
	font: inherit;
	font-weight: var(--irota-font-weight-bold, 700);
	transition: transform var(--irota-motion-fast, 180ms ease), background-color var(--irota-motion-fast, 180ms ease);
	animation: irota-map-marker-in var(--irota-motion-smooth, 420ms ease) both;
	animation-delay: var(--irota-marker-delay, 0ms);
}

.irota-directory-map__marker:hover,
.irota-directory-map__marker:focus-visible {
	z-index: 3;
	transform: translate(-50%, -100%) scale(1.12);
	background: var(--irota-color-teal, #006070);
}

.irota-directory-map__marker.is-pulsing {
	animation: irota-map-marker-pulse 480ms ease-out;
}

.irota-directory-map__marker--cluster {
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: var(--irota-color-teal, #006070);
}

.irota-directory-map__list-link,
.irota-directory-map__fallback a {
	inline-size: fit-content;
	min-block-size: 44px;
	color: var(--irota-color-teal, #006070);
	font-weight: var(--irota-font-weight-semibold, 600);
	text-underline-offset: 0.25em;
}

.irota-directory-map__help,
.irota-directory-map__attribution,
.irota-directory-map__fallback,
.irota-directory-map__empty {
	color: var(--irota-color-text-soft, #68776e);
	font-size: var(--irota-font-size-sm, 0.875rem);
}

.irota-directory-map__fallback {
	padding: var(--irota-space-3, 0.75rem) var(--irota-space-4, 1rem);
	border: 1px solid var(--irota-color-border-strong, #b7c9ba);
	border-radius: var(--irota-radius-md, 0.875rem);
	background: var(--irota-color-surface-tint, #f0f6f2);
}

.irota-directory-map__attribution a {
	color: var(--irota-color-teal, #006070);
}

.irota-directory-map__empty {
	display: grid;
	place-content: center;
	gap: var(--irota-space-2, 0.5rem);
	min-block-size: 12rem;
	padding: var(--irota-space-6, 1.5rem);
	border: 1px dashed var(--irota-color-border-strong, #b7c9ba);
	border-radius: var(--irota-radius-lg, 1.125rem);
	background: var(--irota-color-surface-tint, #f0f6f2);
	text-align: center;
}

.irota-directory-card__map-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--irota-color-teal, #006070);
	font-weight: var(--irota-font-weight-semibold, 600);
	text-underline-offset: 0.25em;
}

.irota-directory-card.is-map-selected {
	border-color: var(--irota-color-teal, #006070);
	box-shadow: var(--irota-shadow-md, 0 1.25rem 3.5rem rgba(23, 53, 38, 0.1));
}

@media (min-width: 64rem) {
	.irota-directory-layout {
		grid-template-columns: minmax(22rem, 0.86fr) minmax(0, 1.14fr);
		align-items: start;
	}

	.irota-directory-map {
		position: sticky;
		top: calc(var(--irota-header-tool-height, 3rem) + var(--irota-space-4, 1rem));
	}
}

@keyframes irota-map-marker-in {
	from { opacity: 0; transform: translate(-50%, -75%) scale(0.72); }
	to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@keyframes irota-map-marker-pulse {
	0%, 100% { box-shadow: var(--irota-shadow-md, 0 1.25rem 3.5rem rgba(23, 53, 38, 0.1)); }
	50% { box-shadow: 0 0 0 0.75rem color-mix(in srgb, var(--irota-color-teal, #006070) 20%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.irota-directory-map__marker,
	.irota-directory-card {
		animation: none !important;
		scroll-behavior: auto;
		transition: none !important;
	}
}