/* CMS edit-mode styles. Loaded by consumer apps via importmap or AssetMapper auto-discovery. */

body.cms-edit-mode .cms-editable {
    outline: 2px dashed transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s ease;
    cursor: text;
}

body.cms-edit-mode .cms-editable:hover {
    outline-color: rgba(0, 122, 255, 0.4);
}

body.cms-edit-mode .cms-editable--active {
    outline-color: rgba(0, 122, 255, 0.85);
    background-color: rgba(0, 122, 255, 0.05);
}

body.cms-edit-mode .cms-editable-image {
    outline: 2px dashed transparent;
    outline-offset: 2px;
    cursor: pointer;
    position: relative;
}

body.cms-edit-mode .cms-editable-image:hover {
    outline-color: rgba(0, 122, 255, 0.6);
}

body.cms-edit-mode .cms-editable-image::after {
    content: '📷 Klik pro výměnu';
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

body.cms-edit-mode .cms-editable-image:hover::after {
    opacity: 1;
}

body.cms-edit-mode .cms-richtext-editable {
    outline: 2px dashed transparent;
    outline-offset: 2px;
    cursor: pointer;
}

body.cms-edit-mode .cms-richtext-editable:hover {
    outline-color: rgba(0, 122, 255, 0.4);
}

body.cms-edit-mode .cms-gallery-edit--active > * {
    cursor: move;
}

body.cms-edit-mode .cms-add-button {
    background: #007aff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* Toast */
.cms-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100000;
    animation: cms-toast-in 0.2s ease;
}

.cms-toast--success { background: #34c759; }
.cms-toast--error { background: #ff3b30; }

@keyframes cms-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modals (collection-modal + richtext-modal) */
.cms-modal,
.cms-richtext-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.cms-modal__inner,
.cms-richtext-modal__inner {
    background: white;
    border-radius: 8px;
    padding: 24px;
    min-width: 400px;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.cms-modal__header h3,
.cms-richtext-modal__header h3 {
    margin: 0 0 16px;
    font-size: 18px;
}

.cms-modal__field {
    display: block;
    margin-bottom: 12px;
}

.cms-modal__field span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.cms-modal__field input,
.cms-modal__field textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}

.cms-modal__field textarea { min-height: 80px; }

.cms-modal__actions,
.cms-richtext-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.cms-modal__actions button,
.cms-richtext-modal__actions button {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: white;
    font-weight: 500;
}

.cms-modal__actions button[type="submit"],
.cms-richtext-modal__actions [data-action="cms-richtext:save"] {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

.cms-richtext-modal__editor {
    min-height: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
}

/* GrapesJS modal — Plan 04 Mode A */
body.cms-edit-mode .cms-grapes-editable {
    outline: 2px dashed transparent;
    outline-offset: 2px;
    cursor: pointer;
    position: relative;
    min-height: 60px;
}
body.cms-edit-mode .cms-grapes-editable:hover { outline-color: rgba(255, 149, 0, 0.6); }
body.cms-edit-mode .cms-grapes-editable--active::before {
    content: '🧩 Klik pro úpravu sekce';
    position: absolute; top: 8px; right: 8px;
    background: #ff9500; color: white;
    padding: 4px 8px; font-size: 12px; border-radius: 4px;
    pointer-events: none;
    z-index: 10;
}

.cms-grapes-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
}
.cms-grapes-modal__inner {
    background: white;
    width: 95vw; height: 95vh;
    border-radius: 8px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.cms-grapes-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #eee;
    background: #f5f5f7;
}
.cms-grapes-modal__header h3 { margin: 0; font-size: 16px; }
.cms-grapes-modal__actions { display: flex; gap: 8px; }
.cms-grapes-modal__actions button {
    padding: 8px 16px; border-radius: 4px; cursor: pointer;
    border: 1px solid #ccc; background: white; font-weight: 500;
}
.cms-grapes-modal__actions [data-action="cms-grapes:save"] {
    background: #34c759; color: white; border-color: #34c759;
}
.cms-grapes-modal__body {
    display: flex; flex: 1; min-height: 0;
}
.cms-grapes-modal__canvas {
    flex: 1; min-height: 0;
}
.cms-grapes-modal__sidebar {
    width: 280px; padding: 12px;
    overflow-y: auto; background: #fafafa;
    border-left: 1px solid #eee;
}
.cms-grapes-modal__sidebar h4 {
    margin: 16px 0 8px; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #888;
}
.cms-grapes-modal__sidebar h4:first-child { margin-top: 0; }

/* Document-list item editor (replace file / delete / add — Plan svp-spirala §items) */
[data-document-item] {
    position: relative;
}

.cms-document-item__replace,
.cms-document-item__delete {
    position: absolute;
    top: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    color: white;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}

body.cms-edit-mode .cms-document-list-edit--active [data-document-item]:hover .cms-document-item__replace,
body.cms-edit-mode .cms-document-list-edit--active [data-document-item]:hover .cms-document-item__delete {
    display: flex;
}

.cms-document-item__replace {
    right: 34px;
    background: #007aff;
}

.cms-document-item__delete {
    right: 6px;
    background: #ff3b30;
}

.cms-document-add-tile {
    display: none;
}

body.cms-edit-mode .cms-document-list-edit--active .cms-document-add-tile {
    display: flex;
}

/* Admin menu (floating trigger + modal menu / password-change form) */
.cms-login-modal__error {
    margin: 8px 0 12px;
    color: #ff3b30;
    font-size: 13px;
}

/* --- inline image editing --------------------------------------------- */

/* The overlay is drawn into the image's host element, which therefore needs
   a position. Without it the controls would escape to whatever positioned
   ancestor happens to be up the tree. */
body.cms-edit-mode .cms-img-edit {
    position: relative;
    /* Zoom scales the image past its frame; without this it spills over
       neighbouring content. */
    overflow: hidden;
}

/* Hidden by default, shown only in edit mode — belt as well as braces.
   The controller already removes the overlay from the DOM when edit mode
   goes off, so a visitor never has one. But every other rule here is
   scoped to body.cms-edit-mode, which means that without this the class
   going away would not HIDE the controls, it would merely leave them
   unstyled — position: static, opacity: 1 — and a stray overlay would be
   plainly visible to the public. Cheap insurance against a failure mode
   whose blast radius is "editor buttons on the live site". */
.cms-img-edit__overlay {
    display: none;
}

body.cms-edit-mode .cms-img-edit__overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;   /* clicks pass through; each control opts back in */
}

body.cms-edit-mode .cms-img-edit__bar {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: auto;
}

body.cms-edit-mode .cms-img-edit:hover .cms-img-edit__bar,
body.cms-edit-mode .cms-img-edit__bar:focus-within {
    opacity: 1;
}

body.cms-edit-mode .cms-img-edit__btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

body.cms-edit-mode .cms-img-edit__btn:hover {
    background: rgba(0, 122, 255, .9);
}

/* Has to read on a white sky and on a black jacket alike, so: white ring,
   dark outer shadow, coloured core — not a flat fill. */
body.cms-edit-mode .cms-img-edit__dot {
    position: absolute;
    /* Above the toolbar and the zoom panel. The dot moves with the photo
       and can land anywhere, including under them — and it is the control
       that must never become unreachable. On a phone, where the panels are
       always visible, this is the difference between usable and not. */
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 122, 255, .85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .5);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;   /* otherwise dragging scrolls the page instead */
}

body.cms-edit-mode .cms-img-edit__dot:active {
    cursor: grabbing;
}

body.cms-edit-mode .cms-img-edit__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* The ring looks 18px; the finger target underneath is 44px. */
body.cms-edit-mode .cms-img-edit__dot::before {
    content: '';
    position: absolute;
    inset: -13px;
}

/* Under the toolbar, not along the bottom edge. The bottom of an image is
   the one place a design is likely to occupy: on /historie the white card
   deliberately overlaps the motif by -5rem, so a bottom-anchored slider
   came out half-buried under it. Top right is the only corner the frame
   itself reserves for the editor. */
body.cms-edit-mode .cms-img-edit__zoom {
    position: absolute;
    top: 48px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(160px, calc(100% - 16px));
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .65);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: auto;
}

body.cms-edit-mode .cms-img-edit:hover .cms-img-edit__zoom,
body.cms-edit-mode .cms-img-edit__zoom:focus-within {
    opacity: 1;
}

body.cms-edit-mode .cms-img-edit__zoom input {
    flex: 1;
    min-width: 0;
}

/* A touch device never hovers, so hover-revealed controls simply do not
   exist there — the toolbar and the zoom slider were unreachable on a
   phone until this was added. Show them outright wherever hovering is not
   a thing. */
@media (hover: none) {
    body.cms-edit-mode .cms-img-edit__bar,
    body.cms-edit-mode .cms-img-edit__zoom {
        opacity: 1;
    }
}

/* --- media picker ------------------------------------------------------ */

dialog.cms-picker {
    width: min(920px, 94vw);
    max-height: 86vh;
    padding: 16px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #111;
}

dialog.cms-picker::backdrop {
    background: rgba(0, 0, 0, .6);
}

.cms-picker__close-form {
    float: right;
    margin: -8px -8px 0 0;
}

.cms-picker__close {
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cms-picker__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.cms-picker__tabs [data-tab] {
    padding: 6px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    cursor: pointer;
}

.cms-picker__tabs [aria-selected="true"] {
    border-bottom-color: #007aff;
    font-weight: 600;
}

.cms-picker__search {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
}

.cms-picker__grid {
    display: grid;
    /* auto-fill collapses to a single column on a 320px screen without a
       media query of its own. */
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    max-height: 56vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.cms-picker__item {
    display: block;
    width: 100%;
    padding: 4px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cms-picker__item:hover,
.cms-picker__item:focus-visible {
    border-color: #007aff;
}

.cms-picker__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}

.cms-picker__item span {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-picker__item small {
    color: #777;
    font-size: 11px;
}

.cms-picker__more {
    display: block;
    margin: 12px auto 0;
    padding: 6px 14px;
    font: inherit;
    cursor: pointer;
}

.cms-picker__msg {
    grid-column: 1 / -1;
    padding: 24px;
    color: #777;
    text-align: center;
}

.cms-picker__hint {
    margin: 0 0 12px;
    color: #555;
    font-size: 13px;
}

/* --- text edit toolbar (inline image insert) ----------------------------- */

body.cms-edit-mode .cms-text-edit-host {
    position: relative;
}

body.cms-edit-mode .cms-text-edit__toolbar {
    position: absolute;
    top: -14px;
    right: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

body.cms-edit-mode .cms-text-edit-host:hover .cms-text-edit__toolbar,
body.cms-edit-mode .cms-text-edit__toolbar:focus-within {
    opacity: 1;
    pointer-events: auto;
}

body.cms-edit-mode .cms-text-edit__btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.cms-edit-mode .cms-text-edit__btn:hover {
    background: #f5f5f7;
}

/* --- visibility toggle --------------------------------------------------- */

.cms-visibility-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cms-visibility-toggle__btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.cms-visibility-toggle__btn:hover {
    background: #f5f5f7;
}

.cms-visibility-toggle__notice {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
}

/* Aktuality column in edit mode — chrome is built by JS, see cms_blocks_edit_controller.js */
body.cms-edit-mode .cms-blocks-edit--active { outline: 1px dashed rgba(0, 0, 0, .25); }
.cms-blocks-edit__chrome { position: absolute; top: .25rem; right: .25rem; display: flex; gap: .25rem; align-items: center; z-index: 5; }
.cms-blocks-edit__remove { width: 1.5rem; height: 1.5rem; line-height: 1; border: 0; border-radius: 9999px; background: #dc2626; color: #fff; cursor: pointer; }
.cms-blocks-edit__styles { display: flex; gap: .125rem; }
.cms-blocks-edit__style { font-size: .625rem; padding: .125rem .375rem; border: 1px solid #d1d5db; border-radius: .25rem; background: #fff; cursor: pointer; }
.cms-blocks-edit__image--selected { outline: 2px solid #2563eb; outline-offset: 2px; }

/* EditorJS switches to `codex-editor--narrow` below 650px and reserves a 50px
   right-hand gutter (`margin-right` on .codex-editor__redactor) for the +/⋮⋮
   toolbar to sit in. An Aktuality column is ALWAYS narrower than that, so the
   gutter is always on: measured 268px of content dropping to 218px the moment
   the editor mounts, and jumping back when it closes. The editor is then
   laying text out at ~81% of the width the visitor will actually see it at,
   which defeats the point of editing in place — and the reflow on every
   open/close is its own distraction.

   So: no gutter. The toolbar goes into the column's own padding instead —
   see "Block toolbar" below. */
.cms-blocks-edit__holder .codex-editor--narrow .codex-editor__redactor { margin-right: 0; }

/* Block toolbar (+ and ⋮⋮) — BEFORE the text, never on it.
   EditorJS draws the buttons just left of `.ce-toolbar__content`, a 650px
   box centred in the editor. Once the blocks' own content box runs full
   width (v1.3.2) that is no longer where the text starts: in a 944px column
   the buttons landed 90px into the first line, over the words, with no
   background to tell them from it (reported 2026-09-26). In a narrow column
   they used to float on the right edge of the text instead — over it too.

   Now the toolbar box matches the text box, and the buttons sit in the space
   left of it — the column's padding — on an opaque chip. placeToolbar() in
   cms_blocks_edit_controller.js measures that space at mount: when the two
   buttons do not fit side by side there (the usual 24px card padding), it
   adds --toolbar-stacked and they stack into a strip that does fit. */
/* One size for the buttons at every viewport width. Deliberate, including
   on phones: below 650px EditorJS switches to its own layout — 36px
   buttons, each with its own border, placed under the block at its left
   edge, i.e. where the next line of text starts. Keeping the buttons in the
   padding beside the text is the whole point here, so that layout is
   overridden too (every rule below has two classes to EditorJS's one).
   The chip's side-by-side width is derived from the size, so
   placeToolbar() can read it without the toolbar existing yet: EditorJS
   builds it lazily, on the first hover. 7px = 1px between the buttons +
   2×1px padding + 2×1px border + 2px margin. */
.cms-blocks-edit__holder {
    --cms-blocks-toolbar-btn: 26px;
    --cms-blocks-toolbar-row: calc(2 * var(--cms-blocks-toolbar-btn) + 7px);
}
.cms-blocks-edit__holder--toolbar-stacked { --cms-blocks-toolbar-btn: 18px; }
.cms-blocks-edit__holder .ce-toolbar__content { max-width: none; margin: 0; }
.cms-blocks-edit__holder .ce-toolbar__actions {
    left: auto;
    right: 100%;
    margin-right: 2px;
    padding: 1px;
    z-index: 3;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
/* The chip is the background now; EditorJS's small-screen buttons bring a
   border and shadow each, which would draw a box inside the box. */
.cms-blocks-edit__holder .ce-toolbar__plus,
.cms-blocks-edit__holder .ce-toolbar__settings-btn {
    width: var(--cms-blocks-toolbar-btn);
    height: var(--cms-blocks-toolbar-btn);
    margin: 0;
    border: 0;
    box-shadow: none;
}
/* Spacing goes on the button, not `gap` on the box: EditorJS keeps two
   empty popover hosts (.ce-toolbox, .ce-settings) in the same flex box,
   and a gap spaced those too — a 14px empty tail under the chip. */
.cms-blocks-edit__holder .ce-toolbar__settings-btn { margin-left: 1px; }
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__actions {
    flex-direction: column;
    margin-right: 1px;
}
/* 18px buttons are under WCAG 2.5.8's 24px target size, which they pass
   only by spacing: their centres must be 24px apart. */
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__settings-btn { margin: 6px 0 0; }
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__plus,
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__settings-btn { border-radius: 4px; }
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__plus svg,
.cms-blocks-edit__holder--toolbar-stacked .ce-toolbar__settings-btn svg {
    width: 16px;
    height: 16px;
}

/* Opening the editor must not move the column's content. EditorJS lays every
   block out with its own geometry — `.cdx-block` padding .4em, `.ce-header`
   padding .6em 0 3px and line-height 1.25em, `.ce-paragraph` line-height
   1.6em, a 650px centred content box, and an image block with a border,
   a 10px margin and a 50px caption well — so a clicked column grew (217px →
   1080px measured on svpspirala.dosmart.cz, 2026-09-26, with the 300px
   minHeight) and its text jumped. Below, that geometry is removed and the
   HOST's takes its place: applyHostTypography() in cms_blocks_edit_controller.js
   measures the page's own p/h2/h3/figure/ul margins and line-heights and
   puts them on the holder as --cms-blocks-* properties. Every rule has two
   classes, so it outranks EditorJS's one-class rules whatever order the
   stylesheets load in. Margins between blocks collapse exactly as they do
   between the rendered elements, because nothing between a block's content
   and its neighbour's has padding, a border or its own formatting context. */
.cms-blocks-edit__holder .ce-block__content { max-width: none; margin: 0; }
.cms-blocks-edit__holder .cdx-block { padding: 0; }

.cms-blocks-edit__holder .ce-paragraph {
    margin: var(--cms-blocks-p-mt, 0) 0 var(--cms-blocks-p-mb, 0);
    line-height: var(--cms-blocks-p-lh, inherit);
}
.cms-blocks-edit__holder h2.ce-header {
    padding: 0;
    margin: var(--cms-blocks-h2-mt, 0) 0 var(--cms-blocks-h2-mb, 0);
    line-height: var(--cms-blocks-h2-lh, inherit);
}
.cms-blocks-edit__holder h3.ce-header {
    padding: 0;
    margin: var(--cms-blocks-h3-mt, 0) 0 var(--cms-blocks-h3-mb, 0);
    line-height: var(--cms-blocks-h3-lh, inherit);
}
/* The host's "nothing after a heading gets a top margin" — its `h3 + *`
   cannot see across EditorJS's per-block wrappers. */
.cms-blocks-edit__holder .ce-block:has(> .ce-block__content > h2.ce-header) + .ce-block > .ce-block__content > * {
    margin-top: var(--cms-blocks-after-h2-mt, 0);
}
.cms-blocks-edit__holder .ce-block:has(> .ce-block__content > h3.ce-header) + .ce-block > .ce-block__content > * {
    margin-top: var(--cms-blocks-after-h3-mt, 0);
}
/* The host's first-/last-child trim, read off the rendered content. */
.cms-blocks-edit__holder--trim-start .ce-block:first-child > .ce-block__content > * { margin-top: 0; }
.cms-blocks-edit__holder--trim-end .ce-block:last-child > .ce-block__content > * { margin-bottom: 0; }

/* Image block → the host's <figure>. Only once filled: the empty/uploading
   state keeps EditorJS's drop area, which has to be visible to be used. */
.cms-blocks-edit__holder .image-tool--filled {
    margin: var(--cms-blocks-figure-mt, 0) 0 var(--cms-blocks-figure-mb, 0);
    padding: 0;
}
.cms-blocks-edit__holder .image-tool--filled .image-tool__image {
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0;
}
.cms-blocks-edit__holder .image-tool--filled .image-tool__image-picture {
    margin: 0; width: auto; max-width: 100%;
}
/* The caption field sits in the flow like a <figcaption> and, while empty,
   exists only for the image being edited — a visitor sees no caption there,
   so neither should the editor until they reach for one. "Being edited" is
   the shim's own selection class (a click on the image) or focus inside it;
   NOT `.ce-block--focused`, which EditorJS 2.31 never emits — keyed off
   that, the field was hidden for good and no caption could be added. */
.cms-blocks-edit__holder .image-tool__caption {
    position: static;
    margin: var(--cms-blocks-figcaption-mt, .5em) 0 0;
    padding: 0; border: 0; box-shadow: none; border-radius: 0;
    font-size: var(--cms-blocks-figcaption-fs, inherit);
    line-height: var(--cms-blocks-figcaption-lh, inherit);
    color: var(--cms-blocks-figcaption-color, inherit);
}
.cms-blocks-edit__holder .image-tool:not(.cms-blocks-edit__image--selected):not(:focus-within) .image-tool__caption:empty { display: none; }

/* List block → the host's <ul>/<ol>. EditorJS draws the markers itself, so
   the item internals stay its own; the box around them takes the host's. */
.cms-blocks-edit__holder .cdx-list {
    margin: var(--cms-blocks-ul-mt, 0) 0 var(--cms-blocks-ul-mb, 0);
    padding: 0 0 0 var(--cms-blocks-ul-pl, 0);
    gap: var(--cms-blocks-li-gap, 0);
    --line-height: var(--cms-blocks-li-lh, inherit);
}
/* The items are real <li>s, so the host's li margins reach them too — but
   on a grid they add to `gap` instead of collapsing into it. */
.cms-blocks-edit__holder .cdx-list__item { margin: 0; }

/* Right-click menu over an image — see openImageMenu() in cms_blocks_edit_controller.js */
.cms-blocks-edit__imagemenu { z-index: 2147483000; min-width: 12rem; padding: .25rem; display: flex; flex-direction: column; background: #fff; border: 1px solid #d1d5db; border-radius: .375rem; box-shadow: 0 10px 20px rgb(0 0 0 / .15); }
.cms-blocks-edit__imagemenu-item { appearance: none; border: 0; background: transparent; text-align: left; font: inherit; font-size: .8125rem; padding: .4rem .6rem; border-radius: .25rem; color: #111827; cursor: pointer; }
.cms-blocks-edit__imagemenu-item:hover,
.cms-blocks-edit__imagemenu-item:focus-visible { background: #f3f4f6; outline: none; }
.cms-blocks-edit__imagemenu-item--danger { color: #b91c1c; }
.cms-blocks-edit__imagemenu-item--danger:hover,
.cms-blocks-edit__imagemenu-item--danger:focus-visible { background: #fee2e2; }

/* Zone columns grid — "+ Add column" button, see cms_zone_columns_controller.js */
.cms-columns-add { display: flex; align-items: center; justify-content: center; min-height: 6rem; border: 2px dashed #9ca3af; border-radius: .5rem; background: transparent; color: #4b5563; font-weight: 600; cursor: pointer; }
.cms-columns-add:hover { border-color: #4b5563; color: #111827; }