/* =========================================================
   Marco Lombart — automatic default styling for blog post body images.
   Loaded only by the ML Blog Image Styles utility component.

   lightning-formatted-rich-text renders in its own shadow DOM, so a
   regular component .css file can never reach the <img> tags inside a
   blog post's rich-text body. This file is instead injected as a real
   <link> tag via loadStyle (see mlBlogImageStyles.js), which behaves
   like a page-wide stylesheet and can cross that shadow boundary —
   the same technique mlFlowForms.css uses for standard Flow forms.

   The CMS body editor exposes no per-image controls today (no align
   buttons, no style/class field, no HTML source view) — every pasted
   image is a bare <img src alt>, sometimes with legacy width/height
   attributes from the WordPress migration. Since authors have no way
   to opt individual images in/out of a treatment, every image gets ONE
   consistent, intentional-looking style automatically instead. */

.detail-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: var(--ml-r-lg, 16px);
  box-shadow: 0 4px 12px rgba(0, 62, 81, 0.12);
}

/* The lead/first image in a post gets a little extra breathing room
   below it before the body copy starts. */
.detail-content img:first-child {
  margin-top: 0;
  margin-bottom: 32px;
}

/* Kept as a no-op safety net: if a future editor or import path ever
   does set `align`, these still make left/right wrap correctly. */
.detail-content img[align="left"] {
  float: left;
  display: inline;
  margin: 4px 20px 16px 0;
  max-width: 45%;
}
.detail-content img[align="right"] {
  float: right;
  display: inline;
  margin: 4px 0 16px 20px;
  max-width: 45%;
}
.detail-content::after {
  content: "";
  display: table;
  clear: both;
}