/* The optional image viewer belongs only to Esplanade, not migrated content. */
.esplanade-lightbox-open { overflow: hidden; }
.esplanade-lightbox {
  box-sizing: border-box; width: min(96vw, 1200px); max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem);
  padding: 1rem; border: 0; border-radius: .4rem; background: #111; color: #fff;
  overflow: hidden; box-shadow: 0 0 2rem #000;
}
.esplanade-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 1rem; }
.esplanade-lightbox::backdrop { background: rgb(0 0 0 / 85%); }
.esplanade-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.esplanade-lightbox__navigation { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.esplanade-lightbox__status { margin: 0; line-height: 1.6; }
.esplanade-lightbox h2 { margin: 0; color: #fff; font-size: 1.15rem; }
.esplanade-lightbox figure { margin: 0; min-width: 0; min-height: 0; overflow: auto; }
.esplanade-lightbox__image {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: max(6rem, calc(100vh - 18rem)); max-height: max(6rem, calc(100dvh - 18rem));
  object-fit: contain; margin: 0 auto;
}
.esplanade-lightbox__image[hidden] { display: none; }
.esplanade-lightbox figcaption { padding-top: .75rem; line-height: 1.6; overflow-wrap: anywhere; }
.esplanade-lightbox button, .esplanade-lightbox a {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: .6rem .9rem;
}
.esplanade-lightbox button { color: #111; background: #fff; border: 1px solid #fff; border-radius: .2rem; cursor: pointer; }
.esplanade-lightbox a { color: #bde8ff; overflow-wrap: anywhere; }
.esplanade-lightbox :focus-visible { outline: 3px solid #ffd75e; outline-offset: 3px; }