/* =========================================================
   Content Viewer — styles for server-rendered content_html

   The alignment tune stores its state as classes
   (.ce-tune-alignment--*) inside the saved content_html, but
   the actual text-align rules are injected at runtime by the
   alignment plugin inside the editor page only. Pages that
   render content_html server-side (blog post detail) never
   load the editor, so without this file the alignment is lost
   and every block falls back to the page's RTL default.

   The same applies to the Layout tool: the saved content_html
   keeps the row/column structure as plain classes, but the
   flex rules that give them their shape live in styles.css —
   which is only loaded on pages that boot the editor. The
   "Layout blocks" section below mirrors those shape rules,
   scoped under .editorjs-viewer.

   The `direction` rules mirror the "Alignment tune — RTL fix"
   block in styles.css: text-align moves text but not list
   bullets/numbers or table cell layout — those follow
   `direction`, so both are set together to make the viewer
   match the editor preview exactly.
========================================================= */

.ce-tune-alignment--left {
    direction: ltr;
    text-align: left;
}

.ce-tune-alignment--center {
    text-align: center;
}

.ce-tune-alignment--right {
    direction: rtl;
    text-align: right;
}

/* =========================================================
   Layout blocks — server-rendered content_html

   The Layout tool saves its structure as plain divs with
   .layout-* classes, but the display:flex rules that turn
   them into rows/columns live in styles.css, which is only
   loaded on the editor page (and the legacy JSON fallback
   viewer). Pages that render content_html server-side never
   load styles.css, so without the rules below every column
   stacks vertically and the layout "breaks" — it looks right
   in the editor and its preview (styles.css is loaded there)
   and wrong on the blog.

   Only the *shape* parts are mirrored here, scoped under
   .editorjs-viewer so no editor chrome (dashed boxes, row
   background tint, body/#editorjs styles) leaks onto public
   pages.
========================================================= */

.editorjs-viewer .layout-rows {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.editorjs-viewer .layout-row-inner {
    display: flex;

    gap: 10px;

    align-items: stretch;
    flex-wrap: nowrap;
}

.editorjs-viewer .layout-col {
    flex: 1 1 0;

    min-width: 0;
}

/*
 * When the HTML is captured from a read-only render, Editor.js
 * writes its own redactor padding as an inline style
 * (padding-bottom: 40px inside layout cells). That padding is
 * editor chrome and leaves a band of empty space at the bottom
 * of every column on public pages. !important is required to
 * beat the inline style.
 */

.editorjs-viewer .codex-editor__redactor {
    padding-bottom: 0 !important;
}

/* =========================================================
   Media — server-rendered content_html

   .resizable-media-wrap keeps its inline width percentage
   from the editor, but the media element itself must shrink
   inside narrower columns (e.g. a 2-column layout). Tailwind
   preflight usually covers img/video; audio is included
   because nothing else constrains it.
========================================================= */

.editorjs-viewer img,
.editorjs-viewer video,
.editorjs-viewer audio {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 6px;
}

/* =========================================================
   Delimiter block — server-rendered content_html

   content_html contains an empty <div class="ce-delimiter">
   whose visual asterisks (***) come from Editor.js CSS, which
   server-rendered pages never load — without this rule the
   separator simply vanishes on the blog. The asterisks match
   what the editor and its preview show.
========================================================= */

.editorjs-viewer .ce-delimiter::before {
    content: "***";

    display: block;

    text-align: center;

    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;

    color: var(--text-secondary, #9ca3af);
}

/* =========================================================
   Mobile — same breakpoint styles.css uses for the editor
========================================================= */

@media (max-width: 700px) {

    .editorjs-viewer .layout-row-inner {
        flex-direction: column;
    }

}