/* =========================
   MG LEADBUILDER 2025 – FLUID SPACING SYSTEM
   New fluid gap and section padding system
   ========================= */

:root {
    /* Top and Bottom Padding All Containers - Percentage-based for container-relative */
    --section-xxl-padding-min: 8%; /* ~150px @ 1920px */
    --section-xxl-padding-max: 10%; /* ~192px @ 1920px */ 
  
    --section-xl-padding-min: 6%; /* ~115px @ 1920px */
    --section-xl-padding-max: 7.5%; /* ~144px @ 1920px */
  
    --section-l-padding-min: 5%; /* ~96px @ 1920px */
    --section-l-padding-max: 6%; /* ~115px @ 1920px */
  
    --section-m-padding-min: 4%; /* ~77px @ 1920px */
    --section-m-padding-max: 5%; /* ~96px @ 1920px */
  
    --section-s-padding-min: 3%; /* ~58px @ 1920px */
    --section-s-padding-max: 3.5%; /* ~67px @ 1920px */
  
    --section-xs-padding-min: 2%; /* ~38px @ 1920px */
    --section-xs-padding-max: 2.5%; /* ~48px @ 1920px */
  
    --section-xxs-padding-min: 1.5%; /* ~29px @ 1920px */
    --section-xxs-padding-max: 2%; /* ~38px @ 1920px */

    /* Hero Sections Height Variable */
    --section-hero-height: 100vh; /* 100% the screen height */
  
    /* Offset Padding for Overlay Headers */
    --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */
}

/* ---- Section/Container Padding - Fluid Variants ---- */
/* Designer Controls spacing presets - NO !important to allow Elementor inline styles to override */
/* Section padding applies to TOP and BOTTOM only - side padding handled by container/Elementor controls */
/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system .mg-section-xxl:not(.e-child) {
    --container-default-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    --container-default-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
    --e-con-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    --e-con-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
    padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
    padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
}

body.mg-design-system .mg-section-xl:not(.e-child) {
    --container-default-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --container-default-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --e-con-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    --e-con-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
    padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
}

body.mg-design-system .mg-section-l:not(.e-child) {
    --container-default-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    --container-default-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
    --e-con-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    --e-con-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
    padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
    padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
}

body.mg-design-system .mg-section-m:not(.e-child) {
    --container-default-padding-top: clamp(3rem, 4vw, 5rem);
    --container-default-padding-bottom: clamp(3rem, 4vw, 5rem);
    --e-con-padding-top: clamp(3rem, 4vw, 5rem);
    --e-con-padding-bottom: clamp(3rem, 4vw, 5rem);
    padding-top: clamp(3rem, 4vw, 5rem);
    padding-bottom: clamp(3rem, 4vw, 5rem);
}

body.mg-design-system .mg-section-s:not(.e-child) {
    --container-default-padding-top: clamp(2.5rem, 3vw, 3.75rem);
    --container-default-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
    --e-con-padding-top: clamp(2.5rem, 3vw, 3.75rem);
    --e-con-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
    padding-top: clamp(2.5rem, 3vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
}

body.mg-design-system .mg-section-xs:not(.e-child) {
    --container-default-padding-top: clamp(1.5rem, 2vw, 2.5rem);
    --container-default-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
    --e-con-padding-top: clamp(1.5rem, 2vw, 2.5rem);
    --e-con-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
    padding-top: clamp(1.5rem, 2vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

body.mg-design-system :where(.mg-section-xxs:not(.e-child), .mg-section-xxs.e-con:not(.e-child), .mg-section-xxs.e-parent:not(.e-child)) {
    --container-default-padding-top: clamp(0.5rem, 1vw, 1rem);
    --container-default-padding-bottom: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-top: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-bottom: clamp(0.5rem, 1vw, 1rem);
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

/* Full Viewport Height Sections */
.mg-section-100vh {
    min-height: var(--section-hero-height) !important;
}

.mg-section-100vh .e-con-inner {
    justify-content: center !important;
}

/* ---- HEADER UTILITIES ---- */

/* Standard Header: XXS padding with no bottom padding (for nav at bottom edge) */
/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system :where(.mg-header-std:not(.e-child), .mg-header-std.e-con:not(.e-child), .mg-header-std.e-parent:not(.e-child)) {
    --container-default-padding-top: clamp(0.5rem, 1vw, 1rem);
    --container-default-padding-bottom: 0;
    --e-con-padding-top: clamp(0.5rem, 1vw, 1rem);
    --e-con-padding-bottom: 0;
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: 0;
    /* Side padding handled by Designer Controls (--mg-container-padding-horizontal) */
}

/* Apply XXS gap to standard header */
body.mg-design-system .mg-header-std,
body.mg-design-system .mg-header-std .e-con-inner {
    --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
    column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

/* Asymmetric Edge-to-Edge Layouts */

/* ---- EDGE LEFT (flush left) ---- */

/* Content bleeds to left edge (50/50 default), right side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent) {
    /* No vertical padding - edge-to-edge vertically too */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Left side: 0 padding, right side: align with boxed content */
    --container-default-padding-left: 0px !important;
    /* Calculate right padding: (50vw - content-width/2) + base padding */
    /* This makes the right column align with boxed content */
    --container-default-padding-right: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    padding-left: 0 !important;
    padding-right: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
}

/* Left column in mg-edge-left should be 50vw (50/50) */
body.mg-design-system .mg-edge-left > .e-child:first-child,
body.mg-design-system .mg-edge-left > .elementor-element:first-child {
    width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
}

/* 60/40 variant - left column 60vw (edge), right 40vw (content aligns with boxed) */
body.mg-design-system :where(.mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent) {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* No padding on parent - children handle their own padding */
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    align-items: stretch !important;
}

/* Left column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-left-60 > .e-child:first-child,
body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
    width: 60vw !important;
    max-width: 60vw !important;
    flex: 0 0 60vw !important;
    padding: 0 !important; /* No padding - true edge-to-edge */
    display: flex !important;
    flex-direction: column !important;
}

/* Right column (40%): Content aligns with boxed layout right edge */
body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2),
body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
    /* Calculate padding to align right edge with boxed content */
    /* Right padding = space from viewport edge to content edge */
    --mg-40-right-padding: calc((100vw - var(--mg-content-max-width)) / 2);
    
    /* Left padding: keep content away from the gap */
    padding-left: clamp(1.5rem, 3vw, 3rem) !important;
    /* Right padding: align with boxed content boundary */
    padding-right: max(var(--mg-40-right-padding), var(--mg-container-padding-horizontal)) !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ---- EDGE RIGHT (flush right) ---- */

/* Content bleeds to right edge (50/50 default), left side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent) {
    /* No vertical padding - edge-to-edge vertically too */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* Right side: 0 padding, left side: align with boxed content */
    /* Calculate left padding: (50vw - content-width/2) + base padding */
    --container-default-padding-left: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    --container-default-padding-right: 0px !important;
    padding-left: calc((50vw - var(--mg-content-max-width) / 2) + var(--mg-container-padding-horizontal)) !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
}

/* Right column in mg-edge-right should be 50vw (50/50) */
body.mg-design-system .mg-edge-right > .e-child:last-child,
body.mg-design-system .mg-edge-right > .elementor-element:last-child {
    width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
}

/* 40/60 variant - left 40vw (content aligns with boxed), right column 60vw (edge) */
body.mg-design-system :where(.mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent) {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* No padding on parent - children handle their own padding */
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* No gap - content containers handle their own spacing */
    --column-gap: 0 !important;
    column-gap: 0 !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    align-items: stretch !important;
}

/* Right column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-right-60 > .e-child:last-child,
body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
    width: 60vw !important;
    max-width: 60vw !important;
    flex: 0 0 60vw !important;
    padding: 0 !important; /* No padding - true edge-to-edge */
    display: flex !important;
    flex-direction: column !important;
}

/* Left column (40%): Content aligns with boxed layout left edge */
body.mg-design-system .mg-edge-right-60 > .e-child:first-child,
body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child,
body.mg-design-system .mg-edge-right-60.e-con > .e-con:first-child,
body.mg-design-system .mg-edge-right-60.e-parent > .e-con:first-child,
body.mg-design-system [data-element_type="container"].mg-edge-right-60 > [data-element_type="container"]:first-child {
    /* Calculate padding to align left edge with boxed content */
    /* Left padding = space from viewport edge to content edge */
    --mg-40-left-padding: calc((100vw - var(--mg-content-max-width, 1400px)) / 2);
    
    /* Left padding: align with boxed content boundary - FORCE with min fallback */
    padding-left: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
    /* Right padding: keep content away from the gap */
    padding-right: clamp(1.5rem, 3vw, 3rem) !important;
    
    /* Override any padding utility classes that might be applied */
    padding-inline-start: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
    padding-inline-end: clamp(1.5rem, 3vw, 3rem) !important;
    
    /* Built-in equal height behavior */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* ---- RESPONSIVE: Stack on Tablet ---- */
@media (max-width: 1024px) {
    
    /* Stack all edge variants */
    body.mg-design-system :where(
        .mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent,
        .mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent,
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
        flex-direction: column !important;
        --container-default-padding-left: 0px !important;
        --container-default-padding-right: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --column-gap: 0 !important;
        column-gap: 0 !important;
        --row-gap: 0 !important;
        row-gap: 0 !important;
        /* Remove min-height so content determines height */
        min-height: auto !important;
    }
    
    /* All columns go full width by default */
    body.mg-design-system .mg-edge-left > .e-child,
    body.mg-design-system .mg-edge-left > .elementor-element,
    body.mg-design-system .mg-edge-left-60 > .e-child,
    body.mg-design-system .mg-edge-left-60 > .elementor-element,
    body.mg-design-system .mg-edge-right > .e-child,
    body.mg-design-system .mg-edge-right > .elementor-element,
    body.mg-design-system .mg-edge-right-60 > .e-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* EDGE-LEFT variants: First child (flush left) stays edge-to-edge */
    body.mg-design-system .mg-edge-left > .e-child:first-child,
    body.mg-design-system .mg-edge-left > .elementor-element:first-child,
    body.mg-design-system .mg-edge-left-60 > .e-child:first-child,
    body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        padding: 0 !important; /* No padding on edge column */
    }
    
    /* EDGE-LEFT variants: Second child (content) gets normal padding */
    body.mg-design-system .mg-edge-left > .e-child:nth-child(2),
    body.mg-design-system .mg-edge-left > .elementor-element:nth-child(2),
    body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2),
    body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
        padding-left: var(--mg-container-padding-horizontal) !important;
        padding-right: var(--mg-container-padding-horizontal) !important;
    }
    
    /* EDGE-RIGHT variants: Last child (flush right) stays edge-to-edge */
    body.mg-design-system .mg-edge-right > .e-child:last-child,
    body.mg-design-system .mg-edge-right > .elementor-element:last-child,
    body.mg-design-system .mg-edge-right-60 > .e-child:last-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        padding: 0 !important; /* No padding on edge column */
    }
    
    /* EDGE-RIGHT variants: First child (content) gets normal padding */
    body.mg-design-system .mg-edge-right > .e-child:first-child,
    body.mg-design-system .mg-edge-right > .elementor-element:first-child,
    body.mg-design-system .mg-edge-right-60 > .e-child:first-child,
    body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child {
        padding-left: var(--mg-container-padding-horizontal) !important;
        padding-right: var(--mg-container-padding-horizontal) !important;
    }
    
    /* For edge-right variants, reverse order so right column (edge) appears on top */
    body.mg-design-system :where(
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
        flex-direction: column-reverse !important;
    }
}

/* Full Width Sections - No Side Padding */
.mg-section-full div {
    max-width: 100% !important;
}

/* Narrow Sections */
.mg-section-narrow .e-con-inner {
    max-width: var(--section-narrow) !important;
}

.mg-section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs) !important;
}

/* Offset Padding for Overlay Headers */
.mg-section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}


/* =========================
   EQUAL HEIGHT UTILITY
   Forces all child columns to match the tallest column's height
   Perfect for image + content layouts where image should match content height
   ========================= */

body.mg-design-system .mg-equal-height {
    /* Use flexbox for natural height behavior */
    display: flex !important;
    align-items: stretch !important; /* Stretch children to match tallest */
}

/* Ensure all direct children participate in equal height */
body.mg-design-system .mg-equal-height > .e-child,
body.mg-design-system .mg-equal-height > .elementor-element {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; /* Equal width, natural height */
}

/* Simple: Just make images fill their container width */
body.mg-design-system .mg-equal-height img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* That's it! Let flexbox handle the rest naturally */

/* Responsive: Stack on mobile but maintain equal height within each column */
@media (max-width: 1024px) {
    body.mg-design-system .mg-equal-height {
        flex-direction: column !important; /* Stack columns on mobile */
        display: flex !important;
    }
    
    /* Each column still maintains equal height of its own content */
    body.mg-design-system .mg-equal-height > .e-child,
    body.mg-design-system .mg-equal-height > .elementor-element {
        height: auto !important; /* Let content determine height on mobile */
        flex: none !important;
    }
}

/* End fluid spacing system */