/* ============================================
   CodeMechanix - Responsive Styles
   Mobile-First Approach
   ============================================ */

/* ============================================
   Base Mobile Styles (320px - 767px)
   Already defined in main styles.css
   ============================================ */

/* ============================================
   Tablet Styles (768px and up)
   ============================================ */

@media (max-width: 1023px) {
  /* Typography adjustments */
  .section-title {
    font-size: 2.5rem;
  }

  .section-subtitle {
    font-size: 1.25rem;
  }

  .hero-tagline {
    margin-bottom: 0.4rem;
  }

  .hero-description {
    margin-bottom: 0.4rem;
  }

  .hero-company-text {
    margin-bottom: 0.75rem;
  }

  .hero-cta {
    gap: 1rem;
    margin-top: 0.75rem;
  }

  .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
  }

  /* Navigation */
  .mobile-menu-toggle {
    display: flex;
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
  }

  .language-selector {
    position: fixed;
    right: 5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }

  .green-tech-icon {
    display: none;
  }

  .nav-menu {
    display: flex;
    position: fixed;
    top: 100px;
    right: -100%;
    left: auto;
    transform: none;
    width: 100%;
    height: calc(100vh - 100px);
    background: rgba(10, 14, 20, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
    gap: 1rem;
    transition: right 0.3s ease;
    z-index: 999;
    border-top: 1px solid var(--metal-dark);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-link {
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-size: 1.25rem;
  }

  .company-badge {
    display: block;
    text-align: center;
    margin-top: 2rem;
  }

  .company-tagline {
    display: none;
  }

  /* Hero Section */
  .hero-title {
    font-size: 3rem;
  }

  .hero-tagline {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 1.125rem;
  }

  .hero-cta .btn {
    min-width: 220px;
  }

  /* Problem & Solution */
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* AutoNeura */
  .machinery-network {
    height: 300px;
  }

  .product-tagline {
    font-size: 1.75rem;
  }

  .product-motto {
    font-size: 1.25rem;
  }

  /* Features Grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Technical Specs */
  .monitor-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tech-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Sectors Grid */
  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* How It Works */
  .process-flow {
    flex-direction: column;
    padding: 1rem;
  }

  .process-connector {
    display: none;
  }

  .process-step {
    margin-bottom: 2rem;
  }

  /* Statistics */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .stat-number {
    font-size: 3rem;
  }

  .stat-suffix {
    font-size: 1.5rem;
  }

  /* Support */
  .support-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .support-card-featured {
    grid-column: 1 / -1;
  }

  /* CTA Banner */
  .cta-title {
    font-size: 2.5rem;
  }

  .cta-description {
    font-size: 1.125rem;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ============================================
   Mobile Styles (767px and below)
   ============================================ */

@media (max-width: 767px) {
  /* Container padding */
  .container {
    padding: 0 1rem;
  }

  section {
    padding: 3rem 0;
  }

  /* Typography */
  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 1.125rem;
  }

  /* Navigation */
  .nav-container {
    padding: 1rem;
  }

  .logo-text {
    font-size: 1.25rem;
  }

  .logo-icon {
    width: 100px;
    height: 100px;
  }

  /* Hero Section */
  .hero {
    min-height: 100vh;
    padding-top: 100px;
  }

  .hero-content {
    text-align: center;
    padding-top: 2rem;
  }

  .hero-title {
    font-size: 2.75rem;
  }

  .hero-tagline {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
    line-height: 1.5;
  }

  .hero-description {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }

  .hero-company {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  .hero-company-text {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .hero-cta {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: center;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }

  .hero-logo {
    display: none;
  }

  .hero-green-tech-mobile {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .green-tech-hero-img {
    width: 160px;
    height: auto;
  }

  /* Control Room Mockup - Hide on mobile */
  .control-room-mockup {
    display: none;
  }

  .hero-content {
    height: auto;
    min-height: auto;
  }

  /* Buttons */
  .btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
  }

  .btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }

  /* Scroll to Top Button */
  .scroll-to-top {
    right: 15px;
  }

  /* Comparison Cards */
  .comparison-card {
    padding: 2rem 1.5rem;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .feature-list {
    font-size: 1rem;
  }

  /* AutoNeura */
  .machinery-network {
    height: 250px;
  }

  .product-tagline {
    font-size: 1.5rem;
  }

  .product-motto {
    font-size: 1.125rem;
  }

  .product-description {
    font-size: 1rem;
  }

  .product-benefits {
    font-size: 1rem;
  }

  .product-cta {
    flex-direction: column;
    gap: 1rem;
  }

  .product-cta .btn {
    width: 60%;
    margin: 0 auto;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .feature-card {
    padding: 2rem 1.5rem;
  }

  .feature-title {
    font-size: 1.25rem;
  }

  .feature-icon {
    width: 70px;
    height: 70px;
  }

  /* Technical Specs */
  .tech-features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .badge-text {
    font-size: 0.8125rem;
  }

  /* Sectors */
  .sectors-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .sector-card {
    padding: 2.5rem 1.5rem;
  }

  .sector-title {
    font-size: 1.5rem;
  }

  /* How It Works */
  .step-number {
    font-size: 2.5rem;
  }

  .step-icon {
    width: 80px;
    height: 80px;
  }

  .step-title {
    font-size: 1.5rem;
  }

  .step-description {
    max-width: 100%;
  }

  /* Statistics */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-card {
    padding: 2rem 1.5rem;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .stat-suffix {
    font-size: 1.25rem;
  }

  /* Support */
  .support-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .support-card {
    padding: 1.5rem 1rem;
  }

  .support-title {
    font-size: 1rem;
  }

  /* About */
  .about-logo svg {
    width: 100px;
    height: 100px;
  }

  .codeminer-section {
    padding: 2rem 1.5rem;
  }

  .codeminer-logo svg {
    width: 60px;
    height: 60px;
  }

  /* CTA Banner */
  .cta-title {
    font-size: 2rem;
  }

  .cta-description {
    font-size: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .cta-buttons .btn {
    width: 60%;
    margin: 0 auto;
  }

  /* Contact */
  .contact-form-wrapper,
  .contact-info-wrapper {
    padding: 2rem 1.5rem;
  }

  .form-title,
  .info-title {
    font-size: 1.5rem;
  }

  .info-block {
    flex-direction: column;
    gap: 1rem;
  }

  .info-icon {
    font-size: 1.5rem;
  }

  /* Footer */
  .footer {
    padding: 3rem 0 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand {
    align-items: center;
    text-align: center;
  }

  .footer-logo {
    margin: 0 auto 1rem;
  }

  .footer-col {
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }

  .codeminer-badge {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   Desktop Styles (1024px and up)
   ============================================ */

@media (min-width: 1024px) {
  /* Show company badge in nav on desktop */
  .company-badge {
    display: inline-block;
  }

  /* Enhanced hover effects on desktop */
  .feature-card:hover,
  .sector-card:hover,
  .comparison-card:hover {
    transform: translateY(-10px);
  }

  /* Larger icon sizes */
  .feature-icon svg,
  .sector-icon svg {
    width: 70px;
    height: 70px;
  }

  /* Better spacing for larger screens */
  section {
    padding: 6rem 0;
  }

  .hero {
    padding-top: 80px;
  }
}

/* ============================================
   Medium Laptop Screens (1024px to 1439px)
   Vertical compression for better fit
   ============================================ */

@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-logo-img {
    width: 150px;
    height: 150px;
  }

  .hero-logo {
    margin-bottom: 0.2rem;
  }

  .hero-tagline {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }

  .hero-description {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    line-height: 1.5;
  }

  .hero-company-text {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .control-room-mockup {
    padding: 0.75rem;
    margin: 0.75rem auto;
  }

  .monitor-grid {
    gap: 0.75rem;
  }

  .monitor {
    padding: 0.6rem;
  }

  .monitor-screen {
    height: 110px;
  }

  .monitor-header {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .status-indicator {
    font-size: 0.65rem;
    padding: 0.3rem;
  }

  .hero-cta {
    margin-top: 0.75rem;
    gap: 1rem;
  }

  .hero-cta .btn {
    min-width: 200px;
  }

  .btn {
    padding: 0.55rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   Large Desktop Styles (1440px and up)
   ============================================ */

@media (min-width: 1440px) {
  /* Larger container */
  .container {
    max-width: 1400px;
  }

  /* Enhanced typography */
  .section-title {
    font-size: 3.5rem;
  }

  .hero-title {
    font-size: 5rem;
  }

  /* More spacing */
  section {
    padding: 8rem 0;
  }

  /* Larger cards */
  .feature-card,
  .sector-card {
    padding: 3rem 2.5rem;
  }

  /* Better grid layouts */
  .features-grid,
  .sectors-grid {
    gap: 2.5rem;
  }

  .stats-grid {
    gap: 3rem;
  }
}

/* ============================================
   Ultra-Wide Screens (1920px and up)
   ============================================ */

@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }

  .section-title {
    font-size: 4rem;
  }

  .hero-title {
    font-size: 5.5rem;
  }
}

/* ============================================
   Landscape Mobile Orientation
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 5rem 0;
    padding-top: 100px;
  }

  .hero-logo svg {
    width: 60px;
    height: 60px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-tagline {
    font-size: 1.125rem;
  }

  .scroll-indicator {
    display: none;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  /* Hide non-essential elements */
  .navbar,
  .scroll-indicator,
  .hero-cta,
  .product-cta,
  .cta-banner,
  .contact-form-wrapper,
  .mobile-menu-toggle {
    display: none;
  }

  /* Ensure readability */
  body {
    color: #000;
    background: #fff;
  }

  .section-title,
  .hero-title,
  h1,
  h2,
  h3,
  h4 {
    color: #000;
  }

  /* Remove animations */
  * {
    animation: none !important;
    transition: none !important;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }

  .feature-card,
  .sector-card,
  .comparison-card {
    page-break-inside: avoid;
  }
}

/* ============================================
   Accessibility - High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --primary-dark: #000000;
    --text-light: #ffffff;
    --accent-primary: #ff8c5a;
  }

  .btn-primary,
  .btn-secondary,
  .nav-link {
    border-width: 3px;
  }

  .feature-card,
  .sector-card,
  .comparison-card {
    border-width: 2px;
  }
}

/* ============================================
   Dark Mode (System Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme by default */
  /* This section ensures consistency */
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn,
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Disable hover effects on touch devices */
  .feature-card:hover,
  .sector-card:hover,
  .comparison-card:hover {
    transform: none;
  }

  /* Keep tap highlighting */
  * {
    -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
  }
}

/* ============================================
   Small Mobile Devices (320px - 374px)
   ============================================ */

@media (max-width: 374px) {
  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }

  .logo-text {
    font-size: 1.125rem;
  }

  .feature-card,
  .sector-card {
    padding: 1.5rem 1rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .cta-title {
    font-size: 1.75rem;
  }
}

/* ============================================
   Tablet Landscape (1024px - 1279px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 1100px;
  }

  .features-grid,
  .sectors-grid {
    gap: 1.75rem;
  }

  .tech-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   iPhone SE and Similar Small Devices
   ============================================ */

@media (max-width: 375px) {
  .comparison-card {
    padding: 1.5rem 1rem;
  }

  .hero-cta .btn,
  .product-cta .btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
  }

  .feature-icon {
    width: 60px;
    height: 60px;
  }

  .step-icon {
    width: 70px;
    height: 70px;
  }
}

/* ============================================
   Foldable/Dual Screen Devices
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}