/**
 * Mapa domů — Nabídka bytů (zr-buildings-map)
 *
 * @package    ZeleneRalsko
 * @version    1.0.0
 * @since      1.2.0
 *
 * Závisí na: tokens.css
 * Bloky:
 *   1. Stage (fotka + SVG overlay)
 *   2. Polygony domů (výchozí / hover / focus / vybraný / neaktivní)
 *   3. Tooltip
 *   4. Panel vybraného domu
 *   5. Legenda / fallback
 *   6. Error state
 */

/* =========================================================================
   1. STAGE
   ========================================================================= */

.zr-buildings-map {
	margin-block: var(--space-6) var(--space-8);
}

.zr-buildings-map__stage {
	position: relative;
}

/* aspect-ratio drží místo před načtením fotky — žádný CLS */
.zr-buildings-map__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2560 / 1429;
	background-color: var(--color-bg-alt);
}

.zr-buildings-map__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* =========================================================================
   2. POLYGONY DOMŮ
   ========================================================================= */

/* Výchozí stav: neviditelný — fotka zůstává čistá */
.zr-buildings-map__building {
	fill: transparent;
	stroke: transparent;
	stroke-width: 4;
	stroke-linejoin: miter;
	cursor: pointer;
	pointer-events: all;
	transition:
		fill var(--transition-fast),
		stroke var(--transition-fast);
}

.zr-buildings-map__building:hover {
	fill: color-mix(in srgb, var(--color-accent) 28%, transparent);
	stroke: var(--color-accent);
}

.zr-buildings-map__building:focus {
	outline: none;
}

.zr-buildings-map__building:focus-visible {
	fill: color-mix(in srgb, var(--color-accent) 28%, transparent);
	stroke: var(--color-focus);
	stroke-width: 5;
}

/* Vybraný (označený) dům */
.zr-buildings-map__building--selected,
.zr-buildings-map__building--selected:hover {
	fill: color-mix(in srgb, var(--color-accent) 42%, transparent);
	stroke: var(--color-accent);
	stroke-width: 5;
}

/* Neaktivní dům (připravujeme) — tlumený hover, stále s tooltipem */
.zr-buildings-map__building--neaktivni:hover,
.zr-buildings-map__building--neaktivni:focus-visible {
	fill: color-mix(in srgb, var(--color-text-muted) 22%, transparent);
	stroke: var(--color-text-muted);
}

.zr-buildings-map__building--neaktivni.zr-buildings-map__building--selected,
.zr-buildings-map__building--neaktivni.zr-buildings-map__building--selected:hover {
	fill: color-mix(in srgb, var(--color-text-muted) 32%, transparent);
	stroke: var(--color-text-muted);
}

/* =========================================================================
   3. TOOLTIP
   ========================================================================= */

.zr-buildings-map__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	max-width: 280px;
	padding: var(--space-2) var(--space-3);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: var(--text-sm);
	line-height: var(--line-height-base);
	pointer-events: none;
	/* Signature polygon — seříznutý roh */
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.zr-buildings-map__tooltip[hidden] {
	display: none !important;
}

.zr-buildings-map__tooltip-nazev {
	display: block;
	font-weight: var(--font-weight-semibold);
}

.zr-buildings-map__tooltip-vchody,
.zr-buildings-map__tooltip-poznamka {
	display: block;
	color: var(--color-text-inverse-muted);
	font-size: var(--text-xs);
}

.zr-buildings-map__tooltip-vchody:empty,
.zr-buildings-map__tooltip-poznamka:empty {
	display: none;
}

/* =========================================================================
   4. PANEL VYBRANÉHO DOMU
   ========================================================================= */

.zr-buildings-map__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-start: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-inline-start: 3px solid var(--color-accent);
	background-color: var(--color-bg-alt);
}

.zr-buildings-map__panel[hidden] {
	display: none !important;
}

.zr-buildings-map__panel-nazev {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.zr-buildings-map__panel-vchody,
.zr-buildings-map__panel-poznamka {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.zr-buildings-map__panel-vchody:empty,
.zr-buildings-map__panel-poznamka:empty {
	display: none;
}

/* =========================================================================
   5. LEGENDA / FALLBACK
   ========================================================================= */

.zr-buildings-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.zr-buildings-map__legend-btn {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	background-color: transparent;
	color: var(--color-text);
	font-size: var(--text-sm);
	text-align: start;
	cursor: pointer;
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast);
}

.zr-buildings-map__legend-btn:hover {
	border-color: var(--color-accent);
}

.zr-buildings-map__legend-btn:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.zr-buildings-map__legend-btn[aria-pressed="true"] {
	border-color: var(--color-accent);
	background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.zr-buildings-map__legend-btn--neaktivni {
	color: var(--color-text-muted);
}

.zr-buildings-map__legend-nazev {
	font-weight: var(--font-weight-semibold);
}

.zr-buildings-map__legend-poznamka {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* =========================================================================
   6. ERROR STATE
   ========================================================================= */

.zr-buildings-map__error {
	margin-block: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-inline-start: 3px solid var(--color-error);
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	font-size: var(--text-sm);
}

.zr-buildings-map__error[hidden],
.zr-buildings-map__stage[hidden] {
	display: none !important;
}