/* =============================================================================
   Interactive project map — renders on /proiecte/<project>/ in place of the
   former Image Map Pro slot. Three layers swap in place: project → block →
   floor. Apartment polygons navigate to the property single page.
   ============================================================================= */

.project-imap {
    position: relative;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Author rules below set display:flex on the loader and the tooltip, which
   overrides the browser default [hidden] { display: none } via higher
   specificity (.class beats [attr] in some cascades, and author > UA in
   the origin layer regardless). Restore the expected behaviour for every
   `hidden` element inside this section. */
.project-imap [hidden] { display: none !important; }

/* ---- Breadcrumb -------------------------------------------------------- */
.project-imap__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-muted);
}

.project-imap__crumb {
    background: transparent;
    border: 0;
    padding: 4px 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.project-imap__crumb:hover,
.project-imap__crumb:focus-visible {
    color: var(--color-brand);
    outline: none;
}

.project-imap__crumb.is-current {
    color: var(--color-ink);
    font-weight: var(--fw-medium);
    cursor: default;
}

.project-imap__breadcrumb [data-imap-crumb] + [data-imap-crumb]::before {
    content: "›";
    margin-right: 10px;
    color: var(--color-text-muted);
}

/* ---- Stage (image + svg overlay + tooltip) ----------------------------- */
.project-imap__stage {
    position: relative;
    line-height: 0;
    background: #0e1d1b;
    overflow: hidden;
}

/* Beat the legacy `.project-wide-image img { height: clamp(...); object-fit:
   cover }` rule from taxonomy-project.css — that crops the floor plan and
   moves it out of sync with the polygon coords captured in the editor
   (which uses `height: auto`). Two-class selector wins on specificity. */
.project-imap .project-imap__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.project-imap__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---- Polygons ---------------------------------------------------------- */
.project-imap__poly {
    fill: rgba(255, 255, 255, 0.02);
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 0.2;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
    transition: fill 0.18s ease, stroke 0.18s ease;
}

.project-imap__poly:hover,
.project-imap__poly:focus-visible {
    fill: rgba(255, 255, 255, 0.18);
    stroke: #ffffff;
    stroke-width: 0.4;
    outline: none;
}

/* Apartment polygons (the floor-plan layer) stay fully invisible at rest
   so the floor plan reads as a clean drawing. The same generic white
   highlight defined above paints them on hover — uniform with block/floor
   polygons. Availability still drives the tooltip badge colour, just not
   the polygon fill. The `[data-availability="deleted"]` row keeps its
   not-allowed cursor so editors notice stale records.
   Stroke + fill are explicitly transparent (not `none`) so the polygon
   keeps its hit area for pointer events. */
.project-imap__poly[data-target-kind="property"] {
    fill: transparent;
    stroke: transparent;
}

.project-imap__poly[data-availability="deleted"] {
    cursor: not-allowed;
}

/* ---- Tooltip ----------------------------------------------------------- */
.project-imap__tooltip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, calc(-100% - 8px));
    background: var(--color-ink);
    color: var(--color-white);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.project-imap__tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: var(--color-ink);
    transform: translateX(-50%) rotate(45deg);
}

.project-imap__tooltip [data-imap-tooltip-badge] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-imap__tooltip [data-imap-tooltip-badge="available"]      { background: rgba( 70, 148,   0, 0.85); }
.project-imap__tooltip [data-imap-tooltip-badge="reserved"],
.project-imap__tooltip [data-imap-tooltip-badge="hold"]           { background: rgba(255, 140,   0, 0.85); }
.project-imap__tooltip [data-imap-tooltip-badge="precontract"]    { background: rgba( 26, 115, 232, 0.85); }
.project-imap__tooltip [data-imap-tooltip-badge="sold"],
.project-imap__tooltip [data-imap-tooltip-badge="let"]            { background: rgba(236,  60,  60, 0.85); }

/* ---- Loader ------------------------------------------------------------ */
.project-imap__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 29, 27, 0.45);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    z-index: 4;
}

.project-imap__noscript {
    color: var(--color-text-muted);
}

/* ---- Disable hover affordance on touch (no hover = stop fake hovers) --- */
@media (hover: none) {
    .project-imap__tooltip { display: none; }
}

@media (max-width: 720px) {
    .project-imap__breadcrumb { font-size: 13px; }
}