/*
 * Obsah článku (diskuze) – tytéž styly pro zobrazení (.discussion-content) i pro editor (.ck-content), aby článek
 * v editoru vypadal stejně jako po uložení. Formát obsahu generuje CKEditor 5 (wwwroot/js/ckeditor-interop.js):
 *   - blokový obrázek  <figure class="image [image_resized] [image-style-align-left|right]" style="width:N%"><img>[<figcaption>]</figure>
 *   - obrázek v řádku  <img [class="image_resized|image-style-align-left|right"] style="width:N%"> uvnitř odstavce
 *   - YouTube          <figure class="media"><div data-oembed-url><div class="embed-responsive …"><iframe class="embed-responsive-item"></div></div></figure>
 * Styly CKEditoru (lib/ckeditor5/…/ckeditor5.css) se vkládají PŘED stylopisy webu, takže tady stačí stejná
 * specifičnost. Žádné pravidlo nesmí platit mimo .discussion-content / .ck-content – výjimkou jsou pravidla
 * .ck.ck-editor…, která platí jen pro UI editoru (plocha a obal editoru), ne pro obsah článku ani zbytek webu.
 */

/* Písmo a velikost textu editoru jako u zobrazeného článku (proměnné CKEditoru přepsané na jeho ploše). */
.ck-content {
    --ck-content-font-family: var(--font-sans);
    --ck-content-font-size: 1rem;
    --ck-content-line-height: var(--bs-body-line-height);
    --ck-content-font-color: var(--bs-body-color);
}

/* Plocha editoru roste s obsahem; formulář stránky zarovnává na střed, text článku ale začíná vlevo. */
.ck.ck-editor {
    text-align: start;
}

.ck.ck-editor__main > .ck-editor__editable {
    min-height: 300px;
}

/* Plovoucí obrázky nesmí přetéct pod konec článku. */
.discussion-content::after,
.ck-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Dlouhá adresa v textu odkazu se zalomí, jinak by na telefonu roztáhla článek do šířky. */
.discussion-content a,
.ck-content a {
    overflow-wrap: anywhere;
}

/* Obrázky nikdy nepřetečou šířku článku a drží poměr stran. */
.discussion-content img,
.ck-content img {
    max-width: 100%;
    height: auto;
}

.discussion-content img {
    cursor: zoom-in;
}

/* Blokový obrázek: na střed, šířka podle obrázku (nejvýš šířka článku). */
.discussion-content .image,
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;
    min-width: 50px;
}

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

/* Zmenšený obrázek: šířku v % nese atribut style figure / img. */
.discussion-content .image.image_resized,
.ck-content .image.image_resized {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
}

.discussion-content .image.image_resized img,
.ck-content .image.image_resized img {
    width: 100%;
}

.discussion-content .image.image_resized > figcaption,
.ck-content .image.image_resized > figcaption {
    display: block;
}

.discussion-content img.image_resized,
.ck-content img.image_resized {
    height: auto;
}

/* Obrázky v řádku textu stojí vedle sebe a zarovnávají se na řádek. */
.discussion-content p img,
.discussion-content li img {
    vertical-align: bottom;
}

/* Obtékání vlevo / vpravo (blokový obrázek i obrázek v řádku). */
.discussion-content .image-style-align-left,
.ck-content .image-style-align-left {
    float: left;
    margin-right: 1.5em;
}

.discussion-content .image-style-align-right,
.ck-content .image-style-align-right {
    float: right;
    margin-left: 1.5em;
}

.discussion-content .image.image-style-align-left,
.discussion-content .image.image-style-align-right,
.ck-content .image.image-style-align-left,
.ck-content .image.image-style-align-right {
    clear: none;
    margin-top: .25em;
    margin-bottom: 1em;
}

.discussion-content img.image-style-align-left,
.discussion-content img.image-style-align-right,
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
    margin-top: .25em;
    margin-bottom: .75em;
}

/* Popisek obrázku. */
.discussion-content .image > figcaption,
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: .5em .75em;
    font-size: .875em;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Citace a vodorovná čára. */
.discussion-content blockquote,
.ck-content blockquote {
    margin: 1em 0;
    padding: .25em 1.25em;
    border-left: 4px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-style: italic;
    overflow: hidden;
}

.discussion-content hr,
.ck-content hr {
    display: block;
    width: 100%;
    height: 0;
    margin: 1.5em 0;
    border: 0;
    border-top: 2px solid var(--bs-border-color);
    background: none;
    opacity: 1;
}

/* Vložené video YouTube přes celou šířku textu v poměru 16:9. */
.discussion-content .media,
.ck-content .media {
    display: block;
    clear: both;
    min-width: 15em;
    margin: 1em 0;
}

.discussion-content .embed-responsive,
.ck-content .embed-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.discussion-content .embed-responsive .embed-responsive-item,
.ck-content .embed-responsive .embed-responsive-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Na úzkém displeji obrázky přestanou obtékat a blokové obrázky zaberou celou šířku článku – zmenšení v %
   je určené pro šířku počítače, na telefonu by byl obrázek nečitelně malý. Obrázky v řádku zůstávají vedle sebe. */
@media (max-width: 575.98px) {
    .discussion-content .image.image_resized {
        width: 100% !important;
    }

    .discussion-content .image-style-align-left,
    .discussion-content .image-style-align-right,
    .ck-content .image-style-align-left,
    .ck-content .image-style-align-right {
        float: none;
        display: block;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Tmavý vzhled editoru (lišta, nabídky, dialogy, plocha): CKEditor 5 skládá všechny barvy UI ze základních
   proměnných --ck-color-base-* na :root; selektor html[…] je silnější, takže jejich přepsáním se přebarví celé UI
   (odvozené proměnné se dosazují na témže prvku). Text obsahu bere --bs-body-color (pravidlo .ck-content výše). */
html[data-bs-theme="dark"] {
    --ck-color-base-background: #212529;
    --ck-color-base-foreground: #2b3035;
    --ck-color-base-border: #495057;
    --ck-color-base-border-light: #3d4650;
    --ck-color-base-text: #dee2e6;
    --ck-color-base-text-light: #adb5bd;
    --ck-color-base-hover: #343a40;
    --ck-color-base-hover-strong: #3d444b;
    --ck-color-base-selected: #1f3250;
    --ck-color-base-selected-hover: #26406a;
    --ck-color-base-active: #6ea8fe;
    --ck-color-base-active-focus: #6ea8fe;
    --ck-color-base-action: #3a7cd5;
    --ck-color-base-action-hover: #1e5aaa;
    --ck-color-base-action-muted: #1b2738;
    --ck-color-base-action-disabled: #2f4a73;
    /* Text tlačítka akce (Uložit, Vložit) je v CKEditoru barva podkladu editoru – v tmavém by byl tmavý na modré. */
    --ck-color-interactive-primary-text: #fff;
    --ck-color-base-focus: #6ea8fe;
    --ck-color-base-error-shadow: #2c0b0e;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.5);
    --ck-color-shadow-drop-active: rgba(0, 0, 0, 0.6);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.4);
    --ck-color-engine-placeholder-text: #8794a5;
    --ck-color-link-default: #6ea8fe;
    --ck-color-media-embed-placeholder-url-text: #adb5bd;
    --ck-color-upload-placeholder-loader: #6c757d;
    --ck-content-color-image-caption-background: #2b3035;
    --ck-content-color-image-caption-text: #dee2e6;
}

@media print {
    .discussion-content .image,
    .discussion-content .media {
        break-inside: avoid;
    }
}