/* The photograph determines the viewer's width; no fixed-height contain gutters. */
.hotel-lightbox{
  --hotel-photo-ratio:1.5;
  --hotel-photo-inset-x:0%;
  --hotel-photo-inset-y:0%;
  width:fit-content;max-width:calc(var(--hotel-view-width,100vw) - 48px);max-height:calc(100dvh - 48px);
  margin:auto;padding:0;overflow:hidden;box-sizing:border-box;
  border:1px solid #ffffff70;border-radius:18px;background:#f8f7f4;color:#302c28;
  box-shadow:0 24px 80px #100d0a55;
}
.hotel-lightbox::backdrop{background:#211b16cf;backdrop-filter:blur(8px)}
.hotel-lightbox__media{
  position:relative;overflow:hidden;
  width:min(1120px,calc(var(--hotel-view-width,100vw) - 50px),calc((100dvh - 160px)*var(--hotel-photo-ratio)));
  aspect-ratio:var(--hotel-photo-ratio);background:#e7e0d2;
}
.hotel-lightbox__media>img{
  position:absolute;display:block;max-width:none;
  left:calc(-1*var(--hotel-photo-inset-x));top:calc(-1*var(--hotel-photo-inset-y));
  width:calc(100% + 2*var(--hotel-photo-inset-x));height:calc(100% + 2*var(--hotel-photo-inset-y));
  object-fit:fill;border:0;border-radius:0;
}
.hotel-lightbox .photo-close{
  display:grid;place-items:center;top:14px;right:14px;width:44px;height:44px;padding:0;
  border:1px solid #ffffffa8;background:#f8f7f4ed;color:#302c28;
  box-shadow:0 3px 14px #18120d21;transition:background .2s;
}
.hotel-lightbox .photo-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.hotel-lightbox .photo-close:hover{background:#fff}
.hotel-lightbox .photo-caption{
  display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;
  gap:24px;min-height:80px;padding:16px 24px;box-sizing:border-box;
}
.hotel-lightbox .photo-caption h2{font-size:20px;line-height:1.45;text-wrap:balance}
.hotel-lightbox .photo-caption button{width:48px;height:48px;border-color:#b8a992;font-size:24px}
.hotel-lightbox button:focus-visible{outline:2px solid #7f6c53;outline-offset:3px}
@media(max-width:760px){
  .hotel-lightbox{max-width:calc(var(--hotel-view-width,100vw) - 24px);max-height:calc(100dvh - 24px);border-radius:12px}
  .hotel-lightbox__media{width:min(calc(var(--hotel-view-width,100vw) - 26px),calc((100dvh - 136px)*var(--hotel-photo-ratio)))}
  .hotel-lightbox .photo-close{top:10px;right:10px}
  .hotel-lightbox .photo-caption{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;min-height:76px;padding:14px 16px}
  .hotel-lightbox .photo-caption h2{font-size:16px}
  .hotel-lightbox .photo-caption button{width:44px;height:44px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){.hotel-lightbox .photo-close{transition:none}}