/* Mirrors CKEditor 5 content styles so published rich text looks the same as in the editor. */
.ck-content { line-height: 1.75; overflow-wrap: break-word; }
.ck-content p { margin: 0 0 1em; }
.ck-content h2 { font-size: 1.7em; line-height: 1.2; margin: 1.2em 0 .5em; }
.ck-content h3 { font-size: 1.4em; line-height: 1.25; margin: 1.1em 0 .5em; }
.ck-content h4 { font-size: 1.15em; margin: 1em 0 .5em; }
.ck-content a { text-decoration: underline; text-underline-offset: 2px; }

/* Lists */
.ck-content ol, .ck-content ul { padding-left: 2.2em; margin: 0 0 1em; }
.ck-content ol { list-style-type: decimal; }
.ck-content ul { list-style-type: disc; }
.ck-content li { margin: .25em 0; }
.ck-content ul.todo-list { list-style: none; padding-left: 0; }
.ck-content .todo-list li { display: flex; align-items: flex-start; gap: .5em; }

/* Blockquote */
.ck-content blockquote {
    margin: 1.2em 0; padding: .4em 1.4em; font-style: italic;
    border-left: 4px solid var(--ms-secondary, #E3B341); color: var(--ms-body, #514765);
}

/* Font-size preset classes (fallback if named sizes are ever used) */
.ck-content .text-tiny { font-size: .7em; }
.ck-content .text-small { font-size: .85em; }
.ck-content .text-big { font-size: 1.4em; }
.ck-content .text-huge { font-size: 1.8em; }

/* Horizontal line */
.ck-content hr { border: 0; height: 3px; background: var(--ms-line, #E6E1EF); margin: 1.5em 0; }

/* Images (figures + alignment styles) */
.ck-content .image, .ck-content figure.image {
    display: table; clear: both; text-align: center; margin: 1.2em auto; max-width: 100%;
}
.ck-content .image img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 10px; }
.ck-content .image > figcaption {
    display: table-caption; caption-side: bottom; padding: .6em; font-size: .78em;
    color: var(--ms-muted, #6E6485); background: var(--ms-soft, #F8F6FB);
}
.ck-content .image-style-side { float: right; margin: 1em 0 1em 1.5em; max-width: 50%; }
.ck-content .image-style-align-left { float: left; margin: 1em 1.5em 1em 0; max-width: 50%; }
.ck-content .image-style-align-right { float: right; margin: 1em 0 1em 1.5em; max-width: 50%; }
.ck-content .image-style-align-center { margin-left: auto; margin-right: auto; }
.ck-content .image-inline { display: inline-block; max-width: 100%; }
.ck-content .image-inline img { border-radius: 6px; }

/* Tables */
.ck-content .table { margin: 1.2em auto; display: table; max-width: 100%; overflow-x: auto; }
.ck-content .table table { border-collapse: collapse; width: 100%; border: 1px solid var(--ms-line, #E6E1EF); }
.ck-content .table table td, .ck-content .table table th {
    padding: .55em .7em; border: 1px solid var(--ms-line, #E6E1EF); min-width: 2em;
}
.ck-content .table table th { font-weight: 700; background: var(--ms-soft, #F8F6FB); }

/* Embedded media (YouTube/Vimeo — previewsInData emits an iframe) */
.ck-content .media, .ck-content figure.media { margin: 1.4em 0; clear: both; }
.ck-content figure.media iframe, .ck-content .media iframe {
    width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; display: block;
}

/* Alignment uses inline text-align from CKEditor; nothing needed here. */

/* ---- CKEditor 4 output classes (image2 / justify / embed widgets) ---- */
.ck-content img { max-width: 100%; height: auto; }
.ck-content figure { margin: 12px 0; max-width: 100%; }
.ck-content .image-align-left { float: left; margin: 4px 20px 12px 0; }
.ck-content .image-align-right { float: right; margin: 4px 0 12px 20px; }
.ck-content .image-align-center { text-align: center; }
.ck-content .image-align-center > figure,
.ck-content figure.image-align-center { display: inline-block; }
.ck-content figure.image-narrow img, .ck-content img.image-narrow { max-width: 300px; height: auto; }
.ck-content figure.image-wide img, .ck-content img.image-wide { max-width: 500px; height: auto; }
.ck-content .text-left { text-align: left; }
.ck-content .text-center { text-align: center; }
.ck-content .text-right { text-align: right; }
.ck-content .text-justify { text-align: justify; }
.ck-content .embed-narrow { width: 75%; }
.ck-content .embed-align-center { margin-left: auto; margin-right: auto; }
.ck-content .embed iframe, .ck-content figure iframe { max-width: 100%; }