/**
 * Карта России.
 *
 * reference: design-reference/главная.html и design-reference/проекты.html —
 * блок с картой в секции «География проектов». В обоих макетах компонент
 * одинаковый, поэтому его стили вынесены из страничных файлов сюда.
 *
 * Панель: #FAFBFF; border rgba(18,41,92,0.10); radius 20px; padding 22px 24px.
 */

.tri-map {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-22) var(--tri-space-24);
	min-width: 0;
}

.tri-map__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-18);
}

.tri-map__legend-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-18); /* reference: gap:18px */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* reference: 12px/700 #6B7280; gap:7px */
.tri-map__legend-item,
.tri-map__legend-note {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: 9x9 круг; регионы #C5D5F2 + border #8FA6D6; проекты #12295C */
.tri-map__legend-dot {
	width: 9px;
	height: 9px;
	border-radius: var(--tri-radius-circle);
	flex-shrink: 0;
}

.tri-map__legend-dot--area {
	background-color: var(--tri-color-surface-c5d5f2);
	border: var(--tri-border-width) solid var(--tri-color-border-8fa6d6);
}

.tri-map__legend-dot--point {
	background-color: var(--tri-color-navy);
}

/* reference: margin-top:10px */
.tri-map__svg {
	width: 100%;
	height: auto;
	display: block;
	margin-block-start: var(--tri-space-10);
}

/* reference: .mk{cursor:pointer} .tt{opacity:0} .mk:hover .tt{opacity:1}
   .mk:hover .halo{opacity:0.3} */
.tri-map__marker {
	cursor: pointer;
}

.tri-map__tip {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tri-duration-3) var(--tri-ease);
}

.tri-map__marker:hover .tri-map__tip,
.tri-map__marker:focus-visible .tri-map__tip {
	opacity: 1;
}

.tri-map__marker:hover .tri-map__halo,
.tri-map__marker:focus-visible .tri-map__halo {
	opacity: 0.3;
}

/* Список регионов дублируется текстом для скринридеров и без JS/SVG. */
.tri-map__fallback {
	margin: 0;
	padding: 0;
	list-style: none;
}