/* SuDu project image viewer. Project layouts stay editorial; the viewer only
   appears after a visitor asks to see an image at full scale. */
html.sudu-lightbox-open,
html.sudu-lightbox-open body { overflow:hidden !important; }

/* The site normally owns a custom cursor. Enlargable portfolio images keep the
   ordinary SuDu cursor rather than introducing a magnifying-glass cursor. */
html.sudu-lightbox-open.xh,
html.sudu-lightbox-open.xh * { cursor:auto !important; }
html.sudu-lightbox-open #xhair { display:none !important; }

img[data-sudu-lightbox] { cursor:pointer; }

/* Transparent drawing sheets disappear against the charcoal theme. Give plans
   and elevations a permanent off-white paper ground in-page and in the viewer. */
img[src*="plan"],
img[src*="elev"] { background:#f3f1ea; }

.sudu-lightbox {
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  grid-template-rows:1fr;
  background:rgba(14,13,12,.975);
  color:#f3f1ea;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s cubic-bezier(.16,1,.3,1), visibility 0s linear .2s;
  overscroll-behavior:contain;
}
.sudu-lightbox.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.sudu-lightbox__stage {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3vw,42px) clamp(18px,4vw,64px);
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
.sudu-lightbox__image {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  opacity:0;
  transform:scale(.992);
  transition:opacity .18s ease, transform .24s cubic-bezier(.16,1,.3,1);
  user-select:none;
  -webkit-user-drag:none;
}
.sudu-lightbox__image.is-ready { opacity:1; transform:none; }

.sudu-lightbox__top {
  position:absolute;
  z-index:2;
  top:max(10px,env(safe-area-inset-top));
  left:clamp(12px,2vw,28px);
  right:clamp(12px,2vw,28px);
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.sudu-lightbox__count {
  font:500 10.5px/1 'Urbanist',sans-serif;
  letter-spacing:.1em;
  color:rgba(243,241,234,.72);
  pointer-events:none;
}
.sudu-lightbox button {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:#f3f1ea;
  padding:0;
  margin:0;
  min-width:48px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Urbanist',sans-serif;
  font-weight:400;
  line-height:1;
  cursor:pointer !important;
  opacity:.78;
  transition:opacity .18s ease;
  pointer-events:auto;
}
.sudu-lightbox button:hover,
.sudu-lightbox button:focus-visible { opacity:1; }
.sudu-lightbox button:focus-visible { outline:1px solid rgba(243,241,234,.8); outline-offset:-6px; }
.sudu-lightbox__close { font-size:28px; }
.sudu-lightbox__nav {
  position:absolute;
  z-index:2;
  top:50%;
  transform:translateY(-50%);
  font-size:35px;
}
.sudu-lightbox__prev { left:max(2px,env(safe-area-inset-left)); }
.sudu-lightbox__next { right:max(2px,env(safe-area-inset-right)); }
.sudu-lightbox.is-single .sudu-lightbox__nav,
.sudu-lightbox.is-single .sudu-lightbox__count { display:none; }

@media (max-width:720px) {
  .sudu-lightbox__stage {
    padding:max(58px,calc(env(safe-area-inset-top) + 48px)) 12px max(22px,env(safe-area-inset-bottom));
  }
  .sudu-lightbox__nav { top:auto; bottom:max(4px,env(safe-area-inset-bottom)); transform:none; }
  .sudu-lightbox__prev { left:calc(50% - 58px); }
  .sudu-lightbox__next { right:calc(50% - 58px); }
}

@media (prefers-reduced-motion:reduce) {
  .sudu-lightbox,
  .sudu-lightbox__image,
  .sudu-lightbox button { transition:none !important; }
}