/*
 * Vero Reverse Motion Styles
 * Version 2.6
 */

.vrm-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.vrm-container {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: flex-start;
}

/* ----------------------------------------------------
 * Vertical Setup
 * Columns sit side by side natively as a flex row
 * ---------------------------------------------------- */
.vrm-direction-vertical .vrm-container {
    flex-direction: row;
}

.vrm-direction-vertical .vrm-child {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.vrm-direction-vertical .vrm-child > .e-con,
.vrm-direction-vertical .vrm-child > .e-container,
.vrm-direction-vertical .vrm-child > .elementor-column {
    width: 100%;
    min-height: 100vh;
    transition: transform 0.3s ease;
}

/* ----------------------------------------------------
 * Horizontal Setup
 * Rows sit on top of each other
 * Elements inside row sit side by side
 * ---------------------------------------------------- */
.vrm-direction-horizontal .vrm-container {
    flex-direction: column;
}

.vrm-direction-horizontal .vrm-child {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: visible; /* elements can leak horizontally before hidden by wrapper */
}

/* We force elements to naturally flow left-to-right */
.vrm-direction-horizontal .vrm-child > .e-con,
.vrm-direction-horizontal .vrm-child > .e-container,
.vrm-direction-horizontal .vrm-child > .elementor-column {
    min-width: 100vw;
    width: max-content;
    height: 100%;
    min-height: 100%; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.3s ease;
}

/* Base Constraints for Nested elementor injection drop targets */
.vrm-child > .e-con,
.vrm-child > .e-container,
.vrm-child > .elementor-column {
    min-height: 100px;
    min-width: 100px;
}

/* 
 * Editor Overrides: Make sure GSAP constraints are removed 
 * so users can freely drop Elementor Elements into the columns 
 */
body.elementor-editor-active .vrm-wrapper,
.vrm-editor-mode.vrm-wrapper {
	height: auto !important;
	min-height: 50vh;
	overflow: visible !important;
}

body.elementor-editor-active .vrm-child,
.vrm-editor-mode .vrm-child {
    height: auto !important;
    min-height: 150px !important;
    width: 100% !important; /* Force width in editor */
}

body.elementor-editor-active .vrm-child > .e-con,
body.elementor-editor-active .vrm-child > .e-container,
body.elementor-editor-active .vrm-child > .elementor-column,
.vrm-editor-mode .vrm-child > .e-con,
.vrm-editor-mode .vrm-child > .e-container,
.vrm-editor-mode .vrm-child > .elementor-column {
    transform: none !important;
    position: relative !important;
    width: 100% !important;
    min-height: 150px !important;
    display: flex !important;
    outline: 2px dashed #ff00ff !important; /* Visual aid for empty drop zones */
    outline-offset: -2px;
    background-color: rgba(255, 0, 255, 0.03); /* Subtle tint */
    margin-bottom: 20px;
}

/* Mobile Disable Fallback Layout */
@media (max-width: 1024px) {
    .vrm-wrapper[data-disable-mobile="true"] {
        height: auto;
        overflow: visible;
    }
    .vrm-wrapper[data-disable-mobile="true"] .vrm-container {
        flex-direction: column; /* Overrides Horizontal and Vertical alike to force stacking */
    }
    .vrm-wrapper[data-disable-mobile="true"] .vrm-child {
        width: 100%;
        height: auto;
    }
    .vrm-wrapper[data-disable-mobile="true"] .vrm-child > .e-con,
    .vrm-wrapper[data-disable-mobile="true"] .vrm-child > .e-container,
    .vrm-wrapper[data-disable-mobile="true"] .vrm-child > .elementor-column {
        min-width: 100%;
        min-height: auto;
        width: 100%;
        transform: none !important;
        flex-direction: column; /* Force everything back to normal flow */
        flex-wrap: wrap;
    }
}