/* 
   Mobile and Responsive Layout Optimizations for Microarea 
   Ensures seamless visibility on all mobile screens and tablets
*/

/* 1. Prevent global horizontal scrolling overflow */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* 2. Responsive videos, iframes and embeds */
embed, iframe, object, video {
    max-width: 100% !important;
}

.et_pb_video_box iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
}

/* 3. Word wrapping to prevent long titles from breaking viewport */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 4. Font size scaling for smaller screens (Mobile & Tablet) */
@media (max-width: 767px) {
    h1, h1 *, .et_pb_text h1, .et_pb_text_0 h1, .et_pb_text_1 h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    h2, h2 *, .et_pb_text h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    h3, h3 *, .et_pb_text h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
    p, span, li, a {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Spacing adjustments */
    .et_pb_section {
        padding: 20px 0 !important;
    }
    .et_pb_row {
        padding: 10px 0 !important;
        width: 90% !important;
    }
}

/* 5. Logo Grid Responsive Structure (2-Column Grid instead of 1 long list of 6) */
@media (max-width: 767px) {
    .et_pb_row_1, .et_pb_row_3 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 5px 0 !important;
    }
    .et_pb_row_1 .et_pb_column, .et_pb_row_3 .et_pb_column {
        width: calc(50% - 8px) !important;
        margin-bottom: 8px !important;
        float: none !important;
    }
    
    /* Adjust logo height inside the grid cards */
    .et_pb_row_1 .et_pb_image, .et_pb_row_3 .et_pb_image {
        margin-bottom: 0 !important;
    }
    .et_pb_row_1 img, .et_pb_row_3 img {
        max-height: 60px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* 6. Product Showcase Grid (5 blurbs) - Stack cleanly with margins */
@media (max-width: 767px) {
    .et_pb_row_5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .et_pb_row_5 .et_pb_column {
        width: 100% !important;
        margin-bottom: 0 !important;
        float: none !important;
    }
    .et_pb_blurb {
        padding: 15px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
    }
    .et_pb_blurb_content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* 7. Next Range Features Grid (4 blurbs) - 2x2 Clean Layout */
@media (max-width: 767px) {
    .et_pb_row_9 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .et_pb_row_9 .et_pb_column {
        width: calc(50% - 5px) !important;
        margin-bottom: 0 !important;
        float: none !important;
    }
    .et_pb_row_9 .et_pb_blurb {
        padding: 10px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    .et_pb_row_9 .et_pb_blurb_container {
        margin-top: 5px !important;
    }
    .et_pb_row_9 .et_pb_module_header {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
}

/* 8. Table Responsive View */
table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 9. Header Logo resizing on Mobile */
@media (max-width: 980px) {
    #logo {
        max-height: 36px !important;
        margin-top: 2px !important;
    }
}

/* 10. Divi contact form responsive columns */
@media (max-width: 767px) {
    .et_pb_contact_field {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}