/**
 * Mapa obszarów — widok publiczny.
 *
 * Nakładka jest pozycjonowana bezwzględnie nad obrazem i rozciągnięta na całą
 * jego powierzchnię. Ponieważ SVG ma viewBox 0 0 100 100 z wyłączonym
 * zachowaniem proporcji, jego układ współrzędnych pokrywa się z procentami
 * obrazu — mapa pasuje przy każdej szerokości ekranu.
 */

.avista-mapa {
	margin: 2rem 0;
}

.avista-mapa__ramka {
	position: relative;
	display: block;
	line-height: 0;
}

.avista-mapa__obraz {
	display: block;
	width: 100%;
	height: auto;
}

.avista-mapa__nakladka {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.avista-mapa__obszar polygon {
	fill: rgba(140, 29, 44, 0.12);
	stroke: rgba(140, 29, 44, 0.85);
	stroke-width: 1.5;
	transition: fill 0.15s ease-out;
	cursor: pointer;
}

.avista-mapa__obszar:hover polygon,
.avista-mapa__obszar:focus polygon {
	fill: rgba(140, 29, 44, 0.32);
}

/* Widoczne obramowanie przy nawigacji klawiaturą — bez tego mapa jest
   nieużywalna dla kogoś, kto nie korzysta z myszy. */
.avista-mapa__obszar:focus {
	outline: none;
}

.avista-mapa__obszar:focus-visible polygon {
	stroke-width: 3;
	stroke: #1d2327;
}

.avista-mapa__obszar--dostepny polygon {
	fill: rgba(26, 127, 55, 0.18);
	stroke: rgba(26, 127, 55, 0.9);
}

.avista-mapa__obszar--dostepny:hover polygon,
.avista-mapa__obszar--dostepny:focus polygon {
	fill: rgba(26, 127, 55, 0.38);
}

.avista-mapa__obszar--rezerwacja polygon {
	fill: rgba(154, 103, 0, 0.18);
	stroke: rgba(154, 103, 0, 0.9);
}

.avista-mapa__obszar--rezerwacja:hover polygon,
.avista-mapa__obszar--rezerwacja:focus polygon {
	fill: rgba(154, 103, 0, 0.38);
}

.avista-mapa__obszar--sprzedany polygon {
	fill: rgba(130, 7, 30, 0.22);
	stroke: rgba(130, 7, 30, 0.7);
}

/* Legenda */

.avista-mapa__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

.avista-mapa__klucz {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.avista-mapa__probka {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 2px;
	border: 1px solid;
}

.avista-mapa__probka--dostepny {
	background: rgba(26, 127, 55, 0.25);
	border-color: rgba(26, 127, 55, 0.9);
}

.avista-mapa__probka--rezerwacja {
	background: rgba(154, 103, 0, 0.25);
	border-color: rgba(154, 103, 0, 0.9);
}

.avista-mapa__probka--sprzedany {
	background: rgba(130, 7, 30, 0.25);
	border-color: rgba(130, 7, 30, 0.7);
}

.avista-mapa__zapasowa {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	.avista-mapa__obszar polygon {
		transition: none;
	}
}