/* ============================================================
   SMARTCEMIC MOBILE RESPONSIVE FIX
   Version: 1.0.1 | Date: 2025-12-12
   Fixes: Overflow issues, result display, biomarker grids
   NOTE: All styles are within media queries to not affect desktop
   ============================================================ */

/* ===========================================
   TABLET STYLES (max-width: 1024px)
   =========================================== */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .biomarker-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===========================================
   MOBILE STYLES (max-width: 768px)
   =========================================== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll on mobile only */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Container overflow prevention */
    .section-container,
    .hero-container,
    .live-demo-container,
    .footer-container {
        max-width: 100%;
        overflow-x: hidden;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hero Section */
    .hero {
        padding: 60px 16px 40px;
    }

    .hero-container {
        padding: 0 8px;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .hero-content {
        text-align: center;
        padding: 0 8px;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero-description {
        font-size: 1rem;
        padding: 0 8px;
    }

    /* Device Display */
    .hero-visual {
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
    }

    .device-display {
        max-width: 100%;
        margin: 0 auto;
    }

    .device-card {
        margin: 0 auto;
        max-width: 100%;
        border-radius: 16px;
    }

    /* Hide floating badges on mobile - they cause overflow */
    .floating-badge {
        display: none !important;
    }

    .device-header {
        padding: 12px 16px;
    }

    .device-title {
        font-size: 0.85rem;
    }

    .device-body {
        padding: 16px;
    }

    /* Primary Reading - Hero */
    .primary-reading .reading-value {
        font-size: 3rem !important;
    }

    .reading-unit {
        font-size: 1.2rem !important;
    }

    /* Metrics Grid */
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }

    .metric-item {
        padding: 8px;
    }

    .metric-value {
        font-size: 1.1rem !important;
    }

    .metric-label {
        font-size: 0.7rem !important;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Biomarker Grid */
    .biomarker-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Profile Selection Grid */
    .profile-grid,
    .simulation-profiles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .profile-card {
        padding: 12px 8px;
    }

    /* Stats Bar */
    .stats-bar,
    .trust-badges {
        flex-wrap: wrap;
        gap: 16px;
    }

    .stat-item {
        flex: 1 1 40%;
        min-width: 120px;
    }

    /* How It Works Steps */
    .steps-grid {
        grid-template-columns: 1fr !important;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Pricing Cards */
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* CTA Buttons */
    .cta-buttons,
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .cta-buttons .btn,
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   CORRECTION DISPLAY FIX - MOBILE
   =========================================== */
@media (max-width: 768px) {
    /* Force vertical layout for correction items */
    .correction-display {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .correction-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px !important;
        background: rgba(255,255,255,0.8) !important;
        border-radius: 8px !important;
        gap: 4px !important;
    }

    .correction-label {
        font-size: 0.75rem !important;
        color: #666 !important;
        order: 1 !important;
    }

    .correction-value {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        order: 2 !important;
    }

    /* Quantum correction bar */
    .quantum-correction-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .correction-arrow {
        transform: rotate(90deg);
    }
}

/* ===========================================
   SMALL MOBILE (max-width: 480px)
   =========================================== */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.6rem !important;
    }

    .primary-reading .reading-value {
        font-size: 2.5rem !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px;
    }

    .metric-value {
        font-size: 0.95rem !important;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .profile-grid,
    .simulation-profiles {
        grid-template-columns: 1fr 1fr !important;
    }

    .stat-item {
        flex: 1 1 100%;
    }
}

/* ===========================================
   TOUCH TARGETS - ACCESSIBILITY
   =========================================== */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    .nav-link,
    .profile-card,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure clickable areas are large enough */
    .profile-card,
    .biomarker-card,
    .feature-card {
        padding: 16px;
    }
}

/* ===========================================
   SAFE AREA INSETS (for notched phones)
   =========================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .footer {
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }

        .mobile-menu {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ============================================= */
/* Edge-to-Edge Safe Area (Android 15+ / iOS)    */
/* ============================================= */
@supports (padding: env(safe-area-inset-top)) {
    /* Header behind status bar fix */
    .header,
    .app-header,
    .top-header,
    .main-header,
    header {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* Body content area */
    body {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* Sidebar / mobile menu */
    .sidebar,
    .mobile-menu,
    .nav-mobile-menu {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Fixed bottom elements */
    .bottom-nav,
    .mobile-bottom-bar,
    .fixed-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}