/*
 * figure.css -- Picture with caption (pattern 50, ggf/figure), and the PICTURE-WITH-CAPTION ELEMENT that Gallery (gallery.css) and the Offset pair (offset-pair.css) draw with it:
 * the media frame and the caption plate of Part 19 ("Media frame with caption plate and credit"). HAND-MAINTAINED (docs/HAND-MAINTAINED.md); the folder's rules are
 * assets/css/sections/README.md. Tokens only (site.css :root, theme.json, blocks-b.css); the ink follows the ground (--g-ink, --g-ink-2: the colour spec's tokens, with today's
 * tokens as their fallback). Loaded on every page, so every rule starts from a class only these blocks print. Markup: blocks/figure/render.php, blocks/figure/figure.php.
 *
 * The element (used by the three blocks, the classes are shared):
 *   .pic-media  the media frame: a fixed ratio and the 16px corner (--r), the picture fills it and is cropped by object-fit, never stretched. A block sets its ratio (16:10 here).
 *   .pic-bar    the caption plate: the words at one end and the credit at the other, one line that wraps; the caption voice (Georgia italic 13.5, grey), the credit in the label size.
 *   .pic-words / .pic-text / .pic-consent / .pic-credit   its parts.
 */

.fig-block{
  --fig-measure:76ch;          /* Part 18 pattern 50: "figure max-width 76ch", the reading measure plus a little (prose is 68ch) */
}

/* ---------- the media frame ---------- */
.pic-media{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--r);
  aspect-ratio:16/10;
  background:var(--paper-2);   /* what shows for a moment before a picture has loaded: the frame keeps its size, so nothing shifts */
}
.pic-media>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* The editor's empty slot (site.css .img-ph) fills the frame instead of drawing a frame of its own, and keeps the frame's corner so its dashed edge follows it. */
.pic-media>.img-ph{
  height:100%;
  aspect-ratio:auto;
  border-radius:inherit;
}

/* ---------- the caption plate ---------- */
.pic-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s1) var(--s3);
  margin:var(--s2) 0 0;
  max-width:none;
}
.pic-words{
  flex:1 1 20em;
  min-width:0;
  max-width:60ch;
}
.pic-text{
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:var(--wp--preset--font-size--caption);
  line-height:1.5;
  color:var(--g-ink-2,var(--grey));
}
.pic-text+.pic-text{margin-top:var(--s1)}
.pic-credit{
  flex:0 1 auto;                 /* a long credit wraps inside the bar instead of pushing the page sideways (320 and 390px) */
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  margin-left:auto;
  font-size:var(--wp--preset--font-size--label);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--g-ink-2,var(--grey));
}

/* The editor's faint line where a text is still empty (data-ggf-hint exists in the editor's markup only, blocks/figure/figure.php). The editor's own stylesheet draws the text's LABEL there;
   the content strategist's hint is a different line, so it takes the place of the label for these blocks. */
:is(.fig-block,.gallery,.offset-pair,.pull-two,.pull-fig) [data-ggf-el="text"][data-ggf-hint]:empty::before{
  content:attr(data-ggf-hint);
  pointer-events:none;
}
/* The first-step line of an empty block (editor only). */
.pc-first{
  grid-column:1/-1;
  margin:0 0 var(--s2);
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:var(--wp--preset--font-size--caption);
  line-height:1.5;
  color:var(--g-ink-2,var(--grey));
}

/* ---------- Figure with caption: inside Prose or a news article ---------- */
.fig-block{
  max-width:var(--fig-measure);
  margin:var(--s4) 0;
}
.fig-block:first-child{margin-top:0}
.fig-block:last-child{margin-bottom:0}
.fig-block .pic-bar{margin-top:var(--s2)}

@media (forced-colors:active){
  .pic-media{border:1px solid CanvasText}   /* a picture's edge for the reader who sees only system colours */
}
@media print{
  .pic-media{break-inside:avoid}
  .fig-block{break-inside:avoid}
}