/*
 * The lightbox: one plate large, above everything else.
 *
 * Separated out of css/gallery.css on 19 August 2026, because „Der Obstpfarrer"
 * should open its pictures in the running text the same way. One file, three
 * pages: gallery/, biography/, interpretation/.
 *
 * A native `popover`, not one line of JavaScript: light dismiss, escape and
 * focus handling come from the platform.
 */

/* --------------------------------------------------------- The lightbox */

.lightbox {
  border: 0;
  padding: 0;
  background: none;
  max-width: min(94vw, 62rem);
  max-height: 94vh;
  overflow: auto;
  color: var(--ink);
}
.lightbox::backdrop { background: rgb(24 20 16 / .82); }
/* In the lightbox it may become large, but never larger than the screen: the
   plate is the subject there and should be visible whole. */
.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
  margin: 0 auto;
  background: #fbf9f3;
}
.lightbox-word {
  background: var(--sheet);
  padding: 1rem 1.3rem 1.2rem;
  font-family: var(--apparatus);
  font-size: .82rem;
  line-height: 1.55;
}
/* The head of the text: the one line the tile carries, then the work.
   Added 20 August 2026, when the gallery's tiles were cut back to that one line
   and the whole apparatus moved in here. The reader has to find in the box the
   thing he clicked on, so it stands first and in the reading face. */
.lightbox-line {
  margin: 0 0 .2rem;
  font-family: var(--work);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}
.lightbox-work {
  margin: 0 0 .8rem;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-far);
}
.lightbox-word .sheet-what { margin: 0 0 .5rem; }
/* Provenance and clearance stand in the lightbox on all three pages that open
   one. They were left behind in gallery.css when this file was split off on
   19 August 2026, so on biography/ and interpretation/ — neither of which loads
   the gallery sheet — the two lines came out unstyled. */
.lightbox-word .sheet-provenance {
  margin: .45rem 0 0;
  font-size: .72rem;
  color: var(--ink-far);
}
.lightbox-word .sheet-licence {
  margin: .45rem 0 0;
  padding-left: .6rem;
  border-left: 2px solid var(--gold);
  font-size: .7rem;
  color: var(--ink-far);
}

/* The foot of the box: the way into the archive on the left, the close button
   on the right. Called in the running text, where the plate has no neighbours to
   explain it. */
.lightbox-ways {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--rule-fine);
}
.lightbox-ways a { color: var(--verdigris); }
.lightbox .sheet-licence {
  margin: .4rem 0 0;
  font-size: .72rem;
  color: var(--ink-far);
}
.lightbox .sheet-licence a { color: inherit; }

/* Die Fundstelle im Modal: ein Buch-Verweis wie (K1 §10) öffnet den Absatz über
   allem, mit demselben popover-Rahmen wie die Bilder. Text statt Bild, also eine
   Lesebreite und die Werkschrift; die Breite wird gesetzt, nicht gedeckelt, weil
   ein popover sonst `width: fit-content` bekommt (siehe unten bei der Zeichnung).
   Gebaut in reading.js, buchModal(). */
.lightbox-buch {
  width: min(94vw, 40rem);
  background: var(--sheet);
  padding: 1.7rem 1.9rem 1.2rem;
  max-height: 90vh;
  overflow-y: auto;
}
.lightbox-buch .lightbox-buch-text { color: var(--ink); }
.lightbox-buch .source-mark { margin-top: 0; }
.lightbox-buch .source-sentence { max-width: none; }
.lightbox-buch .lightbox-ways button {
  border: 0;
  background: none;
  color: var(--verdigris);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.lightbox-buch .lightbox-ways button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: .18em;
}

/* A drawing in the lightbox.
 *
 * The measure above is cut for a plate: upright, read like a picture, and 62rem
 * is a good width for it. The drawings of „Imkern ohne Rähmchen" are schematics
 * of about three to one, and inside that cap they stayed small enough to be hard
 * to read. They take the screen instead, and the caption keeps the reading width
 * under them.
 */
/* The width is **set**, not capped. A popover is `width: fit-content` by the
   browser's own sheet, and that width is decided by the widest thing in the box
   — here the caption in one line, about 1170px. A `max-width` never stretches
   such a box; measured on 25 August 2026, the drawing stayed exactly as small as
   before. The SVGs carry a viewBox and no intrinsic size, so they scale to
   whatever width they are given. */
.lightbox-drawing {
  /* Between the two: at fit-content the drawing stayed about 1170px wide on any
     screen, and the full 96vw was too much on a wide one. The cap holds it at
     roughly 1500px there and gives way to the screen below that. */
  width: min(96vw, 80rem);
  max-width: 96vw;
}
.lightbox-drawing img {
  width: 100%;
  max-width: none;
  max-height: 84vh;
}
/* The caption keeps the width of the drawing. Set narrower it sat as a short
   block under a wide picture, and the two edges disagreed. */
/* On a narrow screen a drawing of three to one would be a strip a finger high.
   It stands at a readable height there and scrolls sideways, as it does in the
   page itself. */
@media (max-width: 700px) {
  .lightbox-drawing { overflow-x: auto; }
  .lightbox-drawing img {
    width: auto;
    height: 62vh;
    max-height: none;
  }
}

/* ---------------------------------------------- A plate in the text
 *
 * Moved here from reading.css on 21 August 2026, when „Imkern ohne
 * Rähmchen" took the biography's device: `!! stem | links` places a
 * plate in the running text. Every page that sets figures loads this
 * sheet; the one reading-specific clearing rule stayed behind.
 */
/* ----------------------------------------------------- A picture in the text
 *
 * Added on 19 August 2026 on Stefan's instruction: "adde support für inline imgs
 * … im desktop view klein, left aligned mit umfliessendem text". It is called in
 * the Markdown with `!! stamm | links`.
 *
 * On a narrow device nothing wraps. A picture of 14 rem beside a column of 20 rem
 * leaves four words per line; it therefore stands alone and centred there, like
 * every other plate.
 */
.figure {
  margin: 0 0 1.2rem;
}
/* The button is the area of the picture and nothing else: the enlargement hangs
   on the picture itself and not on a magnifier beside it. */
.figure-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.figure-open:focus-visible img { outline: 2px solid var(--gold); outline-offset: 3px; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: .4rem;
}
.figure figcaption {
  margin-top: .45rem;
  font-family: var(--apparatus);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-quiet);
}
.figure-attribution {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  color: var(--ink-far);
}
.figure-attribution a { color: inherit; }

@media (min-width: 901px) {
  .figure-left,
  .figure-right { width: 14rem; max-width: 42%; }
  .figure-left  { float: left;  margin: .3rem 1.6rem .9rem 0; }
  .figure-right { float: right; margin: .3rem 0 .9rem 1.6rem; }
}
/* „breit" takes the whole column and does not wrap: the landscape format of a
   copper plate beside half a text column would be too small in both dimensions
   for anything to be made out. */
.figure-wide { clear: both; margin-block: 1.4rem; }

@media (max-width: 900px) {
  .figure-left,
  .figure-right { max-width: 22rem; margin-inline: auto; }
}