/* ============================================================
   HR Cafe — Responsive layers (mobile-first overrides)
   Base styles are mobile; these adjust upward + collapse nav.
   ============================================================ */

/* ---- Gallery: simplify grid on small screens ---- */
@media (max-width: 860px) {
   .gallery {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 160px;
   }
   .gallery__item--wide {
      grid-column: span 2;
   }
   .gallery__item--tall {
      grid-row: span 1;
   }
}

/* ---- Two-column blocks stack ---- */
@media (max-width: 820px) {
   .about-story,
   .contact-grid {
      grid-template-columns: 1fr;
   }
   .about-story .media {
      aspect-ratio: 16 / 10;
      order: -1;
   }
   .footer__grid {
      grid-template-columns: 1fr 1fr;
   }
   .footer__brand-col {
      grid-column: 1 / -1;
   }
}

/* ============================================================
   NAV — collapse to hamburger + slide-in panel
   ============================================================ */
@media (max-width: 900px) {
   .nav__toggle {
      display: flex;
      z-index: 1200;
   }
   .nav__links {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(80vw, 320px);
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1.6rem;
      padding: 2rem 2.2rem;
      background: var(--espresso);
      box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.6);
      transform: translateX(100%);
      transition: transform 0.4s var(--ease);
      z-index: 1100;
   }
   .nav.is-open .nav__links {
      transform: translateX(0);
   }
   .nav__links a {
      color: var(--on-dark) !important;
      font-size: 1.3rem;
      font-family: var(--font-display);
   }
   .nav__links a::after {
      background: var(--ember) !important;
   }
   /* dim backdrop */
   .nav.is-open::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(20, 15, 11, 0.55);
      backdrop-filter: blur(2px);
      z-index: 1050;
   }
}

/* ---- Phone tuning ---- */
@media (max-width: 560px) {
   .hero__actions {
      width: 100%;
   }
   .hero__actions .btn {
      width: 100%;
      justify-content: center;
   }
   .order-links {
      width: 100%;
   }
   .order-links__label {
      width: 100%;
      margin-bottom: 0.2rem;
   }
   .footer__grid {
      grid-template-columns: 1fr;
      gap: 1.8rem;
   }
   .footer__bottom {
      flex-direction: column;
   }
   .dish__head {
      flex-wrap: wrap;
   }
   .cta-band__actions .btn {
      width: 100%;
      justify-content: center;
   }
}

/* ---- Large screens: give hero copy more room ---- */
@media (min-width: 1000px) {
   .hero__inner {
      max-width: 68%;
   }
}