/* ==========================================================================
   DOCX Importer - 2-Column Equal Height Image & Layout Styles
   Proportional Column Widths - 100% Full Image Visibility (NO CROPPING)
   ========================================================================== */

/* 1. Columns Container */
.docx-columns,
.wp-block-columns,
.wp-block-columns.is-layout-flex,
.editor-styles-wrapper .wp-block-columns,
div[data-type="core/columns"] {
    display: flex !important;
    gap: 16px !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
}

/* 2. Column Items - Proportional flex-basis determines width without forcing 50/50 */
.docx-column,
.wp-block-column,
.wp-block-column.is-layout-flow,
.editor-styles-wrapper .wp-block-column,
div[data-type="core/column"] {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* 3. Figure & Image Block Wrapper */
.docx-column figure,
.docx-column .wp-block-image,
.wp-block-columns .wp-block-column figure,
.wp-block-columns .wp-block-column .wp-block-image,
.editor-styles-wrapper .wp-block-columns .wp-block-column figure,
.editor-styles-wrapper .wp-block-columns .wp-block-column .wp-block-image,
div[data-type="core/column"] figure,
div[data-type="core/column"] .wp-block-image {
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* 4. Resizable wrapper inside Gutenberg editor */
.wp-block-columns .wp-block-column .components-resizable-box__container,
div[data-type="core/column"] .components-resizable-box__container {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* 5. CRITICAL: Full Image Content - NO CROPPING (height auto with proportional columns) */
.docx-column figure img,
.docx-column img,
.wp-block-columns .wp-block-column img,
.wp-block-columns .wp-block-column figure img,
.wp-block-columns .wp-block-column .wp-block-image img,
.editor-styles-wrapper .wp-block-columns .wp-block-column img,
.editor-styles-wrapper .wp-block-columns .wp-block-column figure img,
.editor-styles-wrapper .wp-block-columns .wp-block-column .wp-block-image img,
div[data-type="core/columns"] div[data-type="core/column"] img,
div[data-type="core/column"] img,
.docx-table td figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
}

/* 6. Image Captions */
.docx-caption,
figcaption.wp-element-caption,
.wp-block-columns .wp-block-column figcaption,
.editor-styles-wrapper figcaption.wp-element-caption,
div[data-type="core/column"] figcaption {
    text-align: center !important;
    font-style: italic !important;
    font-size: 13px !important;
    color: #555 !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
    display: block !important;
}

.docx-caption em,
figcaption.wp-element-caption em {
    font-style: italic !important;
    font-size: 13px !important;
}

.docx-caption strong,
figcaption.wp-element-caption strong {
    font-weight: 700 !important;
    font-style: normal !important;
}

/* 7. Tables */
.docx-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 1.5em 0 !important;
}
.docx-table td {
    vertical-align: top !important;
}
.docx-table figure {
    margin: 0 auto !important;
    text-align: center !important;
}

/* 8. Mobile Responsive */
@media (max-width: 600px) {
    .docx-columns,
    .wp-block-columns {
        flex-direction: column !important;
    }
    .docx-column,
    .wp-block-column,
    .wp-block-columns .wp-block-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .wp-block-columns .wp-block-column img,
    .docx-columns .docx-column img {
        height: auto !important;
        max-height: none !important;
    }
}