/**
 * Figure Alignment Utility Classes
 *
 * These classes provide alignment controls for figure elements in WordPress.
 * They can be applied to figure elements to control the alignment of images.
 */

/* ===== DEBUG STYLES (REMOVED) ===== */
/* Debug styles removed for clean testing */

/* ===== HORIZONTAL ALIGNMENT (Primary) ===== */

/* Special handling for CM Percent/Fit images - preserve their block display and full width */
.size-cm-percent-fit.cm-figure-left {
    display: block;
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.size-cm-percent-fit.cm-figure-center {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.size-cm-percent-fit.cm-figure-right {
    display: block;
    text-align: right;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Regular figure alignment for non-CM Percent/Fit images */
.cm-figure-left:not(.size-cm-percent-fit) {
    display: flex;
    justify-content: flex-start;
    margin: 0;
}
 
.cm-figure-center:not(.size-cm-percent-fit) {
    display: flex;
    justify-content: center;
    margin: 0;
}
 
.cm-figure-right:not(.size-cm-percent-fit) {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

/* ===== VERTICAL ALIGNMENT (Secondary) ===== */

/* Special handling for CM Percent/Fit images with vertical alignment only */
.size-cm-percent-fit.cm-figure-top:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right),
.size-cm-percent-fit.cm-figure-middle:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right),
.size-cm-percent-fit.cm-figure-bottom:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right) {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Vertical alignment only when no horizontal class is present - for non-CM Percent/Fit */
.cm-figure-top:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right):not(.size-cm-percent-fit) {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.cm-figure-middle:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right):not(.size-cm-percent-fit) {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
 
.cm-figure-bottom:not(.cm-figure-left):not(.cm-figure-center):not(.cm-figure-right):not(.size-cm-percent-fit) {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
}

/* ===== COMBINED ALIGNMENTS ===== */

/* Special handling for CM Percent/Fit images with combined alignments */
.size-cm-percent-fit.cm-figure-top.cm-figure-left,
.size-cm-percent-fit.cm-figure-top.cm-figure-center,
.size-cm-percent-fit.cm-figure-top.cm-figure-right,
.size-cm-percent-fit.cm-figure-middle.cm-figure-left,
.size-cm-percent-fit.cm-figure-middle.cm-figure-center,
.size-cm-percent-fit.cm-figure-middle.cm-figure-right,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-left,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-center,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-right {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Apply text alignment for CM Percent/Fit combined alignments */
.size-cm-percent-fit.cm-figure-top.cm-figure-left,
.size-cm-percent-fit.cm-figure-middle.cm-figure-left,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-left {
    text-align: left;
}

.size-cm-percent-fit.cm-figure-top.cm-figure-center,
.size-cm-percent-fit.cm-figure-middle.cm-figure-center,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-center {
    text-align: center;
}

.size-cm-percent-fit.cm-figure-top.cm-figure-right,
.size-cm-percent-fit.cm-figure-middle.cm-figure-right,
.size-cm-percent-fit.cm-figure-bottom.cm-figure-right {
    text-align: right;
}

/* When both horizontal and vertical classes are applied, use a grid approach - for non-CM Percent/Fit */
.cm-figure-top.cm-figure-left:not(.size-cm-percent-fit),
.cm-figure-top.cm-figure-center:not(.size-cm-percent-fit),
.cm-figure-top.cm-figure-right:not(.size-cm-percent-fit),
.cm-figure-middle.cm-figure-left:not(.size-cm-percent-fit),
.cm-figure-middle.cm-figure-center:not(.size-cm-percent-fit),
.cm-figure-middle.cm-figure-right:not(.size-cm-percent-fit),
.cm-figure-bottom.cm-figure-left:not(.size-cm-percent-fit),
.cm-figure-bottom.cm-figure-center:not(.size-cm-percent-fit),
.cm-figure-bottom.cm-figure-right:not(.size-cm-percent-fit) {
    display: grid;
    margin: 0;
}

/* Top row alignments - for non-CM Percent/Fit */
.cm-figure-top.cm-figure-left:not(.size-cm-percent-fit) {
    justify-items: start;
    align-items: start;
}

.cm-figure-top.cm-figure-center:not(.size-cm-percent-fit) {
    justify-items: center;
    align-items: start;
}

.cm-figure-top.cm-figure-right:not(.size-cm-percent-fit) {
    justify-items: end;
    align-items: start;
}

/* Middle row alignments - for non-CM Percent/Fit */
.cm-figure-middle.cm-figure-left:not(.size-cm-percent-fit) {
    justify-items: start;
    align-items: center;
}

.cm-figure-middle.cm-figure-center:not(.size-cm-percent-fit) {
    justify-items: center;
    align-items: center;
}

.cm-figure-middle.cm-figure-right:not(.size-cm-percent-fit) {
    justify-items: end;
    align-items: center;
}

/* Bottom row alignments - for non-CM Percent/Fit */
.cm-figure-bottom.cm-figure-left:not(.size-cm-percent-fit) {
    justify-items: start;
    align-items: end;
}

.cm-figure-bottom.cm-figure-center:not(.size-cm-percent-fit) {
    justify-items: center;
    align-items: end;
}

.cm-figure-bottom.cm-figure-right:not(.size-cm-percent-fit) {
    justify-items: end;
    align-items: end;
}

/* Default alignment (if no vertical alignment class is applied) */
.wp-block-image figure:not(.cm-figure-top):not(.cm-figure-middle):not(.cm-figure-bottom) {
    display: flex;
    justify-content: center; /* Center alignment by default */
}

/* ===== EQUAL HEIGHT COLUMNS ===== */

/* Container for equal height columns */
.cm-equal-height-container {
    display: flex;
    flex-wrap: wrap;
    float: none;
    margin: 0 auto;    
}

/* Equal height columns */
.cm-equal-height-column {
    display: flex;
    flex-direction: column;
}

/* Make figures inside equal height columns fill the available space */
.cm-equal-height-column figure {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make images inside equal height columns maintain aspect ratio */
.cm-equal-height-column figure img {
    object-fit: contain;
    max-height: 100%;
}

.block-editor-block-list__block.cm-right-side,
.block-editor-block-list__block.cm-left-side{
    box-sizing: border-box;
}
.cm-right-side{
 
}
.cm-left-side{
     
}