/**
 * RTE (Rich Text Editor) content styles — frontend
 *
 * ExpressionEngine's RTE (CKEditor) saves image alignment as classes on <figure>
 * elements (e.g. image-style-align-left). The editor applies these in the Control
 * Panel via its own <style> tag; the frontend does not load that CSS.
 *
 * Include this file on any page that outputs RTE field content so alignment
 * choices (Left aligned image, Centered, Right aligned image, etc.) display
 * correctly. Link it after your main content stylesheet.
 *
 * Class names match CKEditor 5 Image Style plugin output. Optional: image_resized
 * is preserved when editors resize images in the RTE.
 *
 * @see EE RTE Tool Set → image alignment dropdown
 * @see https://docs.expressionengine.com/latest/fieldtypes/rte.html
 */

/* Scope to article/content areas so these only affect RTE output, not layout */
.article-entry figure.image,
.content figure.image {
  margin-bottom: 1.4em;
}

.article-entry figure.image img,
.content figure.image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Left aligned image — float left, text wraps on the right */
figure.image.image-style-align-left,
figure.image.image-style-align-block-left {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

/* Right aligned image — float right, text wraps on the left */
figure.image.image-style-align-right,
figure.image.image-style-align-block-right {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

/* Centered — block image, no text wrap */
figure.image.image-style-align-center,
figure.image.image-style-align-block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

/* Inline and block (full-width) — default block behavior */
figure.image.image-style-inline {
  display: inline-block;
  margin-bottom: 1em;
}

figure.image.image-style-block {
  display: block;
  margin-bottom: 1em;
}

/* Side style — similar to float, often used for smaller images */
figure.image.image-style-side {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
  max-width: 50%;
}

/* Clearfix after RTE content blocks that contain floated figures */
.article-entry::after,
.content::after {
  content: "";
  display: table;
  clear: both;
}