/* ============================================
   ZOOM & HIGH DPI RESPONSIVE FIXES
   Handles browser zoom 150%+ and high DPI displays
   ============================================ */

/* 
   Problem: Media queries with fixed px values don't respond to browser zoom.
   Solution: Use container-based sizing and additional zoom-aware breakpoints.
*/

/*
   Breakpoint Summary (effective width after OS/browser scaling)
   ------------------------------------------------------------
   Tier A :  769px – 1500px  → Zoomed desktop (scale up to ±150%)
             - Sembunyikan sidebar kiri/kanan agar layout tetap mode desktop
             - Paksa container full-width + padding elastis
   Tier B :  769px – 1100px  → Ekstra sempit
             - Dua kolom menjadi 2-up
   Tier C :  769px – 960px   → Nyaris mobile
             - Semua grid sejajar 1 kolom
*/

/* Zoom-aware breakpoints using viewport units (Tier A) */
/* Hanya aktif untuk desktop yang di-zoom, BUKAN untuk mobile normal */
/* At 150% zoom, 1920px becomes ~1280-1500px effective width */
/* Terapkan untuk desktop (min-width: 769px) yang di-zoom */
@media (min-width: 769px) and (max-width: 1500px) {
    /* Adjust container for zoomed desktop */
    .dp-container {
        width: min(100%, 95vw);
        max-width: 100%;
        padding: 0 20px;
    }
    
    body.has-global-sidebars .dp-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Adjust grid layouts untuk zoomed desktop */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    /* Stack cards on smaller effective viewport (hanya untuk desktop zoomed) */
    .component-inovasi__grid,
    .component-layanan__grid,
    .component-berita__grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Hide sidebars ketika layar di-scale besar agar konten tetap mode desktop */
    .sidebar-kiri,
    .sidebar-kanan {
        display: none !important;
    }

    body.has-global-sidebars {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.has-global-sidebars .dp-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* At 175% zoom, 1920px becomes ~1097px effective width */
/* Hanya untuk desktop yang di-zoom */
@media (min-width: 769px) and (max-width: 1100px) {
    .dp-container {
        padding: 0 16px;
    }
    
    .section-card,
    .card {
        padding: 24px;
    }
    
    /* Force 2-column grid untuk zoomed desktop */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* At 200% zoom, 1920px becomes ~960px effective width */
/* Hanya untuk desktop yang di-zoom sangat tinggi */
@media (min-width: 769px) and (max-width: 960px) {
    .dp-container {
        padding: 0 16px;
    }
    
    /* Force single column for most grids (hanya untuk zoomed desktop) */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Stack navigation untuk zoomed desktop */
    .nav-links {
        flex-direction: column;
        gap: 8px;
    }
}

/* High DPI / Retina display adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure text remains readable */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Adjust spacing for high DPI */
    .section-card,
    .card {
        padding: clamp(20px, 2vw, 30px);
    }
}

/* Container-based responsive adjustments */
/* Use container queries where supported */
@supports (container-type: inline-size) {
    .dp-container {
        container-type: inline-size;
    }
    
    @container (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr !important;
        }
        
        .component-inovasi__grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        }
    }
}

/* Flexible typography for zoom */
html {
    font-size: clamp(14px, 1vw + 0.5rem, 16px);
}

/* Ensure images scale properly */
img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Flexible spacing using clamp */
.section-card,
.card {
    padding: clamp(16px, 2vw, 30px);
    margin-bottom: clamp(16px, 2vw, 24px);
}

/* Responsive tables for zoom (hanya desktop zoomed) */
@media (min-width: 769px) and (max-width: 1500px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    .apb-table {
        font-size: clamp(12px, 1.5vw, 14px);
    }
}

/* Form elements responsive to zoom */
input,
select,
textarea,
button {
    font-size: clamp(14px, 1vw + 0.5rem, 16px);
    padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 16px);
}

/* Navigation responsive to zoom (hanya desktop zoomed) */
@media (min-width: 769px) and (max-width: 1500px) {
    .site-header {
        padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
    }
    
    .nav-links {
        gap: clamp(8px, 1vw, 16px);
    }
    
    .nav-links a {
        font-size: clamp(13px, 1.2vw, 15px);
        padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 16px);
    }
}

/* Hero sections responsive to zoom (hanya desktop zoomed) */
@media (min-width: 769px) and (max-width: 1500px) {
    .dp-hero,
    .hero-apb,
    [class*="hero"] {
        padding: clamp(40px, 5vw, 60px) 0 clamp(30px, 4vw, 40px);
    }
    
    .dp-hero h1,
    .hero-apb h1 {
        font-size: clamp(2rem, 4vw, 3rem);
    }
    
    .dp-hero p,
    .hero-apb p {
        font-size: clamp(1rem, 1.5vw, 1.25rem);
    }
}

/* Sidebar adjustments for zoom (hanya desktop zoomed) */
@media (min-width: 769px) and (max-width: 1500px) {
    .sidebar-kiri,
    .sidebar-kanan {
        width: clamp(200px, 20vw, 280px);
    }
    
    body.has-global-sidebars .dp-container {
        width: calc(100% - clamp(200px, 20vw, 280px) * 2 - 10px);
    }
}

/* Mobile bottom nav for zoomed desktop */
@media (max-width: 1500px) and (min-width: 769px) {
    /* Show mobile nav if effective viewport is small */
    .mobile-bottom-nav {
        display: flex;
    }
    
    body {
        padding-bottom: 70px;
    }
}

/* Utility classes for zoom-aware layouts */
.zoom-responsive {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.zoom-responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

/* Override fixed widths that break on zoom (hanya desktop zoomed) */
@media (min-width: 769px) and (max-width: 1500px) {
    /* Force flexible containers untuk zoomed desktop */
    .dp-container,
    .container,
    .container-max {
        width: 100%;
        max-width: 100%;
    }
    
    /* Footer follows main content width when zoomed - menempel di sidebar */
    body.has-global-sidebars .saphira-footer {
        width: calc(100vw - var(--sidebar-left-width, 300px) - var(--sidebar-right-width, 300px) - 10px) !important;
        max-width: calc(100vw - var(--sidebar-left-width, 300px) - var(--sidebar-right-width, 300px) - 10px) !important;
        margin-left: calc(var(--sidebar-left-width, 300px) + 5px) !important;
        margin-right: calc(var(--sidebar-right-width, 300px) + 5px) !important;
    }
    
    /* Jika sidebar tersembunyi saat zoom (karena display: none), footer full width */
    body.has-global-sidebars .sidebar-kiri[style*="display: none"] ~ * .saphira-footer,
    body.has-global-sidebars .sidebar-kanan[style*="display: none"] ~ * .saphira-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}