.hero-image-figure,
.body-image-figure {
  margin: 0;
}

.hero-image-figure figcaption,
.body-image-figure figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
  text-align: center;
  /* left/right-positioned figures are floated with width:auto, which uses
     shrink-to-fit sizing -- without this, a long caption's unwrapped
     (max-content) width feeds into that calculation and can stretch the
     whole figure (and the 100%-width image inside it) wider than intended.
     width:0 removes the figcaption's own contribution to that calculation;
     min-width:100% then fills whatever width the figure settles on from
     the image alone, so a long caption just wraps onto more lines instead. */
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  /* the fix above only stops the caption from stretching the figure -- it
     still doesn't wrap on its own if it's one long word/string with no
     spaces or hyphens to break at (the actual bug here: it just overflows
     past the box's own edge instead). This forces a break wherever needed
     so it stays within the resolved width either way. */
  overflow-wrap: anywhere;
}

.image-title {
  display: block;
  font-weight: bold;
  color: var(--color-text);
}

.image-caption {
  display: block;
  color: var(--color-text);
}

.hero-image,
.body-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* hero image: width is a free-form rem number (editor picks it via
width_rem, same on-page editor as body images -- see article_page.html),
set via inline style rather than a class here, same reasoning as the body
image note below. */

/* hero image: alignment (float / position) */
.hero-image--right {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.hero-image--left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.hero-image--center {
  margin: 0 auto 1.5rem;
}

/* 45rem, not 640px -- matches the breakpoint every other mobile treatment
on the site uses (event_page.css, union_card.css, article_multicolumn.css,
...); 640px left a gap for phones reporting a CSS viewport width between
640-720px, where none of these resets fired at all. */
@media (max-width: 45rem) {
  .hero-image--left,
  .hero-image--right {
    float: none;
    max-width: 100%;
    margin: 0 0 1.5rem;
  }
}

/* body images: width is a free-form rem number now (editor picks the exact
value via width_rem), set via inline style in article_image_block.html --
width, not max-width, since a floated width:auto figure's shrink-to-fit
sizing falls back to the <img>'s own intrinsic resolution when nothing else
anchors it, so max-width alone can only ever shrink an image, never enlarge
it past the source file's natural size. max-width:100% comes along inline
too, as a safety net so it still can't overflow a narrow container (e.g. a
multi-column item). */
.body-image-figure {
  margin: 1rem 0;
}

/* body images: alignment (float / position) */
.body-image--left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.body-image--right {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.body-image--center {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 45rem) {
  .body-image--left,
  .body-image--right {
    float: none;
    max-width: 100%;
    margin: 0 0 1.5rem;
  }
}

/* editor-picked side padding (hero_image_side_padding) and box padding
(body image's own box.padding, when boxed -- see _block_box_style.html)
are both free-form rem numbers set inline, ignored below this breakpoint
same as the float/width reset above: large padding here can push the image
itself past the screen edge on a narrow column. .hero-image-figure only
gets padding-left/right reset (not the shorthand) since its own boxed
padding is a fixed, non-editable 1rem from .image-figure--boxed below --
that one's meant to stay. .body-image-figure has no such fixed class, so
its whole padding (however _block_box_style.html set it) resets safely. */
@media (max-width: 45rem) {
  .hero-image-figure {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .body-image-figure {
    padding: 0 !important;
  }
}

/* border-radius AND box-shadow both come from inline style now (box_border_
radius/hero_image_box_shadow_* -- the latter an editor-chosen intensity/
color, formerly this fixed "0 2px 8px var(--color-shadow)") rather than
being fixed here -- see article_image_block.html / article_page.html's
hero image figure. */
.image-figure--boxed {
  padding: 1rem;
  background-color: var(--box-bg, var(--color-bg));
  border: 2px solid var(--color-border);
}

/* keep title/caption readable on a dark box background */
.box-color--black .image-title,
.box-color--black .image-caption {
  color: var(--color-on-accent);
}