/* ============================================
   FLUXORIZE RESPONSIVE CSS
   Mobile, Tablet, Desktop Breakpoints
   ============================================ */

/* ============================================
   BREAKPOINTS:
   - Mobile: 320px - 767px
   - Tablet: 768px - 1023px
   - Desktop: 1024px+
   - Large Desktop: 1440px+
   ============================================ */

/* ============================================
   1. LARGE DESKTOP (1440px+)
   ============================================ */
@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
    }

    .section {
        padding: var(--space-24) 0;
    }
}

/* ============================================
   2. TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
    :root {
        --container-padding: var(--space-4);
    }

    /* Grid adjustments */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Header */
    .nav-menu {
        gap: var(--space-4);
    }

    /* Hero Section */
    .section-hero {
        min-height: auto;
        padding: var(--space-16) 0;
    }

    /* Cards */
    .card-scene {
        min-height: 350px;
        padding: var(--space-8);
    }

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-6);
    }
}

/* ============================================
   3. MOBILE (320px - 767px)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --container-padding: var(--space-4);
        --space-20: 3rem;
        --space-24: 4rem;
    }

    /* Typography adjustments */
    h1 {
        margin-bottom: var(--space-3);
    }

    h2 {
        margin-bottom: var(--space-3);
    }

    h3 {
        margin-bottom: var(--space-2);
    }

    p {
        margin-bottom: var(--space-3);
    }

    /* Grid - all single column */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Section spacing */
    .section {
        padding: var(--space-12) 0;
    }

    /* Container */
    .container {
        padding: 0 var(--space-4);
    }

    /* Header */
    .header-container {
        padding: var(--space-3) var(--space-4);
    }

    .logo {
        font-size: var(--text-xl);
    }

    .nav-menu {
        display: none;
        /* Will be replaced with mobile menu */
    }

    /* Hero Section */
    .section-hero {
        min-height: auto;
        padding: var(--space-12) 0;
    }

    /* Cards */
    .card {
        padding: var(--space-6);
    }

    .card-scene {
        min-height: 300px;
        padding: var(--space-6);
    }

    /* Buttons */
    .btn {
        width: 100%;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-sm);
    }

    /* Flex utilities */
    .flex-between {
        flex-direction: column;
        gap: var(--space-4);
    }

    /* Text alignment */
    .text-center-mobile {
        text-align: center;
    }

    /* WhatsApp button */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    /* Reduce parallax on mobile */
    .parallax-slow,
    .parallax-medium,
    .parallax-fast {
        transform: none !important;
    }
}

/* ============================================
   4. SMALL MOBILE (320px - 479px)
   ============================================ */
@media (max-width: 479px) {
    :root {
        --container-padding: var(--space-3);
    }

    .section {
        padding: var(--space-10) 0;
    }

    .card-scene {
        min-height: 250px;
        padding: var(--space-4);
    }
}

/* ============================================
   5. LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .section-hero {
        min-height: auto;
        padding: var(--space-8) 0;
    }
}

/* ============================================
   6. TOUCH DEVICES
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .hover-lift:hover {
        transform: none;
    }

    .hover-scale:hover {
        transform: none;
    }

    .hover-tilt:hover {
        transform: none;
    }

    /* Make tap targets larger */
    .btn {
        min-height: 48px;
    }

    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================
   7. PRINT STYLES
   ============================================ */
@media print {

    .header,
    .whatsapp-float,
    .scroll-progress {
        display: none;
    }

    .section {
        page-break-inside: avoid;
    }

    * {
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   8. HIGH RESOLUTION DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Optimize for retina displays */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================
   9. ADDITIONAL POLISH
   ============================================ */

/* Ripple Effect for Buttons */
.btn {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Smooth Image Loading */
img {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Selection Color */
::selection {
    background: var(--color-primary);
    color: white;
}

::-moz-selection {
    background: var(--color-primary);
    color: white;
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-light);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* Focus Visible (Accessibility) */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}