/* V2 = scoped jen pro .xeelo-map--v2 */

@media (max-width: 959px) {
    .kb-map-intro, .xeelo-map--v2 {
        display: none !important;
    }

    .knowledgebase.navigation-grid {
        display: grid !important;
    }
}

@media (min-width: 959px) {
    .knowledgebase.navigation-grid {
        display: none !important;
    }
}

.xeelo-map--v2 {
display: block;
position: relative;
width: 1200px;
max-width: 100%;
margin-top: 24px;

/* Přepínač debug jen pro V2 */
--debug-hotspots: 0; /* 0 = jen hover, 1 = debug */

/* Design tokens */
--hotspot-radius: 8px;
--hotspot-stroke: #24A48F;
--hotspot-fill: rgba(36, 164, 143, 0.10);
--hotspot-glow: rgba(36, 164, 143, 0.35);
}

.xeelo-map--v2 img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}

.xeelo-map--v2 a.hotspot {
position: absolute;
display: block;
border-radius: var(--hotspot-radius);
outline: none;
background: transparent;

/* Základní vrstvení */
z-index: 1;

/* Smooth hover */
transform: translateZ(0);
will-change: transform, box-shadow, background-color, outline-color;

transition:
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 160ms ease,
    box-shadow 160ms ease,
    outline-color 160ms ease,
    outline-offset 160ms ease;
}

/* Jemný “shine” bez blur */
.xeelo-map--v2 a.hotspot::after {
content: "";
position: absolute;
inset: 2px;
border-radius: calc(var(--hotspot-radius) - 2px);
pointer-events: none;

opacity: 0;
transform: translateY(2px);
transition: opacity 160ms ease, transform 160ms ease;

background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.00)
);
}

/* Segmenty s předností (např. Přiřazené požadavky, Detail požadavku, Uživatelské menu) */
.xeelo-map--v2 a.hotspot.priority {
z-index: 10;
}

/* Hover zvedne segment, ale nepřebije .priority */
.xeelo-map--v2 a.hotspot:hover,
.xeelo-map--v2 a.hotspot:focus-visible {
z-index: 5;
}

.xeelo-map--v2 a.hotspot.priority:hover,
.xeelo-map--v2 a.hotspot.priority:focus-visible {
z-index: 10;
}

/* Debug: jen obrys (bez výplně) */
.xeelo-map--v2 a.hotspot {
outline: calc(2px * var(--debug-hotspots)) dashed rgba(36, 164, 143, 0.70);
outline-offset: calc(-2px * var(--debug-hotspots));
}

/* Hover/focus: moderní highlight (bez rozmazání obsahu) */
.xeelo-map--v2 a.hotspot:hover,
.xeelo-map--v2 a.hotspot:focus-visible {
background: var(--hotspot-fill);

outline: 2px solid var(--hotspot-stroke);
outline-offset: -2px;

/* Ultra subtle shadow */
box-shadow:
    0 2px 6px -6px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(36, 164, 143, 0.12);

transform: translateY(-2px) scale(1.01);
cursor: pointer;
}

.xeelo-map--v2 a.hotspot:hover::after,
.xeelo-map--v2 a.hotspot:focus-visible::after {
opacity: 1;
transform: translateY(0);
}

/* Tooltip animation keyframes (smooth + výraznější) */
@keyframes xeelo-tooltip-pop {
0% {
    opacity: 0;
    transform: translateY(-70%) scale(0.88);
}
60% {
    opacity: 1;
    transform: translateY(-128%) scale(1.06);
}
100% {
    opacity: 1;
    transform: translateY(-120%) scale(1);
}
}

/* Tooltip label nad segmentem */
.xeelo-map--v2 a.hotspot span {
position: absolute;
left: 1px;
top: -4px;

font-size: 13px;
line-height: 1;
padding: 7px 10px;
border-radius: 999px;

background: #24A48F;
color: #fff;

pointer-events: none;
white-space: nowrap;

/* default hidden */
opacity: 0;
transform: translateY(-70%) scale(0.88);

/* premium shadow */
box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.14);

/* subtle shine */
background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0) 50%
);

transition: opacity 120ms ease;
}

/* Tooltip show */
.xeelo-map--v2 a.hotspot:hover span,
.xeelo-map--v2 a.hotspot:focus-visible span {
opacity: 1;
animation: xeelo-tooltip-pop 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Tooltip hide */
.xeelo-map--v2 a.hotspot:not(:hover):not(:focus-visible) span {
animation: none;
}

/* Debug: always show labels */
.xeelo-map--v2.debug a.hotspot span {
opacity: 1;
transform: translateY(-120%) scale(1);
animation: none;
}