/* Universal reset for html and body to ensure full viewport usage without default margins/padding */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden !important; /* Force no scrollbars on html/body */
}

/* Global body background */
body {
    background-color: black !important;
}

/* Base styles for the main container */
.evie-two-box-container {
    display: flex !important;
    flex-direction: row !important; /* Always keep them horizontal */
    justify-content: center; /* Center the two boxes horizontally */
    align-items: center; /* Vertically center the boxes */
    width: 100vw; /* Full viewport width */
    padding: 1vw; /* Equal padding from screen edges, adjusts with viewport width */
    gap: 1vw; /* Space between the two boxes */
    box-sizing: border-box;
    overflow-x: hidden;
    /* CRITICAL FIX: Ensure the main container itself is scrollable if its content exceeds its height */
    overflow-y: auto !important; /* Allow vertical scrolling within the container if needed */

    height: 100vh; /* Default height for normal view (when toolbar is not visible) */
}

/* Adjust height and position for the main container when the Concrete CMS toolbar is visible. */
html.ccm-toolbar-visible .evie-two-box-container {
    height: calc(100vh - 48px + 0px) !important; /* Use !important to ensure override */
    position: relative;
    top: calc(48px - 48px) !important; /* Use !important to ensure override */
.wrapper_box_a,
.wrapper_box_b {
    width: calc(52vw - 96px + 0px) !important; /* Exact width */
    
    }
}

/* Styling for the individual boxes */
.wrapper_box_a,
.wrapper_box_b {
    background-color: white;
    flex-grow: 0;
    flex-shrink: 0;
    width: 48.5vw; /* Exact width */
    max-width: 100%;
    max-height: 100%; /* FIX: Restrict height to be equal to width (47vw) to enforce 1:1 aspect ratio */
    aspect-ratio: 1 / 1; /* Keep this for semantic clarity */
    box-sizing: border-box;
    overflow: auto; /* Allow content to scroll within the individual white boxes */
}

/* Media query for mobile landscape */
@media (max-aspect-ratio: 1/1) and (max-width: 768px) {
    .evie-two-box-container {
        padding: 1vw;
        gap: 1vw;
    }
    .wrapper_box_a,
    .wrapper_box_b {
        width: 48.5vw;
        max-width: 100%;
        max-height: 100%; /* FIX: Link height to width for perfect 1:1 aspect ratio */
        aspect-ratio: 1 / 1;
    }
}

/* Concrete CMS specific classes for edit mode - these will ensure editable areas are visually clear */
body.ccm-edit-mode .wrapper_box_a,
body.ccm-edit-mode .wrapper_box_b {
    border: 1px dashed #ccc; /* Visual cue for editable areas */
}