/* Copyright (c) 2026 Black Scar Studio. All Rights Reserved. */

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

@media (max-width: 1024px) {
  .section { padding: 80px 0; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }
  .hero-content .lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { max-width: 480px; margin: 0 auto; }

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

  .about-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .about-visual { max-width: 480px; margin: 0 auto; }
  .about-float { right: 0; bottom: 16px; }

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

  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

  .testimonials-grid { grid-template-columns: 1fr; gap: 22px; }

  .hours-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; }

  .menu-list { grid-template-columns: 1fr; column-gap: 0; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

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

  .story-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .story-grid.reverse > div:first-child { order: 0; }
  .story-visual { max-width: 540px; margin: 0 auto; }

  .awards-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }

  .topbar { display: none; }

  .nav {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-150%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .nav.open { transform: translateY(0); }
  .nav a {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.active::after { display: none; }

  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { padding: 56px 0 80px; }
  .hero-trust {
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-item strong { font-size: 1.45rem; }
  .trust-item span { font-size: 0.74rem; }

  .hero-badge {
    top: 18px;
    right: 18px;
    padding: 9px 14px;
    font-size: 0.74rem;
  }
  .hero-pill {
    bottom: 18px;
    left: 18px;
    padding: 9px 14px;
    font-size: 0.72rem;
  }

  .featured { margin-top: -36px; }
  .featured-grid { grid-template-columns: 1fr; gap: 16px; }
  .featured-card { padding: 26px; }

  .section-header { margin-bottom: 44px; }
  .section-header.between {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .dishes-grid { grid-template-columns: 1fr; gap: 22px; }

  .why-grid { grid-template-columns: 1fr; gap: 32px; }

  .menu-nav { padding: 6px; gap: 4px; max-width: 100%; }
  .menu-nav a { padding: 9px 16px; font-size: 0.82rem; }

  .menu-section { margin-bottom: 56px; }
  .menu-section-head { margin-bottom: 40px; }

  .cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }
  .cta-actions { justify-content: center; flex-wrap: wrap; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .contact-form { padding: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .stat-item strong { font-size: 2.2rem; }

  .page-hero { padding: 56px 0 48px; }

  .hours-table { grid-template-columns: 1fr; gap: 0 0; }

  .hide-mobile { display: none; }

  .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .story-stamp { width: 90px; height: 90px; font-size: 0.82rem; bottom: 18px; left: 18px; }

  .menu-cta { padding: 40px 24px; }
}

@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 20px; }

  .btn-lg { padding: 14px 24px; font-size: 0.92rem; }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .btn { width: 100%; }

  .logo-text { font-size: 1.15rem; }

  .hero-trust { gap: 20px; }
  .trust-item strong { font-size: 1.3rem; }

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

  .awards-grid { grid-template-columns: 1fr; gap: 22px; }

  .testimonial { padding: 28px 24px; }
  .testimonial blockquote { font-size: 1.02rem; }

  .menu-item-head h3, .menu-item-head .price { font-size: 1.08rem; }

  .about-float { padding: 16px 20px; max-width: 250px; }
}