/* components part 11 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */


/* The lightbox comparison. Same two images, but the split follows the pointer. */
.lb-cmp{position:relative;max-width:min(1500px,94vw);max-height:84vh;
        touch-action:none;cursor:ew-resize;line-height:0;user-select:none}
.lb-cmp[hidden]{display:none}
.lb-cmp>img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain}
.lb-cmp .cmp-b{position:absolute;inset:0;overflow:hidden;width:50%}
.lb-cmp .cmp-b img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none}
.lb-cmp .cmp-h{position:absolute;top:0;bottom:0;left:50%;width:2px;
               background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45);z-index:3}
.lb-cmp .cmp-h::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.lb-cmp .cmp-l{position:absolute;bottom:14px;z-index:4;padding:5px 11px;border-radius:999px;
  background:rgba(20,19,16,.6);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.lb-cmp .cmp-l1{left:14px} .lb-cmp .cmp-l2{right:14px}

/* ------------------------------------------------------------- panorama viewer */
/* Width capped at 1100 and the aspect stated once. It used to take width from vw
   and height from vh independently, so the canvas shape — and with it the field of
   view — drifted with the window. 1100 is where a 2560px source lands at a 1.7x
   upscale instead of 2.6x; wider looks bigger and reads softer. */
/* The stage exists so the controls can sit ON the panorama rather than beside it.
   Width went 1100 -> 1500: the old cap was chosen when the source was 2560px and
   anything wider was visible upscale. The sources are now 6144px, so the constraint
   moved and the viewer no longer has to apologise for its size on a large display. */
/* Sized to the SAME envelope as a photograph in this lightbox (.lb img is
   max-width:100%, max-height:88vh). The old min(1500px,94vw) cap meant a panorama
   opened visibly smaller than a still of the same scene on any large display, which is
   backwards: the 360 is the thing you most want room to look around in. Width is
   derived from the height cap and the 16:9 ratio, so it grows until either the viewport
   height or the width runs out. */
.pano-stage{position:relative;width:min(calc(88vh * 16 / 9), 94vw);max-height:88vh;
            aspect-ratio:16/9;display:block;line-height:0}
.pano-stage[hidden]{display:none}
#pfPano{width:100%;height:100%;display:block;touch-action:none;cursor:grab;
        background:var(--ink);border-radius:2px}
#pfPano:active{cursor:grabbing}
#pfPano[hidden]{display:none}
/* THE AFFORDANCE PROBLEM. A panorama that is not moving and has no controls is
   indistinguishable from a photograph of a bent room — you have to already know to
   drag it. Auto-rotation was the only cue, and it is switched off entirely for anyone
   with prefers-reduced-motion, which is a lot of people. So the cue is now explicit
   and always present: two arrows and a transport control that say "this thing turns"
   without moving a pixel. */
.pano-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
          display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
          background:rgba(20,19,16,.46);color:#fff;
          -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
          transition:background .18s,transform .18s;padding:0}
.pano-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
              stroke-linecap:round;stroke-linejoin:round}
.pano-nav:hover,.pano-nav:focus-visible{background:rgba(20,19,16,.62)}
.pano-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pano-nav.prev{left:14px}
.pano-nav.next{right:14px}
.pano-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
          display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;
          border-radius:999px;background:rgba(20,19,16,.5);
          -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);line-height:1}
.pano-play{width:30px;height:30px;display:grid;place-items:center;border:0;padding:0;
           border-radius:50%;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;
           transition:background .18s}
.pano-play:hover,.pano-play:focus-visible{background:rgba(255,255,255,.24)}
.pano-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pano-play svg{width:13px;height:13px;fill:currentColor}
.pano-tag{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
          color:rgba(255,255,255,.82);padding-right:6px;white-space:nowrap}@media(max-width:700px){
  .pano-nav{width:38px;height:38px}
  .pano-nav.prev{left:8px} .pano-nav.next{right:8px}
  .pano-tag{display:none}
  .pano-bar{padding:6px}}
.lb-hint{position:absolute;left:50%;top:22px;transform:translateX(-50%);
         padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.14);
         color:rgba(255,255,255,.86);font-size:12px;font-weight:600;letter-spacing:.04em;
         pointer-events:none;transition:opacity .5s}
.lb-hint[hidden]{display:none}
.lb-hint.gone{opacity:0}