/* 
 * Mobile/Tablet Display Fix
 * Khắc phục vấn đề hiển thị không đúng trên mobile/tablet
 * Version: 1.0.1
 */

/* === TABLET FIXES === */

/* Tablet Portrait (768px to 1024px) - PRIORITY FIX */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Fix sidebar width cho tablet */
    :root {
        --sidebar-width: 220px; /* Giảm từ 280px xuống 220px */
        --container-width: 100%; /* Full width trên tablet */
    }
    
    /* Main content grid - Tối ưu cho tablet */
    .main-content {
        grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
        gap: 1rem; /* Giảm gap */
        max-width: 100vw;
        padding: 0 10px;
    }
    
    /* Navigation container - Responsive cho tablet */
    .main-navigation .container {
        max-width: calc(100vw - 2rem);
        padding: 0 1rem;
    }
    
    /* Posts grid - 2 columns trên tablet */
    .posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    /* Content area padding adjustment */
    .content-area {
        padding: 1rem;
    }
    
    /* Sidebar adjustments */
    .sidebar-left, .sidebar-right {
        padding: 1rem;
    }
    
    /* Widget title size */
    .widget-title {
        font-size: 1rem;
    }
    
    /* Banner height cho tablet */
    .site-banner {
        height: calc(var(--banner-height, 400px) * 0.8);
        min-height: 300px;
    }
    
    .banner-title {
        font-size: 2.2rem;
    }
    
    .banner-description {
        font-size: 1.1rem;
    }
}

/* Tablet Portrait Small (481px to 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Stack layout cho tablet nhỏ */
    .main-content {
        display: block !important;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .content-area {
        margin-bottom: 2rem;
        order: 1;
    }
    
    .sidebar-left, .sidebar-right {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        order: 2;
    }
    
    /* 2 columns posts cho tablet nhỏ */
    .posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    /* Banner responsive */
    .site-banner {
        height: calc(var(--banner-height, 400px) * 0.7);
        min-height: 250px;
    }
    
    .banner-title {
        font-size: 1.8rem;
    }
    
    .banner-description {
        font-size: 1rem;
    }
}

/* === MOBILE FIXES === */

/* Mobile (up to 480px) - ENHANCED */
@media screen and (max-width: 480px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Container full width */
    .container {
        max-width: 100%;
        padding: 0 10px;
    }
    
    /* Header mobile fix */
    .site-header {
        padding: 0.5rem 0;
    }
    
    .header-content {
        padding: 0 10px;
    }
    
    /* Navigation mobile - Full width */
    .main-navigation {
        margin: 0;
    }
    
    .main-navigation .container {
        max-width: 100%;
        padding: 0;
    }
    
    /* Main content - Single column */
    .main-content {
        display: block !important;
        width: 100%;
        margin: 1rem 0;
        padding: 0 10px;
    }
    
    .content-area {
        width: 100%;
        margin-bottom: 2rem;
        padding: 1rem;
        box-sizing: border-box;
    }
    
    .sidebar-left, .sidebar-right {
        width: 100%;
        margin-bottom: 1rem;
        padding: 1rem;
        box-sizing: border-box;
    }
    
    /* Posts - Single column mobile */
    .posts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        width: 100%;
    }
    
    .post-item {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile banner */
    .site-banner {
        height: calc(var(--banner-height, 400px) * 0.6);
        min-height: 200px;
        max-height: 50vh;
    }
    
    .banner-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    .banner-description {
        font-size: 0.9rem;
    }
    
    .banner-content {
        padding: 1rem;
    }
    
    /* Mobile menu improvements */
    .menu-toggle {
        display: flex !important;
        width: 100%;
        justify-content: space-between;
        padding: 1rem;
    }
    
    .primary-menu-container {
        display: none;
        width: 100%;
    }
    
    .primary-menu-container.active {
        display: block !important;
    }
    
    /* Footer mobile */
    .footer-widgets {
        display: block;
    }
    
    .footer-widget {
        margin-bottom: 2rem;
        width: 100%;
    }
}

/* === LANDSCAPE MOBILE FIXES === */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Banner height adjustment for landscape */
    .site-banner {
        height: calc(var(--banner-height, 400px) * 0.4);
        min-height: 180px;
        max-height: 40vh;
    }
    
    .banner-title {
        font-size: 1.3rem;
    }
    
    .banner-description {
        font-size: 0.85rem;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */

/* GPU acceleration for mobile animations */
@media (max-width: 768px) {
    .sidebar-left, .sidebar-right, .content-area {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Touch optimization */
    a, button, .clickable {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
}

/* === HIGH-DPI DISPLAY SUPPORT === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .site-banner {
        background-size: cover;
        background-attachment: scroll; /* Fix for high-DPI mobile */
    }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
@media (max-width: 768px) {
    /* Better focus indicators */
    a:focus, button:focus, input:focus, textarea:focus {
        outline: 2px solid var(--accent-color, #3498db);
        outline-offset: 2px;
    }
    
    /* Skip links */
    .skip-link:focus {
        position: absolute;
        left: 6px;
        top: 7px;
        z-index: 999999;
        padding: 8px 16px;
        background: var(--accent-color, #3498db);
        color: white;
        text-decoration: none;
        border-radius: 3px;
    }
}

/* === DEBUG HELPERS (Development only) === */
@media (max-width: 768px) {
    .mobile-debug-info {
        position: fixed;
        top: 0;
        right: 0;
        background: rgba(255, 0, 0, 0.8);
        color: white;
        padding: 5px 10px;
        font-size: 12px;
        z-index: 9999;
        border-radius: 0 0 0 5px;
        font-family: monospace;
    }
    
    /* Show current breakpoint (for development) */
    body::before {
        content: 'Mobile: ' attr(data-breakpoint);
        position: fixed;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 255, 0.8);
        color: white;
        padding: 5px 10px;
        font-size: 11px;
        z-index: 9998;
        font-family: monospace;
        display: none; /* Enable only during development */
    }
}

/* === PRINT STYLES === */
@media print {
    .main-content {
        display: block !important;
        width: 100% !important;
    }
    
    .sidebar-left, .sidebar-right {
        display: none !important;
    }
    
    .site-banner {
        height: auto !important;
        min-height: auto !important;
        page-break-inside: avoid;
    }
}