/* No selected visibility style means visible everywhere. Match legacy 768px
   visibility without changing native Columns' separate stacking breakpoint. */
@media (width < 768px) {
    .cosma-project .cosma-content .wp-block-image.is-style-cosma-desktop-only { display: none; }
}
@media (min-width: 768px) {
    .cosma-project .cosma-content .wp-block-image.is-style-cosma-mobile-only { display: none; }
}

/* Keep both sources editable regardless of canvas width. */
.editor-styles-wrapper .wp-block-image:is(.is-style-cosma-desktop-only, .is-style-cosma-mobile-only) {
    position: relative;
    outline: 1px dashed #2681ae;
    outline-offset: 3px;
}
.editor-styles-wrapper .wp-block-image:is(.is-style-cosma-desktop-only, .is-style-cosma-mobile-only)::before {
    position: absolute;
    inset: 4px auto auto 4px;
    z-index: 1;
    padding: 3px 7px;
    background: #fff;
    color: #111;
    font: 12px/1.5 sans-serif;
    pointer-events: none;
}
.editor-styles-wrapper .is-style-cosma-desktop-only::before { content: 'Desktop ≥ 768 px'; }
.editor-styles-wrapper .is-style-cosma-mobile-only::before { content: 'Mobile < 768 px'; }