/* Mobile Responsive Styles */
/* Comprehensive mobile optimization for TrendIQ */

/* ========================================
   BASE MOBILE STYLES (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Global Typography */
    html {
        font-size: 15px;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        width: 100% !important;
    }
    
    body {
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Full page wrapper */
    body > .min-h-screen {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Main content */
    main[role="main"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Section padding reduction */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-40 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* ========================================
       HEADER / NAVIGATION
       ======================================== */
    header.fixed {
        top: 0.5rem;
        padding: 0 0.5rem;
    }
    
    header .bg-black\/20 {
        padding: 0.5rem 1rem;
    }
    
    /* Hide desktop nav, show mobile menu button */
    nav.hidden.lg\:flex {
        display: none !important;
    }
    
    #mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Mobile menu styling */
    #mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        z-index: 100;
        padding: 5rem 1.5rem 2rem;
        overflow-y: auto;
    }
    
    #mobile-menu a {
        display: block;
        padding: 1rem;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* ========================================
       HERO SECTION & ALL BACKGROUND SECTIONS
       ======================================== */
    
    /* All sections with background images - fill full width */
    #hero-section,
    #pricing,
    section[aria-labelledby="faq-heading"],
    section[aria-labelledby="cta-heading"] {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Background containers - extend beyond section to fill viewport */
    #hero-section > .absolute:first-child,
    #pricing > .absolute:first-child,
    section[aria-labelledby="faq-heading"] > .absolute:first-child,
    section[aria-labelledby="cta-heading"] > .absolute:first-child {
        position: absolute !important;
        left: -50px !important;
        right: -50px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: calc(100% + 100px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Background images - cover full area and scale up */
    #hero-section > .absolute:first-child img,
    #pricing > .absolute:first-child img,
    section[aria-labelledby="faq-heading"] > .absolute:first-child img {
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: scale(1.1) !important;
    }
    
    .hero-section,
    section[aria-labelledby="hero-heading"] {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
    
    .hero-section h1,
    [data-en="AI-Powered Technical Analysis"] {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero-section .text-6xl,
    .text-6xl {
        font-size: 2.25rem !important;
    }
    
    .hero-section .text-5xl,
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .hero-section .text-4xl,
    .text-4xl {
        font-size: 1.75rem !important;
    }
    
    .hero-section p {
        font-size: 1rem;
    }
    
    /* MacBook mockup scaling */
    .hero-section img[alt*="MacBook"],
    img[alt*="MacBook"] {
        transform: scale(1) !important;
        margin: 0 auto;
    }
    
    /* ========================================
       PRICING CARDS
       ======================================== */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    /* Pricing card */
    .plan-card,
    article.bg-black {
        padding: 1.5rem !important;
    }
    
    .price-large,
    .text-4xl.font-bold {
        font-size: 2.5rem !important;
    }
    
    /* Feature list */
    .feature-list li,
    ul[role="list"] li {
        font-size: 0.875rem;
        padding: 0.5rem 0;
    }
    
    /* CTA buttons */
    .cta-btn,
    a[aria-label*="plan"] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    /* ========================================
       BLOG PAGE
       ======================================== */
    .blog-hero h1 {
        font-size: 2.5rem !important;
    }
    
    /* Blog article layout */
    .blog-card,
    .featured-card {
        padding: 1.5rem !important;
        min-height: auto !important;
    }
    
    /* Article list */
    .article-icon {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    /* Timeline adjustments */
    .timeline-line {
        display: none;
    }
    
    /* Search bar */
    .search-container input {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    /* Filter tabs */
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* ========================================
       FAQ SECTION
       ======================================== */
    .faq-item {
        margin-bottom: 0.75rem;
    }
    
    .faq-question {
        padding: 1rem !important;
        font-size: 0.9rem;
    }
    
    .faq-answer {
        padding: 0 1rem 1rem !important;
        font-size: 0.875rem;
    }
    
    /* ========================================
       CTA SECTION
       ======================================== */
    section[aria-labelledby="cta-heading"] {
        padding: 3rem 0 !important;
    }
    
    section[aria-labelledby="cta-heading"] h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem;
    }
    
    section[aria-labelledby="cta-heading"] p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* MacBook in CTA */
    section[aria-labelledby="cta-heading"] img[alt*="MacBook"] {
        max-width: 100% !important;
        margin-bottom: 1.5rem;
    }
    
    /* ========================================
       FOOTER - 2 Column Layout on Mobile
       ======================================== */
    footer {
        padding: 2.5rem 0 !important;
    }
    
    footer > div > .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem 0.75rem !important;
        text-align: left;
    }
    
    /* Hide desktop logo column on mobile */
    footer .grid > div.hidden {
        display: none !important;
    }
    
    /* Make sure nav items display properly in 2 columns */
    footer .grid > nav {
        margin-bottom: 1rem;
        min-width: 0;
        overflow: hidden;
    }
    
    footer nav h3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem;
    }
    
    footer nav ul {
        margin-top: 0.5rem !important;
        gap: 0.25rem;
    }
    
    footer nav ul li {
        margin-bottom: 0.25rem;
    }
    
    footer nav a {
        font-size: 0.8rem !important;
        line-height: 1.6;
    }
    
    /* ========================================
       DASHBOARD / APP PAGES
       ======================================== */
    .sidebar {
        position: fixed;
        left: -100%;
        transition: left 0.3s ease;
        z-index: 50;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Chart container */
    .chart-container {
        height: 300px !important;
    }
    
    /* Trading cards */
    .trading-card {
        padding: 1rem;
    }
    
    /* News feed */
    .news-feed {
        max-height: 400px;
    }
    
    /* ========================================
       FORMS (Login/Register)
       ======================================== */
    .auth-container {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .auth-container h1 {
        font-size: 1.75rem;
    }
    
    input[type="email"],
    input[type="password"],
    input[type="text"] {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
    
    /* ========================================
       PLANS PAGE (In-App)
       ======================================== */
    .plans-bg {
        padding: 1rem;
    }
    
    .plans-bg h1 {
        font-size: 3rem !important;
    }
    
    .plans-bg h2 {
        font-size: 1.5rem !important;
    }
    
    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    /* Grid overrides */
    .lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Flex overrides */
    .lg\:flex-row {
        flex-direction: column !important;
    }
    
    /* Gap adjustments */
    .gap-12 {
        gap: 2rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    /* Text alignment */
    .lg\:text-left {
        text-align: center !important;
    }
    
    /* Order - Text first, MacBook second on mobile */
    .order-2.lg\:order-1 {
        order: 2 !important;
    }
    
    .order-1.lg\:order-2 {
        order: 1 !important;
    }
    
    /* Hide logo on mobile hero section */
    #hero-section .hero-logo {
        display: none !important;
    }
    
    /* Hero section mobile layout */
    #hero-section .grid {
        min-height: auto !important;
        padding-top: 8rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Center text content on mobile */
    #hero-section .order-1.lg\:order-2 {
        text-align: center !important;
    }
    
    #hero-section .order-1.lg\:order-2 .flex.items-center {
        justify-content: center !important;
    }
    
    #hero-section .order-1.lg\:order-2 p {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center the CTA button on mobile */
    #hero-section .order-1.lg\:order-2 a {
        display: inline-block;
    }
    
    /* MacBook positioning on mobile - below text */
    #hero-section .order-2.lg\:order-1 {
        margin-bottom: 0;
        margin-top: 1.5rem;
    }
    
    #hero-section .order-2.lg\:order-1 img {
        transform: scale(1.15) !important;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    /* Features section - gap between cards on mobile */
    #features .space-y-3 {
        gap: 3rem !important;
    }
    
    #features .space-y-3 > * + * {
        margin-top: 3rem !important;
    }
    
    /* Real-time Analysis and Live News - 2 columns on mobile */
    #features .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    #features .grid.md\:grid-cols-2 > div {
        padding: 1rem !important;
    }
    
    #features .grid.md\:grid-cols-2 h3 {
        font-size: 0.875rem !important;
    }
    
    #features .grid.md\:grid-cols-2 p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    /* Screenshot Analysis 3-step process - horizontal swipe carousel */
    .steps-carousel {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    .steps-carousel::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    
    .steps-carousel > div.text-center {
        flex-shrink: 0 !important;
        width: 75vw !important;
        scroll-snap-align: center !important;
    }
    
    .steps-carousel .bg-black.rounded-lg {
        width: 100% !important;
        height: 140px !important;
    }
    
    /* Number circles - centered */
    .steps-carousel .w-8.h-8.rounded-full {
        margin: 0 auto 0.75rem auto !important;
    }
    
    /* Center text labels */
    .steps-carousel p {
        text-align: center !important;
    }
}

/* ========================================
   EXTRA SMALL SCREENS (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .text-6xl {
        font-size: 1.75rem !important;
    }
    
    .text-5xl {
        font-size: 1.5rem !important;
    }
    
    .text-4xl {
        font-size: 1.35rem !important;
    }
    
    .text-3xl {
        font-size: 1.25rem !important;
    }
    
    .text-2xl {
        font-size: 1.1rem !important;
    }
    
    /* Pricing cards - tighter spacing */
    .plan-card,
    article.bg-black {
        padding: 1.25rem !important;
    }
    
    .price-large {
        font-size: 2rem !important;
    }
    
    /* Buttons */
    .cta-btn,
    button,
    a.bg-orange-500 {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
    
    /* MacBook mockup */
    img[alt*="MacBook"] {
        margin-bottom: 1rem;
    }
    
    /* Header logo */
    header img[alt*="Logo"] {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    header span.font-semibold {
        font-size: 0.875rem !important;
    }
    
    /* Footer grid - keep 2 columns on small screens */
    footer .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Blog page */
    .blog-hero h1 {
        font-size: 2rem !important;
    }
    
    .featured-card h2 {
        font-size: 1.25rem !important;
    }
}

/* ========================================
   TABLET (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Two-column grid for pricing */
    .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Reduce hero text size */
    .text-6xl {
        font-size: 3rem !important;
    }
    
    .text-5xl {
        font-size: 2.5rem !important;
    }
    
    /* MacBook scaling */
    img[alt*="MacBook"] {
        transform: scale(1.1) !important;
    }
    
    /* Navigation - show on tablet */
    nav.hidden.lg\:flex {
        display: flex !important;
    }
    
    nav.hidden.lg\:flex a {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-width: 896px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 4rem 0;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
    }
    
    /* Reduce section heights */
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Hide large mockups in landscape */
    img[alt*="MacBook"] {
        max-width: 60%;
        margin: 0 auto;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    a,
    .cta-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects that don't work on touch */
    .hover\:scale-105:hover {
        transform: none !important;
    }
    
    /* Better tap feedback */
    button:active,
    a:active {
        opacity: 0.8;
    }
}

/* ========================================
   SAFE AREA INSETS (for notched phones)
   Only on tablet/desktop - mobile already has padding: 0
   ======================================== */
@supports (padding: max(0px)) {
    @media (min-width: 769px) {
        body {
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
    }
    
    footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}
/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .rotating-lines,
    .rotating-lines-2,
    .rotating-lines-3 {
        animation: none !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    header,
    footer,
    .rotating-lines-container,
    #mobile-menu,
    button {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline;
    }
}