/* 
 * Global Responsive Overhaul (Oryva)
 * This stylesheet enforces perfect responsiveness across all viewports
 * without mutating desktop designs.
 */

/* 1. Global Viewport & Base Constraints */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 100%;
    padding-inline: clamp(1rem, 5vw, 24px);
}

/* 2. Breakpoint: 1024px (Large Tablets / Small Desktop) */
@media (max-width: 1024px) {
    /* Showcase Dashboard */
    .showcase-grid {
        flex-direction: column;
        gap: 2rem;
    }
    .showcase-left, .showcase-right {
        max-width: 100%;
        flex: 1 1 100%;
        text-align: center;
    }
    .showcase-left p {
        margin-left: auto;
        margin-right: auto;
    }
    .feature-rows {
        align-items: center;
    }
    .feature-row {
        text-align: left;
    }
    .showcase-trust {
        justify-content: center;
    }

    /* Auth Screens */
    .auth-left {
        display: none;
    }
    .auth-right {
        flex: 1;
        max-width: 100%;
        padding: 2rem;
    }
    .auth-form-container {
        max-width: 440px;
        margin: 0 auto;
    }

    /* Profile Dashboard */
    .profile-container {
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2rem;
    }
    .profile-sidebar {
        flex: none;
        width: 100%;
    }
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .sidebar-link {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }
    .membership-banner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

/* 3. Breakpoint: 992px (Tablets / Navigation Flip) */
@media (max-width: 992px) {
    /* Navbar Navigation Flip */
    .nav-links {
        display: none !important; /* Hide desktop links */
    }
    .mobile-menu-btn {
        display: block !important; /* Show hamburger */
    }

    /* Hero Section */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    .hero-content {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-visual {
        margin-top: 0;
        transform: scale(0.9);
        transform-origin: center center;
        height: auto;
        min-height: 500px;
    }
    .hero-bg-glow {
        right: 50%;
        transform: translate(50%, -50%);
    }
    
    /* Feature Preview Row (Home Page) */
    .preview-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    .preview-card {
        padding: 2rem;
    }

    /* Plant Growth Stats (Home Page) */
    .growth-section {
        flex-direction: column;
        text-align: center;
    }
}

/* 4. Breakpoint: 768px (Mobile Devices) */
@media (max-width: 768px) {
    /* Global Spacing */
    section {
        padding: var(--spacing-xl) 0;
    }
    
    /* Pricing Grid */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }
    .pricing-card.popular {
        transform: none;
    }

    /* Feature Grid (Standard) */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Showcase Mockup Inner Grids */
    .mockup-grid-top {
        grid-template-columns: 1fr;
    }
    .mockup-grid-middle {
        grid-template-columns: 1fr;
    }
    .milestone-card {
        flex-direction: column;
        text-align: center;
    }
    .milestone-progress {
        width: 100%;
    }
    .dashboard-mockup {
        padding: 20px;
    }

    /* Profile Inner Grid */
    .info-grid {
        grid-template-columns: 1fr;
    }
    .profile-info-header {
        flex-direction: column;
        text-align: center;
    }
    .sidebar-link {
        flex: 1 1 100%;
    }
    
    /* Typography Overrides for small screens */
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    
    /* Device Warning Actions */
    .warning-actions {
        flex-direction: column;
    }
    
    /* Footer elements */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
}

/* 5. Breakpoint: 480px & 320px (Small Mobile / Touch Optimization) */
@media (max-width: 480px) {
    /* Touch Target Enforcement */
    .btn, a, button {
        min-height: 44px; /* Apple UI Guideline */
    }

    /* Reduce heavy paddings on tiny screens */
    .auth-right {
        padding: 2rem 1rem;
    }
    .unified-card {
        padding: 1.25rem;
    }
    .pricing-card {
        padding: 1.25rem;
    }
    .feature-card {
        padding: 1.25rem;
    }
    .profile-card {
        padding: 1.25rem;
    }

    /* Text Adjustments */
    .hero h1 {
        font-size: 2rem;
    }
    .hero-visual {
        min-height: 400px;
        transform: scale(0.75);
    }
    
    /* Device Info Item */
    .device-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .device-info {
        flex-direction: column;
    }
}