/* =========================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================= */

/* Extra Large Screens */
@media screen and (min-width: 1400px) {
  .container { max-width: 1400px; }
  .hero-title { font-size: 5rem; }
  .hero-subtitle { font-size: 1.8rem; }
  .section-title { font-size: 3.2rem; }
  .restaurant-grid, .menu-list { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* Large Screens */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .restaurant-grid, .menu-list { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
}

/* Medium-Large Screens */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .hero-title { font-size: 3.8rem; }
  .section-title { font-size: 2.5rem; }
  .restaurant-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .menu-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Tablet Landscape */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-title { font-size: 3.2rem; }
  .restaurant-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
  .menu-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .motivational-card { flex: 0 0 calc(50% - 15px); }
  .restaurant-card { height: auto; min-height: 90px; padding: 8px 0; }
  .restaurant-image { width: 80px; height: 80px; }
}

/* Tablet Portrait and Mobile Landscape */
@media screen and (max-width: 767px) {
  .hero-title { font-size: 3rem; }
  .section-title { font-size: 2.2rem; }
  .navbar .container { padding: 1rem; }
  .nav-links {
    position: fixed; right: -100%; height: 100vh; top: 0; background-color: #0a0a0a;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 70%; transition: right 0.5s ease; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1000; border-left: 2px solid #d4af37;
  }
  .nav-links li { margin: 1.5rem 0; }
  .burger { display: block; z-index: 1001; }
  .nav-active { right: 0; }
  .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
  .toggle .line2 { opacity: 0; }
  .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

  .motivational-card, .restaurant-grid, .menu-list { flex: 0 0 100%; grid-template-columns: 1fr; }
  .about-content, .restaurant-detail, .search-container { flex-direction: column; }
  .restaurant-card { height: auto; min-height: 100px; padding: 10px 0; }
  .restaurant-image { width: 80px; height: 80px; }
  .hero-credits { font-size: 0.7rem; max-width: 250px; }
  .restaurant-title-overlay h1 { font-size: 2.5rem; }
  .map-container { padding-bottom: 75%; }
}

/* Mobile Portrait */
@media screen and (max-width: 576px) {
  .hero-title { font-size: 2.5rem; }
  .section-title { font-size: 1.8rem; }
  .contact-container, .footer-content { flex-direction: column; }
  .modal-content { width: 95%; margin: 5% auto; padding: 15px; }
  .restaurant-image { width: 70px; height: 70px; }
  .contact-info, .contact-form { padding: 1.5rem; }
}

/* Small Mobile */
@media screen and (max-width: 375px) {
  .hero-title { font-size: 2rem; }
  .menu-section h3 { font-size: 1.8rem; }
  .hero-credits { font-size: 0.55rem; }
  .restaurant-image { width: 60px; height: 60px; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .restaurant-card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
}

/* Print styles */
@media print {
  .navbar, .burger, .back-to-restaurants, .social-media { display: none; }
  body { background: white; color: black; }
  .section-title { color: black; }
}