/* MOBILE RESPONSIVE FIXES - FORCED */

/* HEADER FIXES (Max Width 1100px) */
@media (max-width: 1100px) {

    /* Logo scaling */
    #frame-overlay .logo img {
        height: 35px !important;
    }

    #frame-overlay .header {
        padding: 1rem 0 !important;
        z-index: 99999 !important;
    }

    /* Hide Desktop Nav */
    #frame-overlay .nav-social .nav-item,
    #frame-overlay .nav-social .separator,
    #frame-overlay .nav-social .lang-selector {
        display: none !important;
    }

    /* Show Hamburger */
    #frame-overlay .hamburger-btn {
        display: flex !important;
    }

    #frame-overlay .header-container {
        padding: 0 20px !important;
    }
}

/* GLOBAL SPLIT LAYOUT FIXES (Home, Partners, Contact) */
@media (max-width: 1100px) {

    /* Force Column Reverse (Image on Top, Text on Bottom) */
    .split-container {
        display: flex !important;
        flex-direction: column-reverse !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Visual/Image Section */
    .split-visual {
        position: relative !important;
        /* No more absolute */
        width: 100% !important;
        height: 50vh !important;
        min-height: 50vh !important;
        /* Force override of any 100vh min-height */
        /* Fixed height for mobile */
        flex: none !important;
        background-position: center top !important;
        background-size: cover !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* Content Section */
    .split-content {
        width: 100% !important;
        padding: 40px 20px !important;
        flex: none !important;
        height: auto !important;
    }

    /* Typography Adjustments */
    .headline h1,
    .main-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
}

/* FORM FIXES (Partners & Contact) */
@media (max-width: 1100px) {

    /* Force Single Column Grid */
    #form-fields-container {
        display: grid !important;
        grid-template-columns: 100% !important;
        /* Explicit 100% */
        gap: 20px !important;
        width: 100% !important;
    }

    /* Force all form groups to span full width */
    .form-group,
    .form-group-full,
    .form-control,
    .phone-input-group,
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        grid-column: 1 / -1 !important;
        /* Force span all columns */
        box-sizing: border-box !important;
    }

    /* Verification Card on Home */
    .verification-card {
        padding: 1.5rem !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Submit Button Fix */
    #btn-submit,
    .btn-submit,
    button[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        /* Larger touch area */
        margin-top: 25px !important;
        box-sizing: border-box !important;
        display: block !important;
        height: auto !important;
        min-height: 50px !important;
    }
}

/* Frame Overlay handled globally in frame.css now */

/* --- HOME PAGE SPECIFIC OVERRIDES (High Specificity) --- */
@media (max-width: 1100px) {
    #home-app .split-container {
        display: flex !important;
        flex-direction: column-reverse !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
    }

    #home-app .split-visual {
        position: relative !important;
        height: 50vh !important;
        width: 100% !important;
        flex: none !important;
        background-position: center !important;
        background-size: cover !important;
    }

    #home-app .split-content {
        width: 100% !important;
        flex: auto !important;
        padding: 40px 20px !important;
    }

    /* Force text photo sections to stack */
    #home-app .text-photo .split-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    #home-app .text-photo .split-image {
        width: 100% !important;
        height: 300px !important;
    }
}