/* Responsive overrides for content images
   Targets images that may come from editable HTML (base64 inline images, CMS content, etc.)
   Keeps images constrained to their container while preserving aspect ratio.
*/
/* Target any <img> descendant at any depth inside #content_inner */
#content_inner img,
#content_inner * img {
  max-width: 100% !important; /* constrain to container width */
  height: auto !important;    /* preserve aspect ratio */
  display: block !important;  /* avoid inline whitespace issues */
  object-fit: contain;        /* preserve content without cropping */
  max-height: 100vh;         /* avoid overly tall images breaking layout */
}

/* Also make sure images in common content blocks are responsive */
.legal-content img,
.content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain;
}

/* Utility class for manual use and Tailwind equivalent note
   - If Tailwind is available, the equivalent utilities are: `max-w-full h-auto block`
   - You can add `class="max-w-full h-auto block"` to images rendered by templates.
*/
.img-responsive {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}