/* MOBILE FIRST RESPONSIVE DESIGN */
/* Base: 430x930 (Standard Mobile) */

/* === ANDROID DEVICES === */
@media screen and (max-width: 480px) and (orientation: portrait) {
    /* Standard Android phones */
    .hero-bg {
        background-size: 120% auto !important;
        background-position: center -20px !important;
    }
    
    header {
        min-height: 75vh !important;
        padding: 0 12px !important;
    }
    
    h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .copper-glass {
        padding: 16px !important;
        margin: 8px 0 !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
    }
    
    .modal-body {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
}

/* === SAMSUNG DEVICES === */
@media screen and (max-width: 430px) and (max-height: 930px) and (orientation: portrait) {
    /* Samsung Galaxy S series */
    body {
        font-size: 14px !important;
    }
    
    .hero-bg {
        background-size: 110% auto !important;
        background-position: center -10px !important;
    }
    
    header {
        min-height: 70vh !important;
    }
    
    h1 {
        font-size: 1.8rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .copper-glass {
        padding: 14px !important;
        border-radius: 8px !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    #legal-modules-grid > div {
        padding: 8px 4px !important;
        font-size: 7px !important;
    }
    
    .modal-title {
        font-size: 1rem !important;
    }
}

/* === XIAOMI DEVICES === */
@media screen and (max-width: 393px) and (max-height: 851px) and (orientation: portrait) {
    /* Xiaomi Mi/Redmi series */
    .hero-bg {
        background-size: 115% auto !important;
        background-position: center -15px !important;
    }
    
    header {
        min-height: 68vh !important;
        padding: 0 10px !important;
    }
    
    h1 {
        font-size: 1.7rem !important;
        letter-spacing: 0.05em !important;
    }
    
    .grid {
        gap: 10px !important;
    }
    
    .copper-glass {
        padding: 12px !important;
        margin: 6px 0 !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        padding: 0 8px !important;
    }
    
    #legal-modules-grid > div {
        padding: 6px 2px !important;
        font-size: 6px !important;
        border-radius: 4px !important;
    }
    
    .modal-body {
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
}

/* === APPLE iOS DEVICES === */
@media screen and (max-width: 414px) and (max-height: 896px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 11, 12, 13, 14 series */
    .hero-bg {
        background-size: 105% auto !important;
        background-position: center top !important;
    }
    
    header {
        min-height: 72vh !important;
        padding: 0 16px !important;
    }
    
    h1 {
        font-size: 1.9rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
    }
    
    .copper-glass {
        padding: 18px !important;
        border-radius: 12px !important;
        backdrop-filter: blur(20px) !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 0 auto !important;
    }
    
    #legal-modules-grid > div {
        padding: 10px 6px !important;
        font-size: 7px !important;
        border-radius: 8px !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .modal-card {
        border-radius: 16px !important;
        backdrop-filter: blur(25px) !important;
    }
    
    .modal-body {
        padding: 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* === TABLET DEVICES === */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* iPad, Android tablets */
    .hero-bg {
        background-size: cover !important;
        background-position: center center !important;
    }
    
    header {
        min-height: 60vh !important;
        padding: 0 32px !important;
    }
    
    h1 {
        font-size: 3.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    
    .copper-glass {
        padding: 32px !important;
        margin: 16px 0 !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
        max-width: 600px !important;
    }
    
    #legal-modules-grid > div {
        padding: 16px 12px !important;
        font-size: 10px !important;
    }
    
    .modal-card {
        max-width: 800px !important;
        max-height: 85vh !important;
    }
    
    .modal-body {
        padding: 32px !important;
        font-size: 1rem !important;
    }
}

/* === LANDSCAPE ORIENTATION === */
@media screen and (orientation: landscape) and (max-height: 500px) {
    header {
        min-height: 90vh !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .copper-glass {
        padding: 12px !important;
    }
    
    #legal-modules-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
    
    #legal-modules-grid > div {
        padding: 4px 2px !important;
        font-size: 6px !important;
    }
}

/* === TOUCH OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices */
    .copper-glass {
        min-height: 44px !important; /* iOS touch target */
    }
    
    #legal-modules-grid > div {
        min-height: 40px !important;
        min-width: 40px !important;
    }
    
    .close-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    
    .btn-liquid {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
}

/* === HIGH DPI DISPLAYS === */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    /* Retina displays */
    .text-metallic {
        filter: drop-shadow(0 1px 8px rgba(251, 146, 60, 0.8)) !important;
    }
    
    .copper-glass {
        border-width: 0.5px !important;
    }
    
    #legal-modules-grid > div {
        border-width: 0.5px !important;
    }
}