/* ─────────────────────────────────────────────────────────────
   Floor-plan viewer
   ───────────────────────────────────────────────────────────── */

.jm-floorplans {
    background: var(--bg-tint);
    padding: clamp(30px, 4vw, 60px) 0 clamp(36px, 5vw, 68px);
    /* the header is fixed, so an anchor jump must stop short of it */
    scroll-margin-top: 84px;
}

.jm-fp {
    max-width: 1060px;
    margin-inline: auto;
}

/* ─── Building selector ────────────────────────────────────── */
.jm-fp__buildings {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.jm-fp__building {
    background: transparent;
    border: 1px solid var(--border-rule);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    padding: 10px 26px;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease),
                border-color 0.35s var(--ease);
}

.jm-fp__building.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .jm-fp__building:not(.is-active):hover {
        border-color: var(--primary);
        color: var(--primary);
    }
}

/* ─── Breadcrumb ───────────────────────────────────────────── */
.jm-fp__crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-small);
}

/* Single-scene projects never get a breadcrumb; without this the empty
   nav still reserved its line height plus margin — 40-odd pixels of dead
   space above the drawing. */
.jm-fp__crumbs:empty {
    display: none;
    margin: 0;
}

.jm-fp__crumb {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jm-fp__crumb.is-current {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: default;
    font-weight: 600;
}

.jm-fp__crumb-sep { color: var(--text-light); }

/* ─── Stage ─────────────────────────────────────────────────
   Treated as a map canvas rather than a framed photograph: a dark
   ground with a faint survey grid, so the drawing reads as something
   you are looking into rather than a picture on the page.          */
.jm-fp__frame {
    position: relative;
    width: 100%;
    background-color: #1B2A31;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 38px 38px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: default;
    touch-action: pan-y;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10),
                0 24px 60px -30px rgba(16, 28, 34, 0.55);
    transition: opacity 0.32s var(--ease);
}

.jm-fp__frame.is-zoomed   { cursor: grab; }
.jm-fp__frame.is-dragging { cursor: grabbing; }

/* Drill-in: the current view recedes, the next one settles in. */
.jm-fp__frame.is-leaving  { opacity: 0; }
.jm-fp__frame.is-entering .jm-fp__canvas { animation: jm-fp-enter 0.52s var(--ease) both; }

@keyframes jm-fp-enter {
    from { opacity: 0; transform: scale(1.07); }
    to   { opacity: 1; transform: none; }
}

/* The transformed layer. Zoom and pan move this, not the frame. */
.jm-fp__canvas {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    --jm-fp-inv: 1;
}

.jm-fp__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.jm-fp__pins {
    position: absolute;
    inset: 0;
    /* the layer itself must not swallow clicks meant for the image */
    pointer-events: none;
}

/* ─── Pin ───────────────────────────────────────────────────
   A surveyor's mark: a hairline ring with a solid centre, sitting in a
   fixed 44px hit area.

   Nothing here may change the pin's geometry on hover or press. The
   previous version scaled the marker, which visibly shifted every pin on
   the drawing whenever one was touched — on a phone the whole map
   appeared to twitch. Feedback is colour and ring weight only.          */
.jm-fp__pin {
    position: absolute;
    /* Counter-scale so a marker keeps its on-screen size however far the
       drawing is zoomed — what a map is expected to do. */
    transform: translate(-50%, -50%) scale(var(--jm-fp-inv, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.jm-fp__pin-dot {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 10px rgba(12, 22, 28, 0.45);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
                box-shadow 0.3s var(--ease);
}

/* Solid centre — the actual point being marked. */
.jm-fp__pin-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    transition: background 0.3s var(--ease);
}

/* Navigation pins read as destinations, so they carry the accent fill. */
.jm-fp__pin--nav .jm-fp__pin-dot {
    background: var(--accent);
    border-color: #fff;
}

.jm-fp__pin-label {
    position: absolute;
    bottom: calc(50% + 20px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(18, 30, 36, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--accent-soft);
    opacity: 0;
    pointer-events: none;
    /* opacity only — never transform, or the label drags the eye */
    transition: opacity 0.25s var(--ease);
}

.jm-fp__pin--nav .jm-fp__pin-label { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
    .jm-fp__pin:hover .jm-fp__pin-dot,
    .jm-fp__pin:focus-visible .jm-fp__pin-dot {
        background: var(--accent);
        border-color: #fff;
        box-shadow: 0 0 0 5px rgba(104, 152, 168, 0.28),
                    0 2px 12px rgba(12, 22, 28, 0.5);
    }
    .jm-fp__pin:hover .jm-fp__pin-label,
    .jm-fp__pin:focus-visible .jm-fp__pin-label { opacity: 1; }
}

/* Press feedback, still without moving anything. */
.jm-fp__pin:active .jm-fp__pin-dot {
    background: var(--primary);
    border-color: #fff;
}

.jm-fp__pin:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 50%;
}

.jm-fp__pin:focus-visible .jm-fp__pin-label { opacity: 1; }

.jm-fp__hint {
    text-align: center;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    margin: var(--sp-4) 0 0;
}

/* ─── Scene navigation list ────────────────────────────────────
   Always in the DOM as the accessible route into a floor. On wide
   screens the on-image labels do the work and this stays hidden;
   on a phone the labels would collide, so the list takes over.   */
.jm-fp__scene-nav {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.jm-fp__scene-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-rule);
    border-radius: var(--radius);
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    padding: 11px 20px;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
                border-color 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .jm-fp__scene-btn:hover {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
}

.jm-fp__scene-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 820px) {
    /* The list carries the labelling; the pins stay as position markers. */
    .jm-fp__scene-nav:not([hidden]) { display: flex; }
    .jm-fp__pin--nav .jm-fp__pin-label { display: none; }

    /* Give the drawing as much width as the screen allows — a floor plan at
       340px with margins on both sides is unreadable. */
    .jm-floorplans > .jm-container { padding-inline: var(--sp-3); }
    .jm-fp__frame { border-width: 5px; }
}

@media (max-width: 560px) {
    /* Labels would collide on a dense floor plan, so the mark alone holds the
       spot and the label appears only while the pin is pressed or focused. */
    .jm-fp__pin-dot { width: 20px; height: 20px; }
    .jm-fp__pin-dot::after { width: 6px; height: 6px; }
    .jm-fp__pin:active .jm-fp__pin-label { opacity: 1; }
}


/* ─── Map chrome ───────────────────────────────────────────── */
.jm-fp__zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.jm-fp__zoom-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-dark);
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .jm-fp__zoom-btn:hover { background: #fff; }
}

.jm-fp__zoom-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* The scene name sits on the canvas like a map's place label. */
.jm-fp__level {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 3;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--radius);
    background: rgba(18, 30, 36, 0.62);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

@media (max-width: 560px) {
    .jm-fp__zoom-btn { width: 40px; height: 40px; }
    .jm-fp__level { font-size: 10px; padding: 4px 9px; }
}