/**
 * NeuraKore Responsive Styles
 *
 * Mobile-first responsive design with breakpoints
 * Breakpoints: mobile (< 768px), tablet (768px-1024px), desktop (> 1024px)
 */

/* ========================================
   TABLET & UP (min-width: 768px)
   ======================================== */

@media (min-width: 768px) {
  /* Navigation - align with sections */
  .nav-minimal {
    padding: 0 4rem;
  }

  /* Sections */
  .content-section {
    padding: 10rem 4rem;
  }

  .cta-section {
    padding: 10rem 4rem;
  }

  .footer-minimal {
    padding: 6rem 4rem 4rem;
  }

  /* Cards */
  .feature-card {
    padding: var(--card-padding-large);
  }

  /* Footer Grid */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-xxxl);
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Hero subtitle centering */
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Utility responsive classes */
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:block { display: block !important; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

  .md\:flex-row { flex-direction: row !important; }
}

/* ========================================
   DESKTOP (min-width: 1024px)
   ======================================== */

@media (min-width: 1024px) {
  /* Hero Section */
  .hero-section {
    padding: 8rem 4rem;
  }

  /* Hero Visual - Show 3D globe on desktop */
  .hero-visual {
    display: flex;
  }

  /* Hide mobile logo on benefits column */
  .mobile-logo {
    display: none;
  }

  /* Show benefits column on signup */
  .benefits-column {
    display: block;
  }

  /* Signup grid layout */
  .signup-content {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Utility responsive classes */
  .lg\:flex { display: flex !important; }
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block !important; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ========================================
   MOBILE ONLY (max-width: 767px)
   ======================================== */

@media (max-width: 767px) {
  /* Hide hero visual (3D globe) on mobile */
  .hero-visual {
    display: none;
  }

  /* Center hero content on mobile */
  .hero-content {
    text-align: center;
    margin: 0 auto;
  }

  .hero-content .flex {
    justify-content: center !important;
  }

  /* Cards grid to single column */
  .cards-container {
    grid-template-columns: 1fr;
  }

  /* Hide desktop navigation */
  .nav-minimal .hidden {
    display: none;
  }

  /* Mobile menu styles */
  #mobileMenu {
    display: none;
  }

  #mobileMenu:not(.hidden) {
    display: block;
  }
}

/* ========================================
   TABLET ONLY (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Hide 3D globe on tablet */
  .hero-visual {
    display: none !important;
  }

  /* Cards grid - 2 columns on tablet */
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media print {
  /* Hide navigation, footers, and interactive elements */
  .nav-minimal,
  .footer-minimal,
  .btn-primary,
  .btn-secondary,
  #mobileMenu {
    display: none !important;
  }

  /* Ensure content is readable */
  body {
    background: white !important;
    color: black !important;
  }

  /* Remove borders and shadows */
  * {
    box-shadow: none !important;
    border-color: #ccc !important;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgba(255, 255, 255, 0.3);
    --border-base: rgba(255, 255, 255, 0.4);
    --border-strong: rgba(255, 255, 255, 0.5);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION (Mobile)
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical padding on mobile landscape */
  .content-section,
  .cta-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .hero-section {
    min-height: auto;
    padding: 4rem 1.5rem 2rem;
  }
}

/* ========================================
   EXTRA LARGE SCREENS (min-width: 1400px)
   ======================================== */

@media (min-width: 1400px) {
  /* Keep consistent max-width: 1200px across all sections for perfect alignment */
  /* Removed max-width override to maintain alignment */

  /* Slightly larger font sizes */
  .hero-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase tap target sizes on touch devices */
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover states on touch devices */
  .feature-card:hover,
  .card-base:hover,
  .stat-card:hover {
    transform: none;
  }
}