/* Rich Text Image Format Styles
 * Styles for custom Wagtail image formats used in the rich text editor.
 * Wagtail wraps images in <figure class="richtext-image ..."> with <img> inside.
 */

/* ===================================
   Base Image Styles
   =================================== */

.richtext-image {
  margin: 2rem 0;
}

.richtext-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
}

/* ===================================
   Full Width Formats
   =================================== */

.richtext-image.full-width {
  display: block;
  width: 100%;
  text-align: center;
}

.richtext-image.full-width img {
  width: 100%;
}

/* ===================================
   Aligned Formats (Float with Text Wrap)
   =================================== */

.richtext-image.left {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
  max-width: 45%;
}

.richtext-image.right {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
  max-width: 45%;
}

/* Clearfix after floated images */
.article-body::after,
.richtext-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ===================================
   Responsive
   =================================== */

@media (max-width: 768px) {
  .richtext-image.left,
  .richtext-image.right {
    float: none;
    max-width: 100%;
    margin: 2rem 0;
  }
}