/* =========================================================================
   RESPONSIVE CORE ARCHITECTURE - MOBILE FIRST ENHANCEMENTS
   Overriding legacy WPBakery grids and absolute constants.
========================================================================= */

/* Use modern border-box globally */
html {
    box-sizing: border-box;
    font-size: 16px; /* Base rem size */
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Base structural fluid boundaries */
img, picture, video, iframe, figure {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* =========================================================================
   MOBILE & TABLET OVERRIDES (< 992px)
========================================================================= */
@media (max-width: 991px) {
    /* Collapse all WPBakery rows into full width block models */
    .vc_row.wpb_row.vc_row-fluid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        gap: 2rem !important; /* Spacing between stacked columns */
    }

    /* Target specific inner wrappers that used absolute margins */
    .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Force columns to take 100% width on responsive and wrap */
    .wpb_column {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* ======== UNIQUE MOBILE FOOTER GRID (3 Columns) ======== */
    /* Force the 3 footer menus into 3 equal side-by-side columns */
    #nd_options_footer_5 .vc_row.vc_inner {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 0 !important;
    }
    /* Logo and Description block takes full width */
    #nd_options_footer_5 .vc_row.vc_inner > .vc_col-sm-6 {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* The 3 menu blocks share the width equally (3 columns grid) */
    #nd_options_footer_5 .vc_row.vc_inner > .vc_col-sm-2 {
        width: 33.33% !important;
        flex: 0 0 33.33% !important;
        padding: 5px !important;
    }
    #nd_options_footer_5 .vc_col-sm-2 h6 {
        font-size: 12px !important;
        word-break: break-word !important; 
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    #nd_options_footer_5 .vc_col-sm-2 p, 
    #nd_options_footer_5 .vc_col-sm-2 a {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
    }
}

/* =========================================================================
   STRICT MOBILE BREAKPOINT (< 768px)
========================================================================= */
@media (max-width: 768px) {
    /* Fluid Typography Scale */
    /* Eradicate hardcoded font sizes below 768px in favor of clamp */
    h1, h2, h3, h4, h5, h6, .nd_options_first_font {
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        letter-spacing: normal !important;
    }

    h1, .h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
    h2, .h2 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; }
    h3, .h3 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; }
    p, span, div.wpb_wrapper {
        font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
        line-height: 1.6 !important;
    }

    /* Destroy "toxic" empty spacer sections configured for Desktop heights */
    .nicdark_section[style*="height"]:empty {
        display: none !important; /* Hide empty desktop spacers entirely on mobile */
    }
    
    .nicdark_section[style*="height"] {
        height: auto !important;
        max-height: 20px !important;
        margin-bottom: 0 !important;
    }
    
    /* Crush WPBakery dynamic paddings/margins which cause huge empty spaces */
    [class*="vc_custom_"] {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Overhaul Masonry Grids */
    .nd_travel_masonry_content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        height: auto !important;
    }

    /* Packages / Products specific override (Premium Mobile Card Layout) */
    .nd_travel_masonry_item {
        position: static !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 2rem !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }
    
    /* Ensure the Masonry Image is stunning and full width */
    .nd_travel_masonry_item img {
        width: 100% !important;
        min-height: 250px !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Always display the text overlay on mobile as hover is impossible */
    .nd_options_fadeout {
        opacity: 1 !important;
        visibility: visible !important;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) !important;
    }
    
    /* Ensure internal text stays perfectly readable */
    .nd_options_fadeout h3, .nd_options_fadeout p, .nd_options_fadeout h6 {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
    }

    /* Hide the broken empty colored circles from the theme UI on mobile */
    .nd_travel_packages_pg_l7_button:empty {
        display: none !important;
    }

    /* Improve touch zones for generic links (Accessibility Touch > 44px) */
    .wpb_wrapper a:not(.nd_options_color_white) {
        padding: 0.5rem 0;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent overflow in general layout containers */
    .nicdark_container, .nd_options_container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
    }
}