/* Board-authored rich content: images, captions, and the alignment and size
   classes the editor emits. Shared by the public pages (.rich), the member app
   notices (.news-body), and the editor itself (.rte-editor) so what the board
   sees while editing matches what renders. The image rules are scoped to these
   content containers so they never touch member photos or other images. */

.rich img,
.news-body img,
.rte-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hc-radius-sm);
}

.rich blockquote,
.news-body blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 3px solid var(--hc-line);
  color: var(--hc-muted);
}

.rich figure,
.news-body figure,
.rte-editor figure {
  margin: 14px 0;
  max-width: 100%;
}
.rich figure img,
.news-body figure img,
.rte-editor figure img {
  display: block;
  width: 100%;
}
.rich figcaption,
.news-body figcaption,
.rte-editor figcaption {
  font-size: 0.85rem;
  color: var(--hc-muted);
  margin-top: 4px;
  text-align: center;
}

/* Size presets applied to a figure. */
.rich .size-small, .news-body .size-small, .rte-editor .size-small { max-width: 240px; }
.rich .size-medium, .news-body .size-medium, .rte-editor .size-medium { max-width: 480px; }
.rich .size-full, .news-body .size-full, .rte-editor .size-full { max-width: 100%; }

/* Alignment on a text block or a figure. Left and right float; a floated figure
   is cleared at the end of the content so it never spills past its section. */
.rich .align-center, .news-body .align-center, .rte-editor .align-center { text-align: center; }
.rich .align-left, .news-body .align-left, .rte-editor .align-left { text-align: left; }
.rich .align-right, .news-body .align-right, .rte-editor .align-right { text-align: right; }
.rich figure.align-center, .news-body figure.align-center, .rte-editor figure.align-center { margin-left: auto; margin-right: auto; }
.rich figure.align-left, .news-body figure.align-left, .rte-editor figure.align-left { float: left; margin: 6px 16px 10px 0; }
.rich figure.align-right, .news-body figure.align-right, .rte-editor figure.align-right { float: right; margin: 6px 0 10px 16px; }
.rich::after, .news-body::after, .rte-editor::after { content: ""; display: block; clear: both; }