/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */

/* Tablet & Smaller Desktop */
@media (max-width: 1024px) {
  :root {
    --space-xl: 4rem;
    --space-xxl: 6rem;
  }
  
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Header Navigation */
  .header-nav {
    display: none; /* Will be handled by JS for mobile menu */
  }
  
  .mobile-menu-btn {
    display: flex;
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;
  }
  
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    text-align: left;
  }
  
  /* Forms */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem;
  }
}

/* Small Mobile */
@media (max-width: 425px) {
  :root {
    --container-padding: 1.25rem;
  }
  
  .btn {
    width: 100%;
    padding: 1rem;
  }
  
  .display-1 {
    font-size: 2.5rem;
  }
  
  .display-2 {
    font-size: 2rem;
  }
}