/* Shared figure width presets (editor + read path). Percent width lives on figure, not img. */

figure.image.egeok-figure-width-25,
figure.image.egeok-figure-width-50,
figure.image.egeok-figure-width-75,
figure.image.egeok-figure-width-100,
.prose-editor .ProseMirror figure.image.egeok-figure-width-25,
.prose-editor .ProseMirror figure.image.egeok-figure-width-50,
.prose-editor .ProseMirror figure.image.egeok-figure-width-75,
.prose-editor .ProseMirror figure.image.egeok-figure-width-100 {
    max-width: 100%;
    box-sizing: border-box;
}

figure.image.egeok-figure-width-25,
.prose-editor .ProseMirror figure.image.egeok-figure-width-25 {
    width: 25%;
}

figure.image.egeok-figure-width-50,
.prose-editor .ProseMirror figure.image.egeok-figure-width-50 {
    width: 50%;
}

figure.image.egeok-figure-width-75,
.prose-editor .ProseMirror figure.image.egeok-figure-width-75 {
    width: 75%;
}

figure.image.egeok-figure-width-100,
.prose-editor .ProseMirror figure.image.egeok-figure-width-100 {
    width: 100%;
}

figure.image.egeok-figure-width-auto,
.prose-editor .ProseMirror figure.image.egeok-figure-width-auto {
    width: auto;
    max-width: 100%;
}

figure.image.egeok-figure-width-custom,
.prose-editor .ProseMirror figure.image.egeok-figure-width-custom {
    width: fit-content;
    max-width: 100%;
}

figure.image[class*="egeok-figure-width-"]:not(.egeok-figure-width-custom) img,
.prose-editor .ProseMirror figure.image[class*="egeok-figure-width-"]:not(.egeok-figure-width-custom) img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

figure.image.egeok-figure-width-custom img,
.prose-editor .ProseMirror figure.image.egeok-figure-width-custom img {
    height: auto;
    max-width: 100%;
}

/* Center-aligned figures with explicit width preset */
figure.image.image-style-align-center.egeok-figure-width-25,
figure.image.image-style-align-center.egeok-figure-width-50,
figure.image.image-style-align-center.egeok-figure-width-75,
figure.image.image-style-align-center.egeok-figure-width-100,
figure.image.image-style-align-center.egeok-figure-width-custom,
.prose-editor .ProseMirror figure.image.image-style-align-center.egeok-figure-width-25,
.prose-editor .ProseMirror figure.image.image-style-align-center.egeok-figure-width-50,
.prose-editor .ProseMirror figure.image.image-style-align-center.egeok-figure-width-75,
.prose-editor .ProseMirror figure.image.image-style-align-center.egeok-figure-width-100,
.prose-editor .ProseMirror figure.image.image-style-align-center.egeok-figure-width-custom {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure.image.image-style-align-center[class*="egeok-figure-width-"] img,
.prose-editor .ProseMirror figure.image.image-style-align-center[class*="egeok-figure-width-"] img {
    margin-left: auto;
    margin-right: auto;
}

/* Left/right float: don't cap width when a preset class is set */
.prose-editor .ProseMirror figure.image.image-style-align-left[class*="egeok-figure-width-"],
.prose-editor .ProseMirror figure.image.image-style-align-right[class*="egeok-figure-width-"] {
    max-width: 100%;
}