/*
 * GLOBAL MOBILE RESPONSIVENESS & TOUCH EXPERIENCE
 * Overrides for screens below 768px
 */

@media (max-width: 768px) {
  
  /* ==========================
     GLOBAL UI & TOUCH TARGETS
     ========================== */
  .cursor-dot, .cursor-ring {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  .narrative-content {
    overflow-x: hidden;
  }

  /* Increase Touch Targets */
  .ds-btn, .audio-toggle, .menu-link, .nav-menu-btn {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    touch-action: manipulation;
  }

  .brand-logo {
    height: 40px; /* Reduced from 80px to save nav space */
  }

  /* ==========================
     CHAPTER 1 (HERO)
     ========================== */
  .c1-content {
    padding: 0 2rem;
  }
  .c1-headline {
    font-size: clamp(3rem, 15vw, 6rem) !important;
  }
  .c1-indent {
    margin-left: 0;
  }
  .c1-manifesto-wrapper {
    margin-left: 0;
  }

  /* ==========================
     CHAPTER 2 (ABOUT)
     ========================== */
  .chapter-2 {
    height: auto; 
  }
  .c2-pin-container {
    height: auto;
    padding: 10vh 2rem;
  }
  .c2-cards-grid {
    flex-direction: column;
    gap: 2rem;
  }
  .c2-card {
    width: 100%;
    transform: none !important; /* Disable GSAP translate on mobile via CSS */
    opacity: 1 !important;
  }
  
  /* ==========================
     CHAPTER 3 (SERVICES)
     ========================== */
  .c3-panel {
    padding: 0 2rem;
  }
  .c3-milestone {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .c3-milestone-image {
    height: 30vh;
  }
  .c3-milestone-number {
    font-size: 40vw;
    top: 5vh;
  }

  /* ==========================
     CHAPTER 4 (INDUSTRIES)
     ========================== */
  .chapter-4 {
    padding: 10vh 2rem;
  }
  .c4-cards-container {
    flex-direction: column;
  }
  .c4-card {
    width: 100%;
    height: auto;
  }

  /* ==========================
     CHAPTER 5 (AI WORKFLOW)
     ========================== */
  .c5-content {
    padding: 10vh 1rem;
  }
  .c5-simulation {
    height: 400px;
    margin-top: 2rem;
    overflow: hidden;
  }
  .c5-svg-container {
    /* Scale the massive 1200x800 SVG down and center it */
    transform: scale(0.6) translate(-20%, -20%);
    transform-origin: top left;
  }
  /* Mobile nodes need to scale down with the SVG */
  .c5-node {
    transform: scale(0.6) translate(-50%, -50%) !important;
  }
  .c5-node.active {
    transform: scale(0.7) translate(-50%, -50%) !important;
  }

  /* ==========================
     CHAPTER 6 (PORTFOLIO SHOWCASE)
     Native Swipe-Snapping
     ========================== */
  .chapter-6 {
    height: auto;
    padding-top: 10vh;
  }
  .c6-pin-wrapper {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem; /* space for scrollbar */
  }
  /* Hide scrollbar for clean look */
  .c6-pin-wrapper::-webkit-scrollbar {
    display: none;
  }
  
  .c6-horizontal-track {
    width: auto;
    transform: none !important; /* Force override GSAP */
  }
  
  .c6-case-study {
    width: 100vw;
    height: 80vh;
    scroll-snap-align: start;
    flex: 0 0 100vw;
  }

  /* ==========================
     CHAPTER 7 (MANUFACTURING)
     ========================== */
  .c7-content {
    padding: 0 2rem;
  }
  .c7-blueprint-svg {
    opacity: 0.2;
  }

  /* ==========================
     CHAPTER 8 (MARQUEE)
     ========================== */
  .chapter-8 {
    padding: 10vh 0;
  }
  .c8-marquee-item {
    font-size: 2.5rem;
  }

  /* ==========================
     CHAPTER 9 (STATS)
     ========================== */
  .c9-content {
    grid-template-columns: 1fr;
    padding: 10vh 2rem;
  }
  .c9-stats-grid {
    grid-template-columns: 1fr;
  }

  /* ==========================
     CHAPTER 10 (TESTIMONIALS)
     ========================== */
  .c10-carousel-wrapper {
    height: 400px;
  }
  .c10-card {
    width: 85vw;
    padding: 2rem 1.5rem;
  }

  /* ==========================
     CHAPTER 11 (CTA)
     ========================== */
  .chapter-11 {
    height: 80vh;
  }
  .c11-pin {
    height: 80vh;
  }
  .c11-portal {
    width: 150px;
    height: 150px;
    font-size: 1rem;
  }
}