/**
 * CM Image FW Block - Centralized Styles
 * CSS Custom Properties injected by config.php via wp_add_inline_style()
 * Values defined in build_global_css_properties() method - SSOT compliance
 */

/* SSOT Two-Selector Pattern for FSE Compatibility */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw,
.wp-block-w4ya-cm-image-fw {
    box-sizing: border-box;
    display: var(--cm-image-fw-container-display);
    justify-content: var(--cm-image-fw-container-justify);
    align-items: var(--cm-image-fw-container-align);
    width: 100%;
    background-color: var(--cm-image-fw-default-bg);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* Image Element - Full Width, Centered */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw .cm-image-fw-img,
.wp-block-w4ya-cm-image-fw .cm-image-fw-img {
    width: var(--cm-image-fw-img-width);
    height: var(--cm-image-fw-img-height);
    display: var(--cm-image-fw-img-display);
    max-width: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Loaded State - Applied via JavaScript */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.cm-image-fw-loaded .cm-image-fw-img,
.wp-block-w4ya-cm-image-fw.cm-image-fw-loaded .cm-image-fw-img {
    opacity: 1;
}

/* Image Loaded State */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw .cm-image-fw-img.image-loaded,
.wp-block-w4ya-cm-image-fw .cm-image-fw-img.image-loaded {
    opacity: 1;
}

/* Focused Element State - For FSE targeting */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw .cm-focused-element,
.wp-block-w4ya-cm-image-fw .cm-focused-element {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Alignment Classes with SSOT Two-Selector Pattern */
.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.alignleft,
.wp-block-w4ya-cm-image-fw.alignleft {
    float: left;
    margin-right: 1rem;
}

.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.alignright,
.wp-block-w4ya-cm-image-fw.alignright {
    float: right;
    margin-left: 1rem;
}

.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.aligncenter,
.wp-block-w4ya-cm-image-fw.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.alignwide,
.wp-block-w4ya-cm-image-fw.alignwide {
    max-width: var(--wp--style--global--wide-size, 1400px);
}

.editor-styles-wrapper .wp-block-w4ya-cm-image-fw.alignfull,
.wp-block-w4ya-cm-image-fw.alignfull {
    max-width: none;
    width: 100%;
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .editor-styles-wrapper .wp-block-w4ya-cm-image-fw,
    .wp-block-w4ya-cm-image-fw {
        border: 2px solid currentColor;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .editor-styles-wrapper .wp-block-w4ya-cm-image-fw .cm-image-fw-img,
    .wp-block-w4ya-cm-image-fw .cm-image-fw-img {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .editor-styles-wrapper .wp-block-w4ya-cm-image-fw,
    .wp-block-w4ya-cm-image-fw {
        background: none !important;
        border: 1px solid #000;
    }

    .editor-styles-wrapper .wp-block-w4ya-cm-image-fw .cm-image-fw-img,
    .wp-block-w4ya-cm-image-fw .cm-image-fw-img {
        opacity: 1 !important;
    }
}