/**************************************************************
   Tablets & Medium Viewports (980px down to 769px)
***************************************************************/
@media screen and (max-width: 980px) {
    #outerWrapper {
        width: 95%;
        margin: 15px auto;
    }
    
    #content {
        padding: 20px;
    }
    
    /* Responsive Video Component Fluidity Framework */
    .iframe-container {
        position: relative;
        width: 100%;
        max-width: 540px;
        margin: 15px auto;
        padding-bottom: 56.25%; /* Fixed 16:9 Aspect Ratio Boundary */
        height: 0;
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/**************************************************************
   Small Tablets & Mobile Landscape (768px down to 641px)
***************************************************************/
@media screen and (max-width: 768px) {
    /* Comprehensive table wrapper safety asset to handle responsive overflow */
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth kinetic scroll on iOS mobile devices */
        margin-bottom: 1.5rem;
    }
    
    .inc-analysis-container table {
        min-width: 600px; /* Guarantees standard column structure readability without text crashing */
    }
}

/**************************************************************
   Smartphones Landscape (640px down to 481px)
***************************************************************/
@media screen and (max-width: 640px) {
    #header {
        height: auto;
        padding: 10px;
    }
    
    #content {
        float: none;
        margin: 0;
        padding: 15px;
    }
}

/**************************************************************
   Smartphones Portrait & Compact Devices (480px and under)
***************************************************************/
@media screen and (max-width: 480px) {
    html {
        -webkit-text-size-adjust: 100%; /* Prevents modern iOS browsers from modifying text sizing */
    }
    
    #content {
        float: none;
        margin: 0;
        padding: 12px;
    }
    
    #content h1 {
        font-size: 1.45rem;
        margin: 5px 0 10px 0;
        text-align: left;
    }
    
    #content h2 {
        font-size: 1.25rem;
    }
    
    /* Full fluid width sizing logic for forms on portrait devices */
    input[type="text"], 
    select, 
    textarea,
    form fieldset label {
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
    }
}