/* 
   BhasaGrid Download Portal - Responsive Styles
   Extracted from style.css for better modularity.
   This file handles all viewport-specific overrides.
*/

/* --- RESPONSIVE GRIDS --- */
@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- TABLET & MOBILE OVERRIDES --- */
@media (max-width: 1024px) {
    .container {
        max-width: 95%;
    }

    body.authenticated h1 {
        font-size: 4.8rem !important;
    }

    /* Adjust Hero Grid for Tablet */
    #hero .container {
        gap: 2rem;
        grid-template-columns: 1fr 1fr;
    }

    /* Scale down mockups for tablet */
    .hero-windows {
        transform: scale(0.8);
        transform-origin: right center;
        right: -20px !important;
    }

    .hero-phone-card {
        transform: scale(0.8) !important;
        right: -20px !important;
    }

    /* Reposition floating cards for tablet */
    #card-encrypted {
        right: 250px !important;
        top: 5% !important;
        transform: scale(0.9);
    }

    #card-zip {
        right: 150px !important;
        bottom: 10% !important;
        transform: scale(0.9);
    }

    /* Hide Get App button on Tablet and down */
    .nav-btn-get-app {
        display: none !important;
    }

}

@media (max-width: 768px) {
    /* Navbar Responsive Switching - Active only on mobile widths */
    .desktop-nav {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    body,
    html {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    section {
        overflow-x: hidden;
        width: 100%;
    }

    .container {
        padding: 0 20px;
        width: 100%;
        overflow: hidden;
    }

    body.authenticated h1 {
        font-size: 3.8rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 2.2rem !important;
    }

    p {
        font-size: 1.1rem !important;
    }

    nav .container {
        padding: 0 20px;
    }

    /* Stack Hero Section */
    #hero .container {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding-top: 4rem;
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    #hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
        width: 100%;
        order: 1;
        /* Text first */
    }

    #hero-text p {
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Mockup Container */
    #hero .container>div:nth-child(2) {
        height: 600px !important;
        width: 100%;
        order: 2;
        /* Visuals second */
        margin-top: -2rem;
    }

    /* Stacked Hero Animation Layout */
    .hero-windows,
    .hero-phone-card {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        margin: 0 !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* Phone Card (Starts on Top) */
    .hero-phone-card {
        width: 260px !important;
        height: 520px !important;
        animation: hero-stack-front 8s infinite ease-in-out !important;
    }

    /* Windows Card (Starts Behind) - Custom Animation for Scaling 800px -> ~320px */
    .hero-windows {
        /* Remove fixed width/height to allow scaling */
        width: 800px !important;
        height: 500px !important;
        animation: hero-stack-back-windows 8s infinite ease-in-out !important;
    }

    @keyframes hero-stack-back-windows {

        0%,
        45% {
            z-index: 5;
            transform: translate(-50%, -60%) scale(0.35);
            opacity: 0.5;
            filter: blur(3px);
        }

        50%,
        95% {
            z-index: 15;
            transform: translate(-50%, -50%) scale(0.4);
            opacity: 1;
            filter: blur(0px);
        }

        100% {
            z-index: 5;
            transform: translate(-50%, -60%) scale(0.35);
            opacity: 0.5;
            filter: blur(3px);
        }
    }

    /* Reposition Floating Cards for Mobile */
    #card-encrypted {
        display: none !important;
        /* Too much clutter on small mobile */
    }

    #card-zip {
        display: none !important;
    }

    /* Stack Button Groups */
    .hero-btns,
    .flex-btn-group {
        flex-direction: column !important;
        width: 100%;
        gap: 1rem !important;
    }

    .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .download-wrapper {
        width: 100% !important;
        padding: 0 20px !important;
    }

    #download-container {
        padding: 3rem 2rem !important;
    }

    #download-container h2 {
        font-size: 2.2rem !important;
    }

    #download-container p {
        font-size: 1.1rem !important;
        margin-bottom: 2rem !important;
    }

    /* Navbar Responsive Switching moved to 1024px */

    /* Adjust Feature Grid */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem !important;
    }

    /* Responsive Buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Footer Stacking */
    footer {
        padding: 4rem 0 2rem !important;
    }

    footer .container>div:first-child {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        text-align: center;
    }

    footer .container>div:first-child>div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Align social buttons in center */
    footer .container>div:nth-child(3)>div {
        justify-content: center;
    }

    /* Disable desktop animations on mobile */
    .hero-animate-window,
    .hero-animate-phone {
        animation: none !important;
    }
}

/* --- FOLDABLE & FLIP PHONE OPTIMIZATIONS --- */
@media (max-width: 480px) {
    .container {
        padding: 0 16px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    body.authenticated h1 {
        font-size: 2.8rem !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    #hero {
        padding-top: 100px !important;
        min-height: auto !important;
        padding-bottom: 4rem;
    }

    /* Stack floating cards nicely around phone */
    #card-encrypted {
        margin-left: -160px;
        transform: scale(0.8);
    }

    #card-zip {
        margin-left: 40px;
        transform: scale(0.8);
        bottom: 0 !important;
        margin-left: 60px;
        /* Keep consistent with prev logic */
    }

    /* Stack specific button groups */
    .hero-btns,
    #download-container button {
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

    /* Adjust download section */
    #download-container {
        padding: 2rem 1.5rem !important;
    }

    /* Adjust Navbar */
    .nav-logo-container {
        width: 36px;
        height: 36px;
    }

    nav .container span {
        font-size: 1.2rem !important;
    }

    nav .container {
        padding: 24px 20px !important; /* Increased from 16px for better height */
    }

    .mobile-nav-drawer {
        padding-top: 100px !important;
    }

    /* Mobile Menu Button sizing */
    .mobile-menu-btn {
        display: block !important;
        padding: 12px !important;
        background: transparent !important; /* Removed subtle background */
        border: none !important; /* Removed border as requested */
        border-radius: 12px !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-menu-btn:active,
    .mobile-menu-btn:focus,
    .mobile-menu-btn:focus-visible {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.1) !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* --- NAVBAR PILL SHAPE REFINEMENTS --- */
@media (min-width: 769px) {
    .navbar-main.scrolled {
        top: 8px !important;
        margin-top: 0 !important;
        overflow: hidden;
        /* Ensure gradient border is clipped to radius */
    }

    .navbar-main.crystal-card {
        background: var(--nav-bg) !important;
        backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
        border: 1px solid var(--glass-border) !important;
        border-top: none !important;
        box-shadow: var(--nav-shadow) !important;
    }
}

@media (max-width: 768px) {
    .navbar-main.scrolled:not(.menu-open) {
        width: calc(100% - 24px) !important;
        /* Matched to script.js */
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 8px !important;
        /* Matched to script.js */
        border-radius: 100px !important;
        overflow: hidden;
    }

    .navbar-main.crystal-card {
        background: var(--nav-bg) !important;
        backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
        border: 1px solid var(--glass-border) !important;
        border-top: none !important;
        box-shadow: var(--nav-shadow) !important;
    }
}

/* --- ULTRA-NARROW (Cover Displays of Z Flip/Fold) --- */
@media (max-width: 360px) {
    body.authenticated h1 {
        font-size: 2.2rem !important;
    }

    .container {
        padding: 0 12px;
    }

    /* Minimize navbar branding */
    nav .container {
        gap: 10px;
    }

    nav .container>div:first-child span {
        font-size: 1rem !important;
    }

    .mobile-nav-item {
        font-size: 1rem;
        padding: 12px 16px;
    }

    /* Hide floating cards completely on tiny screens to avoid clutter */
    #card-encrypted,
    #card-zip {
        display: none !important;
    }
}

/* --- LOGIN CONTAINER RESPONSIVENESS --- */
@media (max-width: 480px) {
    .login-container {
        padding: 24px 20px;
        margin: 16px;
    }
}