/**
 * CM Txt Img Wrap Block - Centralized Styles
 * Single source of truth for both frontend and FSE
 * Float-based layout for text wrapping around images
 */

/* ==========================================================================
   FRONTEND STYLES
   ========================================================================== */

/* Outer WordPress block wrapper - ensure it clears floats from blocks above */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] {
    clear: both; /* Prevent overlap with previous blocks */
}

/* Main wrapper - clearfix for float containment */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-wrap,
.cm-txt-img-wrap {
    overflow: auto; /* Clearfix to contain floats */
    box-sizing: border-box;
    font-size: var(--body-font) !important;
    clear: both; /* Prevent float overlap with blocks above */
}

/* Clearfix alternative (if overflow causes issues) */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-wrap::after,
.cm-txt-img-wrap::after {
    content: "";
    display: table;
    clear: both;
}

/* Image container floats left by default - width controlled by IMAGE CLASSES z-classes */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-image-container,
.cm-txt-img-wrap .cm-image-container {
    float: left;
    margin: 0 20px 10px 0;
    display: block;
}

/* Image container floats right when layout reversed */
.wp-block[data-type="w4ya/cm-txt-img-wrap"].layout-reversed .cm-image-container,
.cm-txt-img-wrap.layout-reversed .cm-image-container {
    float: right;
    margin: 0 0 10px 20px;
}

/* Image inside container takes full width */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-image,
.cm-txt-img-wrap .cm-txt-img-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Text flows directly - no container divs needed for float-based wrapping */
/* RichText renders as div - ensure it doesn't clear the float */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-wrap > div:not(.cm-txt-img-image),
.cm-txt-img-wrap > div:not(.cm-txt-img-image),
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-wrap > p,
.cm-txt-img-wrap > p {
    margin: 0;
    padding: 0;
    /* Text content flows naturally - no display changes needed */
}
 
 
/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Float clearing utility */
.cm-txt-img-wrap.clear-float {
    clear: both;
}

/* ==========================================================================
   TYPOGRAPHY CLASS SCOPING - Prevent typography classes from affecting images
   ========================================================================== */

/* Typography class wrapper reset - shared */
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-tiny,
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-small,
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-medium,
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-large,
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-extra-large,
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-body,
.cm-txt-img-wrap.cm-fse-tiny,
.cm-txt-img-wrap.cm-fse-small,
.cm-txt-img-wrap.cm-fse-medium,
.cm-txt-img-wrap.cm-fse-large,
.cm-txt-img-wrap.cm-fse-extra-large,
.cm-txt-img-wrap.cm-fse-body {
    /* Reset font-size inheritance for the wrapper */
    font-size: inherit !important;
}

/* Typography classes applied to text content - shared */
.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-tiny,
.cm-txt-img-wrap.cm-fse-tiny {
    font-size: clamp(12px, .7vw, 55px) !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-small,
.cm-txt-img-wrap.cm-fse-small {
    font-size: clamp(14px, .9vw, 85px) !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-medium,
.cm-txt-img-wrap.cm-fse-medium {
    font-size: clamp(18px, 2vw, 105px) !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-large,
.cm-txt-img-wrap.cm-fse-large {
    font-size: clamp(21px, 3.5vw, 110px) !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-extra-large,
.cm-txt-img-wrap.cm-fse-extra-large {
    font-size: clamp(20px, 5vw, 123px) !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].cm-fse-body,
.cm-txt-img-wrap.cm-fse-body {
    font-size: inherit !important;
}

/* ==========================================================================
   STYLING SCOPE MANAGEMENT - Scope color, background, border, padding to text
   ========================================================================== */

/* Reset block wrapper styles when WordPress applies them */
.cm-txt-img-wrap[style*="background-color"],
.cm-txt-img-wrap[style*="color"],
.cm-txt-img-wrap[style*="border"],
.cm-txt-img-wrap[style*="padding"] {
    /* Let styles pass through to text content instead */
}

/* Styles applied to wrapper inherit to text content naturally */
/* No special scoping needed - text flows directly in wrapper */

/* Reset wrapper background/border/padding when applied to whole block - shared */
.wp-block[data-type="w4ya/cm-txt-img-wrap"].has-background,
.cm-txt-img-wrap.has-background {
    background-color: transparent !important;
}

.wp-block[data-type="w4ya/cm-txt-img-wrap"].has-border-color,
.cm-txt-img-wrap.has-border-color {
    border: none !important;
}

/* ==========================================================================
   EDITOR-SPECIFIC STYLES
   ========================================================================== */

/* Editor placeholder for no image selected */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-image-placeholder,
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-txt-img-placeholder {
    background: #f0f0f0;
    padding: 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Editor button spacing */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .components-button {
    margin-bottom: 10px;
}

/* Editor preview image */
.wp-block[data-type="w4ya/cm-txt-img-wrap"] .cm-preview-image {
    width: 100%;
    max-width: 400px;
    display: block;
}