/* ========================================
   MKY IntelliSystems - Responsive Styles
   Mobile-First Responsive Design
   ======================================== */

/* ========================================
   Base: Mobile First (320px+)
   All base styles in style.css are mobile-first
   ======================================== */

/* ========================================
   Small Devices (Phones, 640px and up)
   ======================================== */
@media (min-width: 640px) {
    /* Typography Adjustments */
    h1 {
        font-size: var(--font-size-6xl);
    }
    
    h2 {
        font-size: var(--font-size-5xl);
    }
    
    .section-title {
        font-size: var(--font-size-5xl);
    }
    
    /* Container */
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    /* Buttons */
    .btn {
        padding: var(--spacing-md) var(--spacing-2xl);
    }
}

/* ========================================
   Medium Devices (Tablets, 768px and up)
   ======================================== */
@media (min-width: 768px) {
    /* Typography */
    html {
        font-size: 15px;
    }
    
    h1 {
        font-size: var(--font-size-6xl);
    }
    
    h2 {
        font-size: var(--font-size-5xl);
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-5xl) 0;
    }
    
    /* Grid Layouts */
    .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Buttons */
    .btn-large {
        padding: var(--spacing-lg) var(--spacing-3xl);
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   Large Devices (Laptops, 1024px and up)
   ======================================== */
@media (min-width: 1024px) {
    /* Typography */
    h1 {
        font-size: var(--font-size-7xl);
    }
    
    .section-title {
        font-size: var(--font-size-4xl);
    }
    
    /* Container */
    .container {
        padding: 0 var(--spacing-2xl);
    }
    
    /* Navigation CTA - Desktop Enhancement */
    .nav-cta {
        padding: 0.75rem 2rem;
        font-size: 0.9375rem;
        margin-left: 0.5rem;
    }
    
    /* Grid Layouts */
    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }
    
    .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
}

/* ========================================
   Extra Large Devices (Desktops, 1280px and up)
   ======================================== */
@media (min-width: 1280px) {
    /* Container */
    .container {
        padding: 0 var(--spacing-3xl);
    }
    
    /* Typography */
    .section-subtitle {
        font-size: var(--font-size-xl);
        max-width: 700px;
    }
}

/* ========================================
   2XL Devices (Large Desktops, 1536px and up)
   ======================================== */
@media (min-width: 1536px) {
    /* Container can expand slightly */
    :root {
        --container-max-width: 1400px;
    }
}

/* ========================================
   Mobile-Specific Styles (0 - 767px)
   ======================================== */
@media (max-width: 767px) {
    /* Typography - Smaller on Mobile */
    h1 {
        font-size: var(--font-size-4xl);
    }
    
    h2 {
        font-size: var(--font-size-3xl);
    }
    
    h3 {
        font-size: var(--font-size-2xl);
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .section-subtitle {
        font-size: var(--font-size-base);
    }
    
    /* Spacing - More compact on mobile */
    .section {
        padding: var(--spacing-3xl) 0;
    }
    
    /* Buttons - Full width on mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn-large {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--font-size-base);
    }
    
    /* Container */
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Hide overflow to prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
}

/* ========================================
   Tablet-Specific Styles (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Grid adjustments for tablet */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    /* Hide non-essential elements */
    .navbar,
    .whatsapp-float,
    .btn,
    .cta-section {
        display: none !important;
    }
    
    /* Remove shadows and backgrounds */
    * {
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
    
    /* Page breaks */
    section {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* ========================================
   Landscape Orientation (Mobile)
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .section {
        padding: var(--spacing-2xl) 0;
    }
    
    h1 {
        font-size: var(--font-size-3xl);
    }
}

/* ========================================
   High DPI / Retina Displays
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure images and icons are sharp on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Dark Mode Support (Optional)
   Can be enabled based on user preference
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable automatic dark mode */
    /*
    :root {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
    }
    
    body {
        background-color: var(--bg-primary);
    }
    */
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch devices */
    .btn {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-xl);
    }
    
    .nav-link {
        padding: var(--spacing-md);
    }
    
    /* Remove hover effects on touch devices */
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-glow:hover {
        transform: none;
        box-shadow: inherit;
    }
}

/* ========================================
   Very Small Screens (320px - 374px)
   ======================================== */
@media (max-width: 374px) {
    /* Extra small font sizes */
    html {
        font-size: 13px;
    }
    
    h1 {
        font-size: var(--font-size-3xl);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    /* Tighter spacing */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .section {
        padding: var(--spacing-2xl) 0;
    }
}

/* ========================================
   Accessibility - High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
    /* Increase contrast for better readability */
    :root {
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --color-primary: #0033cc;
    }
    
    .btn-outline {
        border-width: 3px;
    }
}

/* ========================================
   Aspect Ratio Utilities
   ======================================== */

/* 16:9 Aspect Ratio */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* 4:3 Aspect Ratio */
.aspect-4-3 {
    aspect-ratio: 4 / 3;
    width: 100%;
}

/* Square Aspect Ratio */
.aspect-square {
    aspect-ratio: 1 / 1;
    width: 100%;
}

/* ========================================
   Breakpoint Visibility Utilities
   ======================================== */

/* Show only on mobile */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

/* Show only on tablet and up */
.tablet-up {
    display: none;
}

@media (min-width: 768px) {
    .tablet-up {
        display: block;
    }
}

/* Show only on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
}


/* ========================================
   Enhanced Mobile Optimizations (320px - 767px)
   ======================================== */
@media (max-width: 767px) {
    /* Hero Section */
    .hero-section {
        min-height: 85vh;
        padding: var(--spacing-4xl) 0 var(--spacing-3xl);
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero-logo {
        width: 80px;
        height: 80px;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    /* Navigation */
    .nav-container {
        padding: var(--spacing-md);
    }
    
    .logo-text {
        font-size: var(--font-size-lg);
    }
    
    .logo-img {
        width: 35px;
        height: 35px;
    }
    
    /* Nav CTA Enhancement for larger screens */
    .nav-cta {
        padding: 0.75rem 1.75rem;
        font-size: var(--font-size-base);
    }
    
    /* Trust Strip */
    .trust-strip {
        padding: var(--spacing-lg) 0;
    }
    
    .trust-text {
        font-size: var(--font-size-sm);
    }
    
    /* Service Cards */
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .service-card {
        padding: var(--spacing-xl);
    }
    
    /* Additional Solutions */
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Project Cards */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .project-card {
        padding: var(--spacing-lg);
    }
    
    /* GitHub Section */
    .github-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Skills Section */
    .skills-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Process Steps */
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-md);
    }
    
    .process-step {
        min-height: auto;
        padding: var(--spacing-lg);
    }
    
    /* Benefits Grid */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* CTA Section */
    .cta-section {
        padding: var(--spacing-4xl) 0;
    }
    
    .cta-title {
        font-size: var(--font-size-3xl);
        line-height: 1.2;
    }
    
    .cta-text {
        font-size: var(--font-size-base);
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-md);
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Contact Section */
    .contact-info {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .contact-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .contact-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .contact-icon {
        width: 30px;
        height: 30px;
    }
    
    .contact-value {
        font-size: var(--font-size-sm);
    }
    
    .contact-description {
        font-size: var(--font-size-xs);
    }
    
    .contact-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .contact-social {
        gap: var(--spacing-md);
    }
    
    .social-icon-link {
        width: 45px;
        height: 45px;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--spacing-xl);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* WhatsApp Float */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    
    .whatsapp-tooltip {
        display: none; /* Hide tooltip on mobile */
    }
    
    /* Tech Stack */
    .tech-stack-section {
        padding: var(--spacing-xl) 0;
        overflow: hidden;
        width: 100%;
    }
    
    .tech-stack-scroll {
        animation-duration: 20s; /* Faster animation on mobile */
    }
    
    .tech-item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .tech-separator {
        font-size: var(--font-size-base);
    }
    
    .tech-item {
        font-size: var(--font-size-base);
    }
    
    /* About Section */
    .about-founder {
        padding: var(--spacing-xl);
    }
    
    /* Card Icons */
    .card-icon {
        font-size: 2rem;
    }
}

/* ========================================
   Tablet Optimizations (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hero Section */
    .hero-title {
        font-size: var(--font-size-5xl);
    }
    
    .hero-logo {
        width: 120px;
        height: 120px;
    }
    
    /* Services Grid - 2 columns on tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Solutions Grid - 2 columns */
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Projects Grid - 2 columns */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* GitHub Grid - 2 columns */
    .github-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Skills Grid - 2 columns */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Process Steps - 2 columns */
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }
    
    /* Benefits Grid - 2 columns */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Contact Grid - 3 columns (fits better on tablet) */
    .contact-info {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .contact-card {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .contact-icon-wrapper {
        width: 62px;
        height: 62px;
    }
    }
    
    /* CTA Section */
    .cta-title {
        font-size: var(--font-size-4xl);
    }
    
    .cta-buttons {
        flex-direction: row;
    }
    
    /* Footer */
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }


/* ========================================
   Laptop Optimizations (1024px - 1439px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Services Grid - 3 columns */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Solutions Grid - 3 columns */
    .solutions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Projects Grid - 3 columns */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* GitHub Grid - 3 columns */
    .github-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Skills Grid - 3 columns */
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Process Steps - 3 columns for better layout */
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }
    
    /* Benefits Grid - 3 columns */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
}

/* ========================================
   Large Laptop (1200px - 1439px)
   ======================================== */
@media (min-width: 1200px) and (max-width: 1439px) {
    /* Process Steps - ensure 4 steps per row for better fit */
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-xl);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .process-step {
        padding: var(--spacing-lg);
        min-height: 260px;
    }
}

/* ========================================
   Desktop Optimizations (1440px and up)
   ======================================== */
@media (min-width: 1440px) {
    /* Hero Section */
    .hero-section {
        min-height: 100vh;
    }
    
    .hero-title {
        font-size: var(--font-size-6xl);
    }
    
    /* Services Grid - 4 columns */
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-2xl);
    }
    
    /* Solutions Grid - 5 columns (perfect for 5 items) */
    .solutions-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Projects Grid - 4 columns for better space utilization */
    .projects-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* GitHub Grid - 4 columns */
    .github-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Skills Grid - 4 columns */
    .skills-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
    
    /* Process Steps - 4 columns for optimal spacing */
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-xl);
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .process-step {
        padding: var(--spacing-xl);
        min-height: 280px;
    }
    
    /* Benefits Grid - 3 columns (6 items, 2 rows) */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }
    
    /* CTA Section */
    .cta-title {
        font-size: var(--font-size-6xl);
    }
    
    .cta-text {
        font-size: var(--font-size-2xl);
    }
}

/* ========================================
   Ultra-Wide Screens (1920px and up)
   ======================================== */
@media (min-width: 1920px) {
    /* Container adjustment for ultra-wide */
    .container {
        max-width: 1600px;
    }
    
    /* Larger typography for ultra-wide screens */
    .hero-title {
        font-size: var(--font-size-7xl);
    }
    
    .section-title {
        font-size: var(--font-size-5xl);
    }
}

/* ========================================
   Responsive Images
   ======================================== */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .hero-logo,
    .footer-logo {
        max-width: 80px;
    }
}

/* ========================================
   Responsive Typography Scale Adjustments
   ======================================== */

/* Small mobile (320px - 480px) */
@media (max-width: 480px) {
    .hero-founder {
        padding: var(--spacing-md);
    }
    
    .founder-name {
        font-size: var(--font-size-lg);
    }
    
    .founder-title {
        font-size: var(--font-size-sm);
    }
    
    .service-card-icon {
        font-size: 2rem;
    }
    
    .step-number {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   Fix Horizontal Scroll Issues
   ======================================== */
@media (max-width: 767px) {
    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100%;
    }
    
    .container {
        overflow-x: hidden;
    }
    
    /* Tech stack animation adjustments */
    .tech-stack-section {
        overflow: hidden;
    }
    
    .tech-stack-scroll {
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        /* Faster animation on mobile */
        animation-duration: 18s;
    }
    
    .tech-item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        white-space: nowrap;
    }
}

/* ========================================
   Improve Touch Interactions on Mobile
   ======================================== */
@media (max-width: 767px) {
    /* Larger touch targets */
    .btn {
        min-height: 48px;
    }
    
    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .social-link {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Prevent text selection on buttons */
    .btn,
    .nav-link {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
}

/* ========================================
   Loading Performance on Mobile
   ======================================== */
@media (max-width: 767px) {
    /* Reduce particle count is handled in JavaScript */
    
    /* Simplify animations on mobile */
    .gradient-orb {
        animation-duration: 30s; /* Slower on mobile */
    }
    
    /* Reduce shadow complexity */
    .card,
    .service-card,
    .project-card {
        box-shadow: var(--shadow-sm);
    }
}