/* ==========================================================================
   Text z editora (.prose) – načítava ho verejný web (app.js) aj administrácia (admin.js),
   aby editor ukazoval obsah presne tak, ako bude vyzerať na webe.
   Vrstva `sections` musí byť v app.css deklarovaná skôr – preto sa tento súbor importuje až po ňom.
   ========================================================================== */

@layer sections {
    .prose {
        max-width: 46rem;
        font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
        line-height: 1.78;
        color: rgb(244 241 234 / .86);
        counter-reset: h2;
    }
    .prose--page { margin-inline: auto; }
    .prose > * + * { margin-top: 1.3em; }
    .prose p, .prose li { text-wrap: pretty; }
    /* prázdny riadok z editora (<p></p>) má na webe rovnakú výšku ako v editore */
    .prose > p:empty { min-height: 1lh; }
    .prose h2 {
        margin-top: 2.2em;
        font-family: var(--ff-display);
        font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
        font-weight: 400;
        line-height: var(--lh-display, 1.12);
        text-transform: uppercase;
        color: var(--text);
        counter-increment: h2;
    }
    .prose h2::before {
        content: counter(h2, decimal-leading-zero) ' —';
        display: block;
        margin-bottom: .8rem;
        font-family: var(--ff-mono);
        font-size: .78rem;
        letter-spacing: .14em;
        color: var(--orange);
    }
    .prose h3 { margin-top: 1.9em; font-size: 1.45rem; font-weight: 760; line-height: 1.2; letter-spacing: -.015em; color: var(--text); }
    .prose h2 + *, .prose h3 + * { margin-top: .8em; }
    .prose strong { color: var(--text); font-weight: 700; }
    .prose a {
        color: var(--text);
        text-decoration: underline;
        text-decoration-color: var(--orange);
        text-decoration-thickness: 2px;
        text-underline-offset: .22em;
        transition: color .2s;
    }
    .prose a:hover { color: var(--orange); }
    .prose blockquote {
        margin-block: 2em;
        padding-left: clamp(1.25rem, 3vw, 2rem);
        border-left: 4px solid var(--orange);
        font-family: var(--ff-display);
        font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
        line-height: var(--lh-display, 1.12);
        text-transform: uppercase;
        color: var(--text);
    }
    .prose ul, .prose ol { padding-left: 1.5em; }
    .prose ul { list-style: none; }
    .prose ul > li { position: relative; }
    .prose ul > li::before {
        content: '';
        position: absolute;
        top: .72em;
        left: -1.3em;
        width: .42em;
        height: .42em;
        background: var(--orange);
        rotate: 45deg;
    }
    .prose ol > li::marker { font-family: var(--ff-mono); font-size: .85em; color: var(--orange); }
    .prose li + li { margin-top: .5em; }
    .prose { display: flow-root; }
    .prose .ql-align-center { text-align: center; }
    .prose .ql-align-right { text-align: right; }
    .prose img { max-width: 100%; height: auto; margin-block: 2.2em; border-radius: var(--radius); }
    .prose img:not([width]) { width: 100%; }
    /* obrázky zarovnané v editore: <span class="ql-image-align-*"><img width="40%"></span> – šírka je z atribútu
       (v % stĺpca), obal nemá vlastný box, aby sa percentá počítali z odseku */
    .prose [class^="ql-image-align-"] { display: contents; }
    .prose [class^="ql-image-align-"] > img { margin-block: .35em 1em; }
    .prose .ql-image-align-left > img { float: left; margin-right: clamp(1rem, 3vw, 1.75rem); }
    .prose .ql-image-align-right > img { float: right; margin-left: clamp(1rem, 3vw, 1.75rem); }
    .prose .ql-image-align-center > img { display: block; margin-inline: auto; }
    .prose h2, .prose h3, .prose blockquote, .prose hr { clear: both; }
    @media (max-width: 40rem) {
        .prose .ql-image-align-left > img, .prose .ql-image-align-right > img { float: none; display: block; min-width: 60%; margin-inline: auto; }
    }
    .prose hr { height: 1px; margin-block: 3em; border: 0; background: var(--line); }
    .prose code { padding: .15em .4em; border-radius: 6px; background: var(--surface-2); font-family: var(--ff-mono); font-size: .88em; }
    .page-article .prose > p:first-child::first-letter {
        float: left;
        margin: .08em .12em 0 0;
        font-family: var(--ff-display);
        font-size: 4.4em;
        line-height: .82;
        color: var(--orange);
    }
}