/* ---------------------------------------------------------------------------
 * Rich-text image sizing.
 *
 * In Webflow, every image inside a CMS rich-text field is wrapped:
 *
 *   <figure class="w-richtext-figure-type-image w-richtext-align-center">
 *     <div><img src="..." loading="lazy"></div>
 *   </figure>
 *
 * and webflow.css sizes it through that wrapper:
 *
 *   .w-richtext figure     { max-width: 60% }
 *   .w-richtext figure img { width: 100% }
 *
 * Payload's Lexical renderer emits a bare <img width="4096" height="1714">
 * instead — the <figure> and its classes do not survive the HTML -> Lexical
 * conversion. Two things then go wrong:
 *
 *   1. webflow.css sets `img { max-width: 100% }` but never `height: auto`,
 *      so the explicit height attribute is used verbatim and the image is
 *      stretched vertically (4096x1714 rendered as ~1296x1714).
 *   2. Nothing caps the width at 60%, so it fills the container instead of
 *      the narrower column Webflow used.
 *
 * These rules restore Webflow's behaviour without editing its stylesheets.
 * Loaded after webflow.css, so it wins on specificity ties.
 * ------------------------------------------------------------------------- */

/* Always honour the intrinsic aspect ratio. Harmless for real <figure> images,
   which are width:100% of a capped figure and want height:auto anyway. */
.w-richtext img {
  height: auto;
}

/* Images that arrived WITHOUT Webflow's <figure> wrapper: reproduce the
   figure's 60% cap and centring. */
.w-richtext > img,
.w-richtext > p > img,
.w-richtext > div > img {
  max-width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* On narrow screens Webflow's 60% figure effectively fills the column. */
@media screen and (max-width: 767px) {
  .w-richtext > img,
  .w-richtext > p > img,
  .w-richtext > div > img {
    max-width: 100%;
  }
}