/* Shared rich content layout (frontend + Filament RichEditor) */

.rich-content-body {
    overflow: hidden;
}

/*
 * RichEditor (Filament resizable images)
 * DOM: p > [data-resize-container] > [data-resize-wrapper] > img + 4 corner handles
 * Same paragraph as text: inline-flex container so text flows beside the image.
 * Do NOT float the resize container (clips handles). overflow must stay visible.
 */
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror {
    overflow: visible;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content.fi-prose .ProseMirror img {
    margin-top: 0;
    clear: none;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror [data-resize-container] {
    display: inline-flex !important;
    vertical-align: top;
    max-width: 50%;
    margin: 0 1.5rem 0.5rem 0;
    overflow: visible !important;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror [data-resize-container]:has(img.alignright),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror [data-resize-container]:has(img[data-align="right"]) {
    margin: 0 0 0.5rem 1.5rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror [data-resize-wrapper] {
    position: relative;
    max-width: 100%;
    overflow: visible;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror [data-resize-container] img {
    float: none !important;
    display: block;
    width: auto;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Image alone in its own paragraph (Enter was pressed after image) */
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.rich-editor-image-only {
    float: left;
    max-width: 50%;
    margin: 0 1.5rem 1rem 0;
    padding: 0;
    overflow: visible;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.rich-editor-image-only:has(img.alignright),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.rich-editor-image-only:has(img[data-align="right"]) {
    float: right;
    margin: 0 0 1rem 1.5rem;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.rich-editor-image-only [data-resize-container] {
    display: inline-flex !important;
    max-width: 100%;
    margin: 0;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.float-side-start,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.rich-editor-image-only + p {
    margin-top: 0;
    padding-top: 0;
}

/* Block-level img (saved HTML) without resize wrapper */
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror > img.alignleft,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror > img[data-align="left"] {
    float: left;
    max-width: 50%;
    margin: 0 1.5rem 1rem 0;
}

.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror > img.alignright,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror > img[data-align="right"] {
    float: right;
    max-width: 50%;
    margin: 0 0 1rem 1.5rem;
}

.rich-content-body::after,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror::after {
    content: "";
    display: block;
    clear: both;
}

/* Floated images — top valign is default */
.rich-content-body img.alignleft,
.rich-content-body img[data-align="left"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"] {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 50%;
    height: auto;
}

.rich-content-body img.alignright,
.rich-content-body img[data-align="right"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"] {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 50%;
    height: auto;
}

.rich-content-body img.alignleft.valign-top,
.rich-content-body img.alignleft:not(.valign-center):not(.valign-bottom),
.rich-content-body img[data-align="left"][data-valign="top"],
.rich-content-body img[data-align="left"]:not([data-valign="center"]):not([data-valign="bottom"]),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft.valign-top,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft:not(.valign-center):not(.valign-bottom),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"]:not([data-valign="center"]):not([data-valign="bottom"]) {
    margin-top: 0;
}

.rich-content-body img.alignright.valign-top,
.rich-content-body img.alignright:not(.valign-center):not(.valign-bottom),
.rich-content-body img[data-align="right"][data-valign="top"],
.rich-content-body img[data-align="right"]:not([data-valign="center"]):not([data-valign="bottom"]),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright.valign-top,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright:not(.valign-center):not(.valign-bottom),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"]:not([data-valign="center"]):not([data-valign="bottom"]) {
    margin-top: 0;
}

.rich-content-body img.alignleft.valign-center,
.rich-content-body img.alignleft[data-valign="center"],
.rich-content-body img[data-align="left"][data-valign="center"],
.rich-content-body img.alignright.valign-center,
.rich-content-body img.alignright[data-valign="center"],
.rich-content-body img[data-align="right"][data-valign="center"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft.valign-center,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft[data-valign="center"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"][data-valign="center"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright.valign-center,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"][data-valign="center"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"][data-valign="center"] {
    margin-top: 2.5em;
}

.rich-content-body img.alignleft.valign-bottom,
.rich-content-body img.alignleft[data-valign="bottom"],
.rich-content-body img[data-align="left"][data-valign="bottom"],
.rich-content-body img.alignright.valign-bottom,
.rich-content-body img.alignright[data-valign="bottom"],
.rich-content-body img[data-align="right"][data-valign="bottom"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft.valign-bottom,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft[data-valign="bottom"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"][data-valign="bottom"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright.valign-bottom,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"][data-valign="bottom"] {
    margin-top: 5em;
}

.rich-content-body img.aligncenter,
.rich-content-body img[data-align="center"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.aligncenter,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="center"] {
    display: block;
    margin: 0 auto 1rem;
    max-width: 100%;
    height: auto;
    float: none;
}

.rich-content-body img.alignfull,
.rich-content-body img[data-align="full"],
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignfull,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="full"] {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
    float: none;
}

/* First paragraph beside the float (text starts at image top) */
.rich-content-body img.alignleft + p,
.rich-content-body img[data-align="left"] + p,
.rich-content-body p.float-side-start,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft + p,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"] + p,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror p.float-side-start {
    margin-top: 0;
    padding-top: 0;
}

.rich-content-body img.alignright + p,
.rich-content-body img[data-align="right"] + p,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright + p,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"] + p {
    margin-top: 0;
    padding-top: 0;
}

/* Everything after the wrap paragraph — including YouTube — goes below the float */
.rich-content-body .clear-float-left,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror .clear-float-left {
    clear: left;
}

.rich-content-body .clear-float-right,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror .clear-float-right {
    clear: right;
}

.rich-content-body img.alignleft + :not(p),
.rich-content-body img[data-align="left"] + :not(p),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft + :not(p),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"] + :not(p) {
    clear: left;
}

.rich-content-body img.alignright + :not(p),
.rich-content-body img[data-align="right"] + :not(p),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright + :not(p),
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"] + :not(p) {
    clear: right;
}

.rich-content-body img.alignleft + p ~ *,
.rich-content-body img[data-align="left"] + p ~ *,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignleft + p ~ *,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="left"] + p ~ * {
    clear: left;
}

.rich-content-body img.alignright + p ~ *,
.rich-content-body img[data-align="right"] + p ~ *,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img.alignright + p ~ *,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror img[data-align="right"] + p ~ * {
    clear: right;
}

.rich-content-body .youtube-embed,
.rich-content-body .video-embed,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror .youtube-embed,
.fi-fo-rich-editor .fi-fo-rich-editor-content .ProseMirror .video-embed {
    clear: both;
    width: 100%;
}