/*
 * CKEditor 5 content styles — applied to rendered CKEditor HTML output.
 * Scope everything under .ck-content so it only affects rendered article content,
 * not the editor UI itself.
 */

:root {
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
}

/* ── Images ─────────────────────────────────────────────────────────────── */

.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}

.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
}

.ck-content .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.ck-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/* Image styles – block alignment */
.ck-content .image.image-style-block-align-left {
    margin-right: auto;
    margin-left: 0;
}

.ck-content .image.image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}

/* Image styles – float alignment */
.ck-content .image.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}

.ck-content .image.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}

.ck-content .image.image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}

/* Image caption */
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: hsl(0, 0%, 20%);
    background-color: hsl(0, 0%, 97%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}

/* ── Text alignment ──────────────────────────────────────────────────────── */

.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; }

/* ── Block quote ─────────────────────────────────────────────────────────── */

.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.ck-content .table {
    margin: 0.9em auto;
    display: table;
}

.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double hsl(0, 0%, 70%);
}

.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border: 1px solid hsl(0, 0%, 75%);
}

.ck-content .table table th {
    font-weight: bold;
    background: hsl(0, 0%, 98%);
}

/* ── Media embed ─────────────────────────────────────────────────────────── */

.ck-content .media {
    clear: both;
    margin: 0.9em 0;
    display: block;
    min-width: 15em;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */

.ck-content pre {
    padding: 1em;
    color: hsl(0, 0%, 20%);
    background: hsl(240, 75%, 98%);
    border: 1px solid hsl(240, 75%, 90%);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}

.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}