/* Custom Full Width Container Block Styles */
.wp-block-mavix-fullwidth-container.mavix-fullwidth-container {
    box-sizing: border-box;
    width: 100%;
}

/* Break out of standard 1200px wrapper for Full Width alignment on Front-end */
.wp-block-mavix-fullwidth-container.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
}

/* Break out of standard 1200px wrapper for Wide Width alignment on Front-end */
@media screen and (min-width: 1200px) {
    .wp-block-mavix-fullwidth-container.alignwide {
        width: calc(100vw - 80px) !important;
        max-width: 1400px !important;
        margin-left: calc((100% - (100vw - 80px)) / 2) !important;
        margin-right: calc((100% - (100vw - 80px)) / 2) !important;
    }
}
@media screen and (min-width: 1480px) {
    .wp-block-mavix-fullwidth-container.alignwide {
        width: 1400px !important;
        margin-left: calc((100% - 1400px) / 2) !important;
        margin-right: calc((100% - 1400px) / 2) !important;
    }
}

/* Break out of standard 1200px wrapper for Image blocks styled with Full Width (Breakout) */
.wp-block-image.is-style-viewport-breakout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
}
.wp-block-image.is-style-viewport-breakout img {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
}

/* Editor-specific overrides to make the block full width in the Gutenberg admin backend */
.wp-block[data-type="mavix/fullwidth-container"][data-align="full"] {
    max-width: none !important;
    width: 100% !important;
}
.wp-block[data-type="mavix/fullwidth-container"][data-align="wide"] {
    max-width: 1400px !important;
    width: 100% !important;
}

/* Editor overrides for image block with Full Width (Breakout) style selected */
.wp-block[data-type="core/image"].is-style-viewport-breakout {
    max-width: none !important;
    /* width: 100% !important; */
}

/* Editor visual frame helper for empty container */
.wp-block-mavix-fullwidth-container.mavix-fullwidth-container:empty,
.wp-block-mavix-fullwidth-container.mavix-fullwidth-container .block-editor-block-list__layout:empty {
    min-height: 100px;
    border: 2px dashed #ccc;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-block-mavix-fullwidth-container.mavix-fullwidth-container:empty::before,
.wp-block-mavix-fullwidth-container.mavix-fullwidth-container .block-editor-block-list__layout:empty::before {
    content: "Full Width Container - Click + to add nested blocks";
    color: #666;
    font-size: 14px;
    font-family: inherit;
}