/* Global Responsive Resets */
html, body {
    overflow-x: hidden;
    width: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Base Mobile Overrides */
@media screen and (max-width: 768px) {
    /* Stack generic row layouts */
    .row, .flex, .grid, .columns, .grid-container,
    [class*="grid"], [class*="flex"], [class*="col"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Padding & Margin adjustments */
    .section, .container, .page-width, section, header, footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* Typography scaling */
    h1, .h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }
    h2, .h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    h3, .h3 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    p, body, li {
        font-size: 1rem !important;
    }
    
    /* Hide some desktop elements */
    .desktop-only, .hide-on-mobile {
        display: none !important;
    }
    
    /* Buttons full width */
    .btn, button, .button {
        width: 100% !important;
        text-align: center;
        margin-bottom: 10px;
    }
    
    /* Fix overflowing tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Specific overrides for very small screens */
@media screen and (max-width: 480px) {
    h1, .h1 {
        font-size: 1.8rem !important;
    }
    h2, .h2 {
        font-size: 1.5rem !important;
    }
}