/**
 * CM Txt Img Side by Side Block - Centralized Styles
 * Single source of truth for both frontend and FSE
 */

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

/* Main wrapper - shared styles */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-side-by-side,
.cm-txt-img-side-by-side {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

/* Reversed layout - shared */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-side-by-side.layout-reversed,
.cm-txt-img-side-by-side.layout-reversed {
    flex-direction: row-reverse;
}

/* Text container - shared */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-text-container,
.cm-txt-img-text-container {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Text inner - shared */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-text-container .cm-txt-img-text-inner,
.cm-txt-img-text-container .cm-txt-img-text-inner {
    display: inline-block;
}

/* Image container - shared */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-image-container,
.cm-txt-img-image-container {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Image styles - shared */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-image,
.cm-txt-img-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   FSE EDITOR-SPECIFIC STYLES (Non-duplicated)
   ========================================================================== */

/* FSE Block Editor Wrapper - editor-only styles */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-side-by-side {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

/* FSE Text inner - editor-only styles */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-txt-img-text-container .cm-txt-img-text-inner {
    width: 100%;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Height matching utility */
.cm-txt-img-side-by-side[data-height-matched="true"] .cm-txt-img-text-container,
.cm-txt-img-side-by-side[data-height-matched="true"] .cm-txt-img-image-container {
    min-height: var(--cm-matched-height, auto);
}

/* Animation for height matching */
.cm-txt-img-side-by-side.height-matching {
    transition: all 0.3s ease;
}

.cm-txt-img-side-by-side.height-matching .cm-txt-img-text-container,
.cm-txt-img-side-by-side.height-matching .cm-txt-img-image-container {
    transition: min-height 0.3s ease;
}

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

/* Typography class wrapper reset - shared */
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-tiny,
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-small,
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-medium,
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-large,
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-extra-large,
.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-body,
.cm-txt-img-side-by-side.cm-fse-tiny,
.cm-txt-img-side-by-side.cm-fse-small,
.cm-txt-img-side-by-side.cm-fse-medium,
.cm-txt-img-side-by-side.cm-fse-large,
.cm-txt-img-side-by-side.cm-fse-extra-large,
.cm-txt-img-side-by-side.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="cm/txt-img-side-by-side"].cm-fse-tiny .cm-txt-img-text-inner,
.cm-txt-img-side-by-side.cm-fse-tiny .cm-txt-img-text-inner {
    font-size: clamp(12px, .7vw, 55px) !important;
}

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

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

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

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

.wp-block[data-type="cm/txt-img-side-by-side"].cm-fse-body .cm-txt-img-text-inner,
.cm-txt-img-side-by-side.cm-fse-body .cm-txt-img-text-inner {
    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-side-by-side[style*="background-color"],
.cm-txt-img-side-by-side[style*="color"],
.cm-txt-img-side-by-side[style*="border"],
.cm-txt-img-side-by-side[style*="padding"] {
    /* Let styles pass through to text content instead */
}

/* Apply block-level styles to text content when applied to wrapper - shared */
.wp-block[data-type="cm/txt-img-side-by-side"][style*="background-color"] .cm-txt-img-text-inner,
.wp-block[data-type="cm/txt-img-side-by-side"][class*="has-"][class*="-background-color"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[style*="background-color"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[class*="has-"][class*="-background-color"] .cm-txt-img-text-inner {
    background-color: inherit;
    padding: 0.5em;
    border-radius: 4px;
}

.wp-block[data-type="cm/txt-img-side-by-side"][style*="color"] .cm-txt-img-text-inner,
.wp-block[data-type="cm/txt-img-side-by-side"][class*="has-"][class*="-color"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[style*="color"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[class*="has-"][class*="-color"] .cm-txt-img-text-inner {
    color: inherit;
}

.wp-block[data-type="cm/txt-img-side-by-side"][style*="border"] .cm-txt-img-text-inner,
.wp-block[data-type="cm/txt-img-side-by-side"][class*="has-border"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[style*="border"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[class*="has-border"] .cm-txt-img-text-inner {
    border: inherit;
    padding: 0.5em;
}

.wp-block[data-type="cm/txt-img-side-by-side"][style*="padding"] .cm-txt-img-text-inner,
.cm-txt-img-side-by-side[style*="padding"] .cm-txt-img-text-inner {
    padding: inherit;
}

/* Special handling for when entire block is selected but not editing text */
.wp-block[data-type="cm/txt-img-side-by-side"].is-selected:not(.is-typing) {
    /* When block is selected but not typing, allow wrapper styles */
}

.wp-block[data-type="cm/txt-img-side-by-side"].is-selected:not(.is-typing)[style*="background-color"] .cm-txt-img-text-inner {
    background-color: transparent; /* Reset text background when block background is intended */
}

.wp-block[data-type="cm/txt-img-side-by-side"].is-selected:not(.is-typing)[style*="border"] .cm-txt-img-text-inner {
    border: none; /* Reset text border when block border is intended */
}

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

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

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

/* Editor placeholder for no image selected */
.wp-block[data-type="cm/txt-img-side-by-side"] .cm-image-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="cm/txt-img-side-by-side"] .components-button {
    margin-bottom: 10px;
}

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