/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* ---------- Tablet (max 991px) ---------- */
@media (max-width: 991px) {
  /* Services */
  .services-content {
    gap: 3rem !important;
  }

  .services-image .salad {
    right: -60px;
  }

  /* Reviews */
  .review-card {
    flex: 0 0 300px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
  }

  /* App */
  .app-mockup {
    display: none;
  }
}

/* ---------- Mobile (max 767px) ---------- */
@media (max-width: 767px) {
  /* Header */
  .header .menu-toggle {
    display: flex;
    order: -1;
  }

  .header .nav {
    gap: var(--sp-md);
  }

  .header .menu-header {
    position: fixed;
    top: 0;
    right: -280px;
    width: 270px;
    height: 100vh;
    background: var(--clr-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--sp-xl) var(--sp-xl);
    box-shadow: var(--shadow-lg);
    z-index: 105;
    gap: 0;
    transition: right var(--transition-base);
  }

  .header .menu-header.open {
    right: 0;
  }

  .header .menu-header li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .header .menu-header li a {
    display: block;
    padding: var(--sp-md) 0;
    font-size: var(--fs-base);
  }

  .reserve-menu .reserve {
    padding: 6px 14px;
    font-size: var(--fs-xs);
  }

  /* Hero */
  .hero {
    padding-top: 100px;
  }

  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    order: 1;
  }

  .hero-text h1 {
    font-size: 1.75rem;
  }

  .hero-text p {
    max-width: 100%;
  }

  .hero-search {
    justify-content: center;
  }

  .dish-categories {
    order: 2;
  }

  .hero-image > img {
    width: min(300px, 90%);
    margin: 0 auto;
  }
  .hero-image::before {
    display: none;
  }

  .category-list {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
    margin-top: var(--sp-lg);
  }

  /* Popular Dishes */
  .popular-dishes .cards-track .card {
    flex: 0 0 85%;
  }

  /* Services */
  .services-content {
    flex-direction: column;
    gap: 2rem !important;
  }

  .services-image .chef {
    width: min(320px, 100%);
  }

  .services-image .salad,
  .services-image .cheese {
    display: none;
  }

  .services-text {
    text-align: center;
  }

  .services-text .btn-primary {
    margin: 0 auto;
  }

  /* Menu */
  .menu-tabs {
    gap: var(--sp-xs);
  }

  .tab-btn {
    padding: 0.4rem 0.9rem;
    font-size: var(--fs-xs);
  }

  .cards {
    grid-template-columns: 1fr;
  }

  /* Reservation */
  .reserv-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .reserv-text h2 {
    font-size: var(--fs-xl);
    margin-top: var(--sp-lg);
  }

  .image-circle img {
    width: min(300px, 100%);
  }

  .image-circle::before {
    width: 250px;
    height: 250px;
  }

  /* Reviews */
  .review-card {
    flex: 0 0 85%;
    padding: var(--sp-lg);
  }

  .section-head h2 {
    font-size: var(--fs-xl);
  }

  /* Chefs */
  .chef-card {
    flex: 0 0 70%;
  }

  /* App */
  .get-app .container {
    padding: var(--sp-xl);
    flex-direction: column;
    text-align: center;
  }

  .download-btns {
    justify-content: center;
  }

  .store-info small {
    display: none;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .newsletter-col form {
    max-width: 300px;
    margin-inline: auto;
  }

  .social-links {
    justify-content: center;
  }

  /* Scroll Top */
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- Small Mobile (max 400px) ---------- */
@media (max-width: 400px) {
  .hero-text h1 {
    font-size: 1.5rem;
  }

  .store-btn {
    padding: var(--sp-sm) var(--sp-md);
  }

  .store-btn i {
    font-size: 1.5rem;
  }
}