/* ===================================================================
   Mộc Coffee — responsive.css
   Breakpoints: 1200 / 992 / 768 / 576
   Mobile nav open/close is pure CSS (checkbox hack, no JS).
   =================================================================== */

@media (max-width: 1200px) {
  .container { padding: 0 20px; }
  .product-media-grid,
  .tab-panel { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .hamburger { display: flex; }
  .nav-close { display: block; align-self: flex-end; font-size: 1.6rem; color: var(--color-white); cursor: pointer; margin-bottom: 20px; }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(340px, 82%);
    height: 100vh;
    background: var(--color-dark-2);
    flex-direction: column;
    padding: 30px 34px 40px;
    display: flex;
    transition: right var(--transition);
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
    z-index: 1050;
  }

  .nav-toggle-input:checked ~ .main-nav { right: 0; }

  .nav-toggle-input:checked ~ .header-actions .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .header-actions .hamburger span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .header-actions .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .main-nav a { font-size: 0.95rem; }

  .header-actions .btn-primary.desktop-only { display: none; }

  .hero-title { font-size: 2.8rem; }

  .about .container,
  .visit-band .container {
    grid-template-columns: 1fr;
  }
  .about-media { max-width: 460px; margin: 0 auto 70px; }
  .visit-band { background-attachment: scroll; }

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

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 46px 30px; }
}

@media (max-width: 768px) {
  .about, .menu-section, .space-section, .testimonials, .visit-band { padding-top: 80px; padding-bottom: 80px; }
  .stats-band { padding: 50px 0; }

  .hero { min-height: 86vh; }
  .hero-title { font-size: 2.3rem; }
  .hero-title em { font-size: 2rem; }
  .hero-buttons { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-buttons .btn { width: 100%; }
  .hero-badges { gap: 22px; flex-wrap: wrap; }

  .section-title { font-size: 1.9rem; }

  .about-features { grid-template-columns: 1fr 1fr; }
  .about-badge { left: 6px; top: 16px; padding: 14px 16px; }
  .about-media-float { width: 58%; bottom: -20px; right: -12px; }

  .tab-panel { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  .visit-info { padding: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 576px) {
  .container { padding: 0 18px; }
  .logo { font-size: 1.5rem; }

  .hero-content { padding: 40px 0; }
  .hero-title { font-size: 1.9rem; }
  .hero-title em { font-size: 1.7rem; }
  .hero-tag { font-size: 0.68rem; }

  .section-tag { font-size: 0.72rem; letter-spacing: 2px; }
  .section-title { font-size: 1.6rem; }
  .section-head { margin-bottom: 38px; }

  .about-features { grid-template-columns: 1fr; }
  .tab-labels { gap: 10px; }
  .tab-labels label { padding: 10px 18px; font-size: 0.72rem; }
  .tab-panel { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .gallery-item.wide { grid-column: span 1; }

  .stats-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat-item strong { font-size: 2.1rem; }

  .visit-info { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-links { flex-direction: row; gap: 16px; flex-wrap: wrap; justify-content: center; }
}