/* ==========================================================================
   Lightbox
   ========================================================================== */

/* The thumbnail. The magnifier says "this gets bigger" before the click,
   which is the whole reason a reader tries it. */
.zoomable {
  position: relative;
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
}
.zoomable::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .15s ease;
  background:
    /* Magnifier with a plus, drawn inline: no request, and nothing for the
       Content Security Policy to have an opinion about beyond data:. */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="%23141311" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>')
      center / 44px no-repeat,
    rgba(247, 203, 31, .45);
}
.zoomable:hover::after,
.zoomable:focus-visible::after { opacity: 1; }

/* At the top of a card that already rounds and clips its own corners, the
   radius above shows as a second, smaller curve inside the first. Squared
   off for that case. It has to live here rather than beside the card rules:
   .zoomable and any modifier of it carry the same specificity, so whichever
   file loads last wins, and this one loads last. */
.zoomable--flush { border-radius: 0; }

/* A touch screen has no hover, so the icon would either never show or
   never go away. There, the picture simply opens when tapped. */
@media (hover: none) {
  .zoomable::after { content: none; }
}

.lightbox {
  max-width: min(96vw, 1400px);
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.lightbox.is-open { opacity: 1; transform: none; }
.lightbox::backdrop { background: rgba(20, 19, 17, .85); }

.lightbox__figure { margin: 0; }
.lightbox__figure img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  border-radius: var(--radius);
  background: var(--cream);
}
.lightbox__caption {
  margin-top: .75rem;
  color: var(--cream);
  font-size: var(--fs-sm);
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  z-index: 1;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--gold); }

/* On a phone the corner button would sit off the edge of the screen. */
@media (max-width: 34em) {
  .lightbox__close { top: .25rem; right: .25rem; }
}