/* ============================================================
   VIET BABYLON — responsive.css
   All media queries. Mobile-first (min-width).
   ============================================================ */

/* ── 1920px+ (Full HD / large monitors) ─────────────────────── */
@media (min-width: 1920px) {
  :root { --nav-h: 84px; }

  .container {
    max-width: 1600px;
    padding: 0 60px;
  }

  section { padding: 120px 0; }

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

  .gallery-grid { grid-template-rows: 300px 300px; }

  .terasa-mosaic { padding: 48px 60px; }
}

/* ── 1440px (Large desktop) ──────────────────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
}

/* ── Under 1280px ────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .contact-grid { gap: 48px; }
  .about-grid { gap: 48px; }

  /* Drinks: 2-col on medium screens */
  .napoje-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── Under 1024px (tablet landscape / small laptops) ────────── */
@media (max-width: 1023px) {
  :root { --nav-h: 64px; }

  /* Nav: hide center links, show hamburger */
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  .mobile-drawer { display: block; }

  /* About: stack */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-images {
    height: 340px;
    max-width: 520px;
    margin: 0 auto;
  }
  .about-img-main { width: 68%; height: 75%; }
  .about-img-accent { width: 52%; height: 58%; }

  /* Drinks: 2-col on tablet */
  .napoje-cols { grid-template-columns: repeat(2, 1fr); }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gallery-item { height: 220px; }
  .gallery-item.large { grid-column: span 2; grid-row: span 1; height: 280px; }

  /* Contact: stack */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-map { height: 360px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

/* ── Under 768px (tablet portrait) ─────────────────────────── */
@media (max-width: 767px) {
  .container { padding: 0 24px; }

  section { padding: 72px 0; }

  /* Hero */
  .hero-content { max-width: 100%; }
  .hero-title { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .hero-ctas { flex-direction: column; gap: 12px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { width: 100%; justify-content: center; }

  /* About stats */
  .about-stats { gap: 12px; }
  .stat-num { font-size: 1.5rem; }

  /* About images */
  .about-images { height: 280px; }
  .about-img-main { width: 65%; height: 72%; }
  .about-img-accent { width: 55%; height: 55%; }
  .about-img-badge { width: 56px; height: 56px; }

  /* Menu tabs: scrollable pills (no wrap) */
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .menu-tab { flex: 0 0 auto; font-size: 0.8rem; padding: 10px 14px; }

  /* Dish list: single column on tablet */
  .dish-list { grid-template-columns: 1fr; }

  /* Polévky + Phở 3-col: collapse to single column on tablet */
  .menu-3col { grid-template-columns: 1fr; gap: 24px 0; }
  .menu-col-heading--ghost { display: none; }

  /* Drinks: single-column */
  .napoje-cols { grid-template-columns: 1fr; gap: 24px; }

  /* Allergen grid: 4 columns on tablet */
  .alergen-grid { grid-template-columns: repeat(4, 1fr); }

  /* Multi-variant dish: stack options below on narrow tablet */
  .dish-item--multi { flex-wrap: wrap; }
  .dish-item--multi .dish-main { flex: 1 1 100%; }
  .dish-item > .dish-options { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding-top: 0; }

  /* Terasa mosaic: 2 col */
  .terasa-mosaic {
    grid-template-columns: 1fr 1fr;
    padding: 24px 24px;
    gap: 10px;
  }
  .mosaic-item { height: 200px; }
  .mosaic-item:first-child {
    grid-column: span 2;
    height: 220px;
  }

  /* Terasa text */
  .terasa-text .section-title { font-size: 1.8rem; }
  .terasa-hero { min-height: 60vh; }

  /* Gallery: 2 col */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; grid-template-rows: auto; }
  .gallery-item { height: 180px; }
  .gallery-item.large { grid-column: span 2; grid-row: span 1; height: 220px; }

  /* Contact map */
  .contact-map { height: 300px; }

  /* Hours table */
  .hours-table td { padding: 7px 0; font-size: 0.85rem; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }

  /* Section headers */
  .section-header { margin-bottom: 36px; }
}

/* ── Under 480px (small phones) ─────────────────────────────── */
@media (max-width: 479px) {
  .container { padding: 0 16px; }

  section { padding: 56px 0; }

  .hero-title { font-size: clamp(2rem, 11vw, 2.8rem); }
  .hero-tag { font-size: 0.65rem; }

  /* About images: simpler layout */
  .about-images { height: 240px; }
  .about-img-badge { display: none; }

  /* Terasa mosaic: 1 col */
  .terasa-mosaic { grid-template-columns: 1fr; gap: 10px; }
  .mosaic-item { height: 200px; }
  .mosaic-item:first-child { grid-column: span 1; height: 220px; }

  .terasa-hero-content { padding: 60px 16px; }

  /* Gallery: 1 col on very small */
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-item { height: 220px; }
  .gallery-item.large { grid-column: span 1; grid-row: span 1; height: 220px; }

  /* Menu tabs: scroll */
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .menu-tab { flex: 0 0 auto; font-size: 0.78rem; padding: 9px 12px; }

  /* Allergen grid: 2 columns on small phones */
  .alergen-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .alergen-icon { width: 30px; height: 30px; }
  .alergen-card { padding: 14px 8px 10px; }

  /* Drinks tabs: full-width */
  .napoje-tabs { width: 100%; justify-content: center; }
  .napoje-tab  { font-size: 0.82rem; padding: 9px 16px; }

  /* Contact */
  .contact-map { height: 260px; border-radius: 12px; }

  /* Section */
  .section-title { font-size: 1.5rem; }
  .section-header { margin-bottom: 28px; }
}

/* ── Mobile nav scroll fix ───────────────────────────────────── */
@media (max-width: 1023px) {
  .navbar.scrolled {
    background: rgba(26, 61, 43, 0.98);
  }
}

/* ── Touch targets ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-link,
  .mobile-nav-link,
  .menu-tab,
  .btn-primary,
  .btn-outline,
  .nav-cta,
  .mobile-nav-cta {
    min-height: 44px;
  }
}

/* ── Print / accessibility ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-up {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero-scroll-hint { animation: none; }
  .gallery-item img,
  .mosaic-item img { transition: none; }
}