/* ==========================================================================
   OGGIO EGG WAFFLE - RESPONSIVE
   Mobile-first breakpoints (most F&B traffic is mobile from IG/WA)
   ========================================================================== */

/* ---------- Tablet & below (<= 1024px) ---------- */
@media (max-width: 1024px) {

  .trust-grid,
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .location__map {
    min-height: 280px;
  }
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
  .navbar__links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--color-surface);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 6rem 2rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-med);
    z-index: 99;
  }

  .navbar__links.is-open {
    transform: translateX(0);
  }

  .navbar__toggle {
    display: flex;
  }

  .navbar__actions .btn-primary {
    display: none;
  }

  .navbar__links .btn-primary {
    display: inline-flex;
    margin-top: 0.5rem;
  }

  .hero {
    padding-top: 6.5rem;
    padding-bottom: 3.5rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
  }

  .hero__image-wrap {
    max-width: 300px;
  }

  .trust-grid,
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .franchise-strip {
    flex-direction: column;
    text-align: center;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .footer__brand,
  .footer__social {
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
  }

  .footer__desc {
    margin-inline: auto;
  }

  .section {
    padding: var(--space-xl) 0;
  }
}

/* ---------- Small mobile (<= 420px) ---------- */
@media (max-width: 420px) {
  .tab-pill {
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .order-cta__actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .order-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 280px;
  }
}