/* Figures that pair a mathematical picture with portraits of the people.

   Verso emits one <p> per *paragraph* of image markup inside the
   <figure>, then the <figcaption>.  Images written on consecutive
   source lines therefore land in one <p>, images separated by a blank
   line in separate ones.

   That is the layout control: the figure is a column of rows, and each
   <p> is one centred row.  Portraits start a row of their own unless
   the author put them in the same paragraph as the picture, which is
   done only where everything fits on one line.

   Every portrait is the same size, everywhere, and that size is the
   height cap of the mathematical pictures.

   The image files are reproduced unchanged; object-fit only crops the
   view.  Credits are in the chapter text. */

:root { --fig-h: 12.5rem; }

figure:has(img[src*="/portraits/"]),
figure:has(img[src*="/logos/"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* one paragraph of images = one centred row */
figure:has(img[src*="/portraits/"]) > p,
figure:has(img[src*="/logos/"]) > p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.2rem;
  max-width: 100%;
}

/* a portrait never shrinks -- a squeezed circle turns into an ellipse,
   so the row wraps instead */
figure > p > img[src*="/portraits/"] { flex: 0 0 auto; }

/* the mathematical picture: aspect ratio preserved, height capped.
   The :not() keeps this rule off the portraits -- without it this
   selector outranks the one below and the circles turn into ellipses. */
figure:has(img[src*="/portraits/"]) > p > img:not([src*="/portraits/"]) {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--fig-h);
  max-width: 100%;
}

/* the portraits: square-cropped to a circle, one size everywhere */
figure:has(img[src*="/portraits/"]) > p > img[src*="/portraits/"] {
  width: var(--fig-h);
  height: var(--fig-h);
  max-width: var(--fig-h);
  max-height: var(--fig-h);
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* product marks: both square, so one size does */
figure img[src*="/logos/"] {
  display: block;
  height: 3.4rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

figure:has(img[src*="/portraits/"]) > figcaption,
figure:has(img[src*="/logos/"]) > figcaption {
  align-self: stretch;
  text-align: center;
}

@media (max-width: 760px) { :root { --fig-h: 10rem; } }
@media (max-width: 480px) { :root { --fig-h: 7.5rem; } }