/* Photo overlay: article and page photos open larger in one <dialog class="photo-dialog">
   (photo-dialog.js). Loaded only on pages with photos. Without JavaScript the
   .photo-link simply opens the large photo. */

/* The link around a photo keeps the photo's layout */
.photo-link { display: block; }
.update__frame .photo-link { block-size: 100%; }
.prose-figure--portrait .photo-link,
.prose-figure--small .photo-link {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
}

html.has-photo-dialog { overflow: hidden; }

/* The dialog fills the screen; a click outside the photo and caption lands on it */
.photo-dialog {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: rgba(15, 31, 24, .94); /* the box covers the viewport and carries the dark ground itself; ::backdrop alone rendered too faintly */
  color: var(--paper);
  overflow: auto;
}
.photo-dialog[open] {
  display: flex;
  animation: photo-dialog-in .2s cubic-bezier(.2, .7, .2, 1);
}
.photo-dialog::backdrop { background: rgba(15, 31, 24, .92); }
.photo-dialog[open]::backdrop { animation: photo-dialog-in .2s cubic-bezier(.2, .7, .2, 1); }

.photo-dialog__figure { margin: auto; }
.photo-dialog__img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 92vw;
  max-block-size: 86vh;
  margin-inline: auto;
  object-fit: contain;
}
.photo-dialog__caption {
  max-inline-size: min(var(--measure), 92vw);
  margin-block-start: .875rem;
  margin-inline: auto;
  font-size: 1rem;
  text-align: center;
  color: var(--paper);
}

.photo-dialog__close {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.photo-dialog__close svg { inline-size: 1.5rem; block-size: 1.5rem; }
.photo-dialog :focus-visible { outline-color: var(--amber); }

@keyframes photo-dialog-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-dialog[open],
  .photo-dialog[open]::backdrop { animation: none; }
}