/* Responsive Styles - Media Queries and Mobile Adaptations */

/* ==============================================
   MOBILE NAVIGATION (Portrait and Square orientations)
   ============================================== */

/* Mobile layout for portrait and square orientations */
@media (max-aspect-ratio: 1.5), (max-height: 600px), (max-width: 1080px) {
    .nav-container {
        padding: 0 15px;
        position: relative;
    }
    
    .nav-hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: var(--kloud-charcoal);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-lg);
        border-top: 1px solid var(--kloud-cyan);
        z-index: 1000;
        padding: var(--spacing-md) 0;
        gap: 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu .nav-item {
        margin: 0;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .nav-menu .nav-link {
        padding: var(--spacing-sm) var(--spacing-lg);
        display: block;
        border-radius: 0;
        font-size: 1rem;
        font-weight: 500;
        width: 100%;
        transition: var(--transition);
    }
    
    .nav-menu .nav-link:hover {
        background-color: var(--gray-100);
        color: var(--kloud-cyan);
    }
    
    .nav-menu .nav-link.active {
        background-color: var(--gray-100);
        color: var(--kloud-cyan);
    }
    
    /* Adjust services button for mobile */
    .nav-link[href="services.html"],
    .nav-link[href="pages/services.html"],
    .nav-link[href="../services.html"] {
        margin: 0 !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: 1rem !important;
        border-radius: var(--border-radius) !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: var(--kloud-cyan) !important;
        color: var(--kloud-charcoal) !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    
    .nav-menu .nav-item:last-child {
        border-bottom: none;
        border-top: none !important;
        margin: var(--spacing-sm) 0 0 0 !important;
        padding-top: var(--spacing-md);
        text-align: center;
    }
    
    .nav-menu .nav-item .nav-link[href="services.html"],
    .nav-menu .nav-item .nav-link[href="pages/services.html"],
    .nav-menu .nav-item .nav-link[href="../services.html"] {
        margin: 0 !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        border-radius: var(--border-radius) !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    .nav-link[href="services.html"]:hover,
    .nav-link[href="pages/services.html"]:hover,
    .nav-link[href="../services.html"]:hover {
        background: rgba(47, 243, 224, 0.85) !important;
        color: var(--kloud-charcoal) !important;
        transform: none !important;
    }
}

/* ==============================================
   MOBILE ARCHITECTURE LAYOUT (Portrait and Square orientations)
   ============================================== */

/* Mobile layout for portrait and square orientations */
@media (max-aspect-ratio: 1.5), (max-height: 600px), (max-width: 1080px) {
    /* Remove parallax and use static layout */
    .architecture-fullscreen {
        position: static;
        height: auto;
        min-height: auto;
        padding: 0;
        background: var(--dark-bg);
        display: block;
        overflow: visible;
    }
    
    .scroll-area {
        display: none; /* Remove scroll area for mobile */
    }
    
    /* Remove excessive height from architecture diagram */
    .architecture-diagram {
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    /* Mobile title positioning */
    .architecture-title {
        position: static;
        transform: none;
        padding: calc(80px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg);
        text-align: center;
        margin: 0 auto;
        /* Ensure proper bottom spacing to prevent overlap with first node */
        margin-bottom: var(--spacing-xl);
    }
    
    .parallax-architecture {
        position: static;
        flex-direction: column !important; /* Force column layout */
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-md);
        max-width: 100%;
        align-items: center;
        justify-content: flex-start;
        min-height: auto;
        margin: 0 auto;
        /* Ensure proper spacing for mobile */
        margin-bottom: var(--spacing-2xl);
        /* Add top margin to create space from title */
        margin-top: var(--spacing-lg);
        /* Force single column layout */
        flex-wrap: nowrap !important;
        /* Ensure container is properly centered */
        text-align: center;
        /* Reset any leftover positioning */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    /* Force all nodes to be in a single column */
    .architecture-node {
        order: initial !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        transition: opacity 0.6s ease !important;
        /* Ensure proper spacing between nodes */
        margin-bottom: var(--spacing-md);
        /* Force full width in column and center properly */
        width: 100% !important;
        max-width: 300px !important;
        flex: 0 0 auto !important;
        /* Ensure proper centering */
        margin-left: auto !important;
        margin-right: auto !important;
        /* Reset any leftover positioning */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    /* Ensure node content is properly centered */
    .node-content {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Override any leftover order-based positioning from desktop layout */
    .node-1, .node-2, .node-3, .node-4 {
        order: initial !important;
        position: relative !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    /* Override any leftover arrow positioning from desktop layout */
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        order: initial !important;
        position: relative !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    /* Force arrows to be vertical and between nodes */
    .architecture-arrow {
        order: initial !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        /* Force vertical orientation */
        flex-direction: column !important;
        width: 50px !important;
        height: 40px !important;
        margin: var(--spacing-md) auto !important;
        /* Ensure arrows are centered */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Mobile arrows - static vertical orientation */
    .architecture-arrow.arrow-1,
    .architecture-arrow.arrow-2,
    .architecture-arrow.arrow-3 {
        width: 50px !important;
        height: 40px !important;
        margin: var(--spacing-md) 0 !important;
        flex-direction: column !important;
        order: initial !important;
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Static vertical arrow lines */
    .architecture-arrow .arrow-line {
        width: 3px !important;
        height: 40px !important;
        background: linear-gradient(180deg, var(--kloud-cyan), rgba(47, 243, 224, 0.6)) !important;
        transform: scaleY(1) !important;
        transform-origin: top !important;
    }
    
    /* Static vertical arrow heads */
    .architecture-arrow .arrow-head {
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-top: 12px solid var(--kloud-cyan) !important;
        border-bottom: none !important;
        margin-left: 0 !important;
        margin-top: -2px !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
    .architecture-title h2 {
        font-size: 1.8rem;
        padding: var(--spacing-lg) var(--spacing-md);
        margin: 0;
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.5px;
        white-space: normal;
        /* Keep the professional styling on mobile */
        background: linear-gradient(135deg, var(--kloud-charcoal) 0%, var(--darker-bg) 100%);
        border: 2px solid var(--kloud-cyan);
        border-radius: var(--border-radius);
        box-shadow: 
            0 4px 16px rgba(47, 243, 224, 0.15),
            inset 0 1px 0 rgba(47, 243, 224, 0.1);
    }
    
    /* Mobile node sizing */
    .node-content {
        width: 200px;
        height: 200px;
    }
    
    .node-front,
    .node-back {
        width: 200px;
        height: 200px;
        padding: var(--spacing-lg);
        border-radius: var(--border-radius);
    }
    
    /* Simple fade-in on scroll */
    .architecture-node:not(.visible) {
        opacity: 0.3;
    }
    
    .architecture-node.visible {
        opacity: 1;
    }
    
    /* Mobile content styling */
    .info-content h4 {
        font-size: 1.1rem;
    }
    
    .info-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .node-front i {
        font-size: 2.5rem;
    }
    
    .node-front h3 {
        font-size: 1rem;
    }
    
    /* Hide progress indicator on mobile */
    .architecture-progress {
        display: none !important;
    }
    
    /* Fix footer positioning for mobile architecture page */
    .architecture-fullscreen + .footer {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
    }
    
    /* Add proper bottom spacing to architecture content */
    .parallax-architecture {
        padding-bottom: var(--spacing-3xl) !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide scroll down indicator on architecture page for screens under 1080px */
    .scroll-down-indicator {
        display: none !important;
    }
    
    /* Mobile subpages navigation - ensure proper spacing */
    .architecture-subpages {
        margin-top: var(--spacing-2xl) !important;
        padding-top: var(--spacing-2xl) !important;
    }
    
    .subpages-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .subpage-card {
        padding: var(--spacing-lg);
    }
}

/* ==============================================
   TABLET SCREENS (Portrait and Square orientations)
   ============================================== */

@media ((max-aspect-ratio: 1.5) or (max-height: 600px) or (max-width: 1080px)) {
    .container {
        padding: 0 var(--container-padding-tablet);
    }
    
    .nav-container {
        padding: 0 var(--container-padding-tablet);
    }
    
    .hero-content {
        padding: 0 var(--container-padding-tablet);
    }
    
    .hero,
    .architecture-hero,
    .about-hero,
    .experience,
    .skills {
        padding: var(--section-padding-tablet);
    }
    
    /* Slightly larger arrows for tablet */
    .architecture-arrow.arrow-1, 
    .architecture-arrow.arrow-2, 
    .architecture-arrow.arrow-3 {
        width: 40px;
        margin: 0 2px;
    }
    
    .parallax-architecture {
        gap: 2px;
        padding: 0.25rem;
        max-width: 98vw;
    }
}

/* ==============================================
   TABLET STYLES (769px to 1024px)
   ============================================== */

@media (max-width: 1024px) and (min-width: 769px) {
    .tech-categories {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

/* ==============================================
   GENERAL MOBILE STYLES (768px and below)
   ============================================== */

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .architecture-flow {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        text-align: center;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
    }
    
    .flow-arrow-down {
        grid-column: 1;
        transform: rotate(0deg);
    }
    
    .storage-section {
        grid-column: 1;
        grid-row: auto;
    }
    
    .pipeline-flow {
        flex-direction: column;
    }
    
    .pipeline-arrow {
        transform: rotate(90deg);
    }
    
    .interests-grid {
        grid-template-columns: 1fr;
    }
    
    .philosophy-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    
    .cat-image {
        width: 150px;
        height: 150px;
    }
    
    .job-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .timeline::before {
        left: 1rem;
    }
    
    .timeline-item {
        padding-left: 3rem;
    }
    
    .timeline-marker {
        left: 0.25rem;
    }
    
    .container {
        padding: 0 15px;
    }

    /* Contact Page Responsive */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-hero {
        padding: 4rem 0 2rem;
    }
    
    .contact-content {
        padding: 2rem 0;
    }
    
    .contact-form-container {
        padding: 2rem 1.5rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
        max-width: 100%;
    }
    
    /* Profile picture responsive for medium screens */
    .intro-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-xl);
    }
    
    .profile-image {
        width: 180px;
        height: 180px;
    }
    
    .footer-links a {
        flex: 0 0 auto;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
        white-space: nowrap;
        text-align: center;
    }

    /* Services Page Responsive */
    .services-contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .services-form-container {
        padding: 2rem 1.5rem;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .process-steps {
        grid-template-columns: 1fr;
    }
    
    .tech-categories {
        grid-template-columns: 1fr;
    }

    /* Scroll Down Indicator - Hide on Mobile */
    .scroll-down-indicator {
        display: none !important;
    }

    /* Under Construction Module Responsive */
    .under-construction {
        padding: 1.5rem;
    }
    
    .construction-icon {
        font-size: 2.5rem;
    }
    
    .construction-title {
        font-size: 1.3rem;
    }
    
    .construction-message {
        font-size: 0.9rem;
    }
}

/* ==============================================
   SMALL MOBILE SCREENS (480px and below)
   ============================================== */

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .timeline-content {
        padding: 1.5rem;
    }
    
    .component {
        padding: 1rem;
    }
    
    .feature-card,
    .skill-category {
        padding: 1.5rem;
    }
    
    /* Architecture title for very small screens */
    .architecture-title h2 {
        font-size: 1.4rem !important;
        padding: var(--spacing-md) var(--spacing-sm) !important;
        letter-spacing: 0.3px !important;
    }
    
    /* Ensure proper spacing on very small screens */
    .architecture-title {
        margin-bottom: var(--spacing-lg) !important;
    }
    
    .parallax-architecture {
        margin-top: var(--spacing-md) !important;
        gap: var(--spacing-md) !important;
    }
    
    /* Ensure nodes have proper spacing on very small screens */
    .architecture-node {
        margin-bottom: var(--spacing-md) !important;
    }
    
    /* Extra small screen footer adjustments */
    .footer-links {
        gap: var(--spacing-sm) !important;
        line-height: 1.4;
    }
    
    .footer-links a {
        font-size: 0.85rem !important;
        padding: var(--spacing-xs) !important;
    }
    
    /* Make services link wrap if needed */
    .footer-links a[href="services.html"],
    .footer-links a[href="pages/services.html"],
    .footer-links a[href="../services.html"] {
        flex-basis: 100%;
        margin-top: var(--spacing-xs);
    }
    
    /* Profile picture responsive for small screens */
    .intro-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .profile-image {
        width: 150px;
        height: 150px;
    }
    
    .profile-overlay i {
        font-size: 3rem;
    }
}

/* ==============================================
   DESKTOP AND LARGER SCREENS (Landscape orientations)
   ============================================== */

@media (min-aspect-ratio: 1.5) and (min-height: 301px) {
    .container {
        padding: 0 var(--container-padding-desktop);
    }
    
    .nav-container {
        padding: 0 var(--container-padding-desktop);
    }
    
    .hero-content {
        padding: 0 var(--container-padding-desktop);
    }
    
    .hero,
    .architecture-hero,
    .about-hero,
    .experience,
    .skills {
        padding: var(--section-padding-desktop);
    }
    
    /* Standard arrows for desktop */
    .architecture-arrow.arrow-1, 
    .architecture-arrow.arrow-2, 
    .architecture-arrow.arrow-3 {
        width: 60px;
        margin: 0 4px;
    }
    
    .parallax-architecture {
        gap: 4px;
        padding: 0.5rem;
        max-width: 1100px;
    }
}

/* ==============================================
   LARGE SCREENS (Landscape orientations)
   ============================================== */

@media (min-aspect-ratio: 1.5) and (min-height: 301px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    /* Larger arrows for big screens */
    .architecture-arrow.arrow-1, 
    .architecture-arrow.arrow-2, 
    .architecture-arrow.arrow-3 {
        width: 70px;
        margin: 0 8px;
    }
    
    .parallax-architecture {
        gap: 8px;
        padding: 1rem;
        max-width: 1200px;
    }
}

/* ==============================================
   EXTRA LARGE SCREENS (Landscape orientations)
   ============================================== */

@media (min-aspect-ratio: 1.5) and (min-height: 301px) {
    .hero {
        padding: var(--spacing-5xl) 0;
    }
    
    .experience,
    .skills {
        padding: var(--spacing-4xl) 0;
    }
}

/* ==============================================
   ACCESSIBILITY RESPONSIVE FEATURES
   ============================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-link,
    .tech,
    .stat {
        border-width: 2px;
    }
    
    .architecture-arrow .arrow-line {
        height: 6px;
    }
}

/* Reduced motion preferences - responsive */
@media (prefers-reduced-motion: reduce) {
    .architecture-node,
    .architecture-arrow,
    .timeline-item,
    .feature-card {
        transition: opacity 0.3s ease !important;
        transform: none !important;
    }
    
    .parallax-architecture {
        transform: none !important;
    }
    
    .scroll-down-indicator {
        animation: none !important;
    }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    .navbar,
    .scroll-down-indicator,
    .architecture-progress,
    .nav-hamburger {
        display: none !important;
    }
    
    .main-content {
        margin-top: 0;
    }
    
    .hero,
    .architecture-hero,
    .about-hero {
        background: none !important;
        color: #000 !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    /* Ensure text is readable in print */
    body,
    .timeline-content,
    .skill-category,
    .feature-card {
        background: white !important;
        color: black !important;
    }
}