/* Responsive Overrides for News and Article Pages (detailnews.asp and similar pages) */
@media screen and (max-width: 768px) {
    /* Suppress the body background repeat and use clean white on mobile */
    body {
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Prevent horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Full width layout wrapper */
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }
    
    /* Header ad banner column hiding to prevent overflow */
    .brand-header .col-lg-9, 
    .brand-header .col-md-9, 
    .brand-header .col-sm-12:not(:first-child) {
        display: none !important;
    }
    
    /* Adjust brand header height and center logo */
    .brand-header {
        height: auto !important;
        min-height: auto !important;
        padding: 15px 0 !important;
        text-align: center !important;
    }
    .brand-header .col-lg-3, 
    .brand-header .col-md-3, 
    .brand-header .col-sm-12:first-child {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }
    .brand-header img {
        max-width: 220px !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    /* Prevent database-fetched article contents from overflowing */
    .news-body-content * {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Handle responsive tables within article contents */
    .news-body-content table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Adjust pagination button layout and margins */
    .pagination-wrapper-modern {
        justify-content: space-between !important;
        gap: 0.5rem !important;
        padding: 10px 0 !important;
        margin: 1.5rem 0 !important;
    }
    .btn-nav-pill {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    .btn-nav-pill.prev {
        padding-left: 6px !important;
    }
    .btn-nav-pill.next {
        padding-right: 6px !important;
    }
}