/* ==================================================================
* Responsive CSS Improvements for viewbaixeoapp.html
* Additional responsive styles to enhance mobile experience
================================================================== */

/* Mobile First Approach */
@media only screen and (max-width: 1023px) {
    /* Improved mobile layout */
    .split-col {
        padding: 2rem 1rem;
    }
    
    .col-left .content {
        text-align: center;
        max-width: 100%;
    }
    
    .logo-container {
        margin-bottom: 1.5rem;
    }
    
    .logo-img {
        max-width: 100px;
        height: auto;
        margin: 0 auto;
    }
    
    h1 {
        font-size: 1.4em;
        margin: 1rem 0 0.75rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 0.95em;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    
    .dl-wrapper {
        margin-top: 1.5rem;
        white-space: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .dl-btn {
        margin: 0;
        display: block;
    }
    
    .store-badge {
        height: 44px;
        width: auto;
        max-width: 160px;
    }
    
    .ios-mockup {
        transform: scale(0.8);
        margin: 0 auto;
    }
}

/* Small Mobile Devices */
@media only screen and (max-width: 480px) {
    .split-col {
        padding: 1.5rem 0.75rem;
    }
    
    .logo-img {
        max-width: 80px;
    }
    
    h1 {
        font-size: 1.3em;
        margin: 0.75rem 0 0.5rem;
    }
    
    p {
        font-size: 0.9em;
        line-height: 1.5;
    }
    
    .store-badge {
        height: 40px;
        max-width: 140px;
    }
    
    .ios-mockup {
        transform: scale(0.7);
    }
    
    .col-right {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Very Small Mobile Devices */
@media only screen and (max-width: 360px) {
    .split-col {
        padding: 1rem 0.5rem;
    }
    
    .logo-img {
        max-width: 70px;
    }
    
    h1 {
        font-size: 1.2em;
    }
    
    p {
        font-size: 0.85em;
    }
    
    .store-badge {
        height: 36px;
        max-width: 130px;
    }
    
    .ios-mockup {
        transform: scale(0.65);
    }
}

/* Tablet Landscape and Small Desktop */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .split-container {
        flex-direction: row;
        height: 100vh;
    }
    
    .split-col {
        padding: 2rem;
    }
    
    .col-left .content {
        text-align: left;
        max-width: 400px;
    }
    
    .dl-wrapper {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
    }
    
    .ios-mockup {
        transform: scale(0.85);
    }
}

/* Large Desktop Screens */
@media only screen and (min-width: 1400px) {
    .col-left .content {
        max-width: 520px;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    p {
        font-size: 1.1em;
    }
    
    .store-badge {
        height: 52px;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img,
    .store-badge,
    .mockup-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .dl-btn {
        padding: 0.5rem;
    }
    
    .store-badge {
        height: 48px; /* Larger touch targets */
    }
}

/* Print Styles */
@media print {
    .col-right {
        display: none;
    }
    
    .col-left {
        width: 100%;
        text-align: center;
    }
    
    .dl-wrapper {
        justify-content: center;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .swiper-container {
        animation: none;
    }
    
    * {
        transition: none !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .col-left {
        background: #1a1a1a;
        color: #ffffff;
    }
    
    .col-left h1,
    .col-left p {
        color: #ffffff;
    }
}