/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Large Desktop */
@media (max-width: 1400px) {
  :root {
    --container-width: 1140px;
  }
  h1 { font-size: 4rem; }
}

/* Laptop & Tablet Landscape */
@media (max-width: 1024px) {
  :root {
    --container-width: 960px;
  }
  
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  
  .section { padding: 6rem 0; }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  /* Navigation */
  .nav-menu {
    display: none; /* Hide for tablet/mobile, use mobile menu */
  }
  
  .hamburger {
    display: block;
  }
}

/* Tablet Portrait */
@media (max-width: 768px) {
  :root {
    --container-width: 720px;
  }
  
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
  
  .section { padding: 4rem 0; }
  
  /* Home Page Specific Layouts */
  .about-layout {
    flex-direction: column;
  }
  
  .about-image {
    width: 100%;
    margin-bottom: 2rem;
  }
  
  .about-text {
    width: 100%;
    padding-left: 0;
  }
  
  .features-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 576px) {
  :root {
    --container-width: 100%;
  }
  
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.8rem; }
  
  .section { padding: 3rem 0; }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .btn {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-buttons .btn {
    width: 100%;
  }
}