/**
 * Container Columns Block - Minimal Styles
 * Works in frontend, FSE editor, and block editor environments
 */

.editor-styles-wrapper .wp-block-w4ya-cm-container-columns,
.wp-block-w4ya-cm-container-columns {
    display: block;
    width: 100%;
    clear: both;
}

/* Responsive clearfix */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns::after,
.wp-block-w4ya-cm-container-columns::after {
    content: "";
    display: table;
    clear: both;
}

/* Allow WordPress flexbox for equal-height columns, ensure proper width and alignment */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-columns,
.wp-block-w4ya-cm-container-columns .wp-block-columns {
    display: flex !important;
    width: 100%;
    align-items: stretch;
}

.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-columns::after,
.wp-block-w4ya-cm-container-columns .wp-block-columns::after {
    content: "";
    display: table;
    clear: both;
}

/* Flex column blocks with responsive width classes, equal heights */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column,
.wp-block-w4ya-cm-container-columns .wp-block-column {
    flex-grow: 0 !important;
    flex-basis: auto !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Ensure all column variations respect the responsive width classes */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column[class*="cm-container-columns__column-"],
.wp-block-w4ya-cm-container-columns .wp-block-column[class*="cm-container-columns__column-"] {
    max-width: none !important;
    overflow: hidden; /* Contain all content within column boundaries */
}

.wp-block-w4ya-cm-container-columns .wp-block-columns{
    margin-bottom: 0;
}
 
/* Specific column styling */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-1,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-2,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-3,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-4,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-5,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-6,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-1,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-2,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-3,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-4,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-5,
.wp-block-w4ya-cm-container-columns .wp-block-column.cm-container-columns__column-6 {
    max-width: none !important;
    overflow: hidden;
}

/* Ensure all content respects column width */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column > *,
.wp-block-w4ya-cm-container-columns .wp-block-column > * {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Handle images specifically */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column img,
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column figure,
.wp-block-w4ya-cm-container-columns .wp-block-column img,
.wp-block-w4ya-cm-container-columns .wp-block-column figure {
    max-width: 100% !important;
    height: auto;
}

/* Enable vertical alignment for content within columns */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column > *,
.wp-block-w4ya-cm-container-columns .wp-block-column > * {
    flex: 1;
}

/* Support vertical centering for figures with cm-figure-middle class */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-middle,
.wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Support horizontal centering for figures with cm-figure-center class */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-center,
.wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-center {
    display: flex;
    justify-content: center;
}

/* When both center and middle are applied */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-center.cm-figure-middle,
.wp-block-w4ya-cm-container-columns .wp-block-column figure.cm-figure-center.cm-figure-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Column spacing */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column:first-child,
.wp-block-w4ya-cm-container-columns .wp-block-column:first-child {
    padding-left: 0;
}

.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column:last-child,
.wp-block-w4ya-cm-container-columns .wp-block-column:last-child {
    padding-right: 0;
}

/* Editor-specific styles for better visual feedback */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column,
.wp-block-w4ya-cm-container-columns .wp-block-column {
    min-height: 50px;
    border: 1px dashed #ccc;
    position: relative;
}

.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column:empty::before,
.wp-block-w4ya-cm-container-columns .wp-block-column:empty::before {
    content: "Column " attr(data-column);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
    pointer-events: none;
}

/* Hide editor column indicators when block has content */
.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column:not(:empty),
.wp-block-w4ya-cm-container-columns .wp-block-column:not(:empty) {
    border: none;
}

.editor-styles-wrapper .wp-block-w4ya-cm-container-columns .wp-block-column:not(:empty)::before,
.wp-block-w4ya-cm-container-columns .wp-block-column:not(:empty)::before {
    display: none;
}