/* The figure rules of a page document (CR-17 #1671, slice 3) — ONE source
   for both audiences. The renderer (`cms/render.py`) builds the markup
   `figure.prose-figure.prose-figure--<placement>`, the editor
   (`document-editor.js`) builds the same inside her surface, so the author
   sees what the visitor gets — the parity #1230 guarded for Trix sizes,
   now for the document's placements. Hand-written and NOT generated:
   build-css.sh scans templates, and markup a renderer or script builds
   must not depend on a class that happens to be generated. Both shells
   define the same tokens (--ink, --ink-soft, --line), so this file rides
   on them; the site links her in `site_base.html`, the editor pages get
   her from the `ui.document_editor` macro (never the admin shell: the
   pages without an editor carry nothing of the editor's, B4).

   The look is the prose rule of CR-17 §C4.8: the public card radius
   (14 px) and the one soft card shadow of CR-11 beslissing 01 — from the
   prose rules, never from the file, so every figure on the site wears
   the same face. */

.prose-raak figure.prose-figure {
  margin: 1rem 0;
}

.prose-raak figure.prose-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

/* The caption the author wrote in the dialog: a small line under the
   picture, soft ink — the visitor reads her as a caption and not as body
   text. */
.prose-raak figure.prose-figure figcaption {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--ink-soft);
}

/* The placements (schema.py's FIGURE_PLACEMENTS — the gate
   test_figure_placements_1671.py keeps this file and that tuple from
   drifting apart). `full` is the default: width of the text column, the
   same as a figure without a placement, so a converted figure (no
   placement, slice 1's migration) renders like a full one. */
.prose-raak figure.prose-figure--full {
  max-width: 100%;
}

/* A picture beside the text: half the column, floating, with the text
   flowing along her side — the layout the walkthrough names ("the text
   flows left of the picture"). */
.prose-raak figure.prose-figure--left {
  float: left;
  max-width: 50%;
  margin: 0.25rem 1rem 0.5rem 0;
}

.prose-raak figure.prose-figure--right {
  float: right;
  max-width: 50%;
  margin: 0.25rem 0 0.5rem 1rem;
}

/* A small picture: a third of the column, standing free in the middle —
   a portrait between two paragraphs, not a picture glued to a text
   line. */
.prose-raak figure.prose-figure--small {
  float: none;
  max-width: 33%;
  margin-left: auto;
  margin-right: auto;
}

/* Under 640 px the placements fall away, as #1207 decided for the Trix
   sizes: the column is 358 px on a 390 px screen, so a floated half is
   179 px wide and unreadable with text beside her. A full-width picture
   beats an unreadable one; floats also break the reading order on a
   phone. */
@media (max-width: 640px) {
  .prose-raak figure.prose-figure--left,
  .prose-raak figure.prose-figure--right,
  .prose-raak figure.prose-figure--small {
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}