/**
 * RAN Asgard Online - Responsive Styles
 * 
 * @author RAN Asgard Team
 * @version 1.0.0
 */

/* ========================================
   Mobile First (Base styles are mobile)
======================================== */

/* ========================================
   Small Devices (phones, 576px and up)
======================================== */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* ========================================
   Medium Devices (tablets, 768px and up)
======================================== */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    /* Grid adjustments */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Hide/Show */
    .md\:hidden {
        display: none !important;
    }
    
    .md\:block {
        display: block !important;
    }
    
    .md\:flex {
        display: flex !important;
    }
    
    /* Flex direction */
    .md\:flex-row {
        flex-direction: row;
    }
    
    /* Text sizes */
    .md\:text-lg {
        font-size: 1.125rem;
    }
    
    .md\:text-xl {
        font-size: 1.25rem;
    }
    
    .md\:text-2xl {
        font-size: 1.5rem;
    }
    
    .md\:text-3xl {
        font-size: 1.875rem;
    }
    
    .md\:text-4xl {
        font-size: 2.25rem;
    }
    
    .md\:text-5xl {
        font-size: 3rem;
    }
}

/* ========================================
   Large Devices (desktops, 1024px and up)
======================================== */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
    
    /* Desktop only visibility */
    .desktop-only {
        display: flex;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    /* Grid adjustments */
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Hide/Show */
    .lg\:hidden {
        display: none !important;
    }
    
    .lg\:block {
        display: block !important;
    }
    
    .lg\:flex {
        display: flex !important;
    }
    
    /* Text sizes */
    .lg\:text-xl {
        font-size: 1.25rem;
    }
    
    .lg\:text-2xl {
        font-size: 1.5rem;
    }
    
    .lg\:text-3xl {
        font-size: 1.875rem;
    }
    
    .lg\:text-4xl {
        font-size: 2.25rem;
    }
    
    .lg\:text-5xl {
        font-size: 3rem;
    }
    
    .lg\:text-6xl {
        font-size: 3.75rem;
    }
}

/* ========================================
   Extra Large Devices (1280px and up)
======================================== */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
    
    /* Grid adjustments */
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ========================================
   2XL Devices (1536px and up)
======================================== */
@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
}

/* ========================================
   Landscape Mode Adjustments
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 80px 0;
    }
    
    .hero-stats {
        margin-top: 20px;
    }
}

/* ========================================
   High DPI / Retina Displays
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    /* Use higher resolution images for retina */
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Reduced Motion
======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .particles,
    .embers-container,
    .smoke-container,
    .spark-trails {
        display: none;
    }
}

/* ========================================
   Dark Mode (already dark, but for system preference)
======================================== */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme */
}

/* ========================================
   Print Styles
======================================== */
@media print {
    body {
        display: none !important;
    }
}

/* ========================================
   Touch Device Optimizations
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn-primary:hover,
    .btn-secondary:hover,
    .card:hover,
    .feature-card:hover,
    .news-card:hover {
        transform: none;
    }
    
    /* Increase touch targets */
    .navbar-link,
    .mobile-menu-link {
        min-height: 44px;
    }
    
    /* Disable parallax effects */
    .mouse-glow {
        display: none;
    }
}

/* ========================================
   Safe Area Insets (for notched devices)
======================================== */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    
    .footer {
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
}