/* ==========================================================================
   Responsive – desktop-first (reference 1280px)
   Breakpoints: 1199 / 1279 / 1099 / 1023 / 899 / 767 / 599 / 420
   ========================================================================== */

@media (max-width: 1199px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 0.8fr; }
  .footer-cta { grid-column: 1 / -1; }
}

/* Desktop hẹp: cột chữ Hero hẹp hơn để ảnh còn đủ rộng */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero { --hero-text-w: 430px; --hero-h: 620px; }
  .hero-points li { font-size: 0.875rem; }
}

/* ---------- Header: chuyển hamburger ---------- */
@media (max-width: 1099px) {
  :root { --header-h: 72px; }
  .site-header__inner { gap: 12px; }
  .brand__logo { width: 76px; }
  .brand__line1 { font-size: 1.0625rem; }
  .brand__line2 { font-size: 1.4375rem; }
  .brand__tagline { font-size: 0.75rem; }

  .nav-toggle { display: inline-flex; order: 3; }
  .header-cta { margin-left: auto; }
  .header-cta__phones { display: none; }

  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
    padding: 8px var(--container-gutter) 24px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav__list a { display: block; padding: 14px 4px; font-size: 1.0625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .main-nav__list a::after { display: none; }
  .main-nav__mobile-cta { display: grid; gap: 10px; margin-top: 18px; }
  .main-nav__mobile-cta .btn { width: 100%; }
  .site-header.nav-open::after { opacity: 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .menu-section .carousel { --per-view: 3; --carousel-gap: 16px; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-card { grid-column: 1 / -1; min-height: 0; }
  .order-card__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hero xếp chồng: ảnh trên – chữ dưới ---------- */
@media (max-width: 899px) {
  .site-header::after { display: none; }
  .hero { --hero-h: auto; --hero-media-ratio: 0.625; } /* 16:10 */
  .hero-slide { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-slide__media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero-slide__media img { object-position: var(--focus-mobile, center); }
  .hero-slide__media::after { display: none; }
  .hero-slide__content { max-width: 600px; padding-block: 20px 28px; }
  .hero-slide__sub { margin-top: 14px; }
  .hero-slide__actions { margin-top: 20px; }

  /* Nút điều khiển nằm ở góc phải dưới của ảnh, không chiếm thêm chiều cao */
  .hero__controls {
    right: 12px; bottom: auto;
    top: calc(100vw * var(--hero-media-ratio) - 52px);
  }

  .about { grid-template-columns: minmax(0, 1fr); }
  .about__media { order: -1; min-height: 0; aspect-ratio: 2 / 1; }
  .about__panel { padding: 26px var(--container-gutter) calc(30px + var(--curve-h)); }
  .about__media img {
    /* mobile: ảnh trên – chữ dưới => ảnh mờ dần vào nền ở mép dưới */
    -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
  }
  .about__content { max-width: 600px; }

  .section-head--split { grid-template-columns: 1fr; text-align: center; }
  .section-head--split > .section-head__main { grid-column: 1; margin-inline: auto; }
  .section-head--split > .section-head__aside { display: none; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --curve-h: 20px; }
  .hero { --hero-media-ratio: 0.75; }
  .hero-slide__media { aspect-ratio: 4 / 3; }
  .menu-section .carousel { --per-view: 2.2; --carousel-gap: 12px; }
  .dish-card__body { padding-top: 10px; }
  .dish-card__title { font-size: 1rem; }

  /* Gallery mobile: chỉ 4 ảnh đẹp nhất (2 × 2) + "Xem thêm ảnh" mở lightbox */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 46vw); gap: 10px; }
  .gallery-grid > li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gallery-grid > li:nth-child(4) { display: none; }
  .gallery-item__zoom { opacity: 1; transform: none; width: 32px; height: 32px; right: 8px; bottom: 8px; }
  .gallery-nav { display: none; }
  .gallery-more { display: block; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-map { min-height: 260px; }
  .order-card__phones { grid-template-columns: minmax(0, 1fr); }

  /* Footer mobile gọn: bỏ khối CTA (đã có thanh gọi nhanh), link xếp hàng ngang */
  .site-footer { padding-top: 32px; }
  .footer-grid { gap: 22px 24px; }
  .footer-brand { display: flex; align-items: center; gap: 14px; }
  .footer-brand__logo { width: 92px; }
  .footer-brand p { margin-top: 0; font-size: 0.875rem; line-height: 1.5; }
  .footer-title { margin-bottom: 10px; font-size: 0.875rem; }
  .footer-list { gap: 8px; }
  .footer-grid > div:nth-child(3) .footer-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer-cta { display: none; }
  .footer-bottom { margin-top: 22px; padding-block: 14px; }
  .footer-bottom p + p { display: none; }

  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .result-item { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .sidebar { grid-template-columns: minmax(0, 1fr); }

  /* Thanh gọi nhanh cố định đáy màn hình */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-dark); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
  }
  .mobile-cta .btn { min-height: 48px; padding-inline: 12px; }
}

@media (max-width: 599px) {
  .brand__tagline { display: none; }
  .header-cta .btn__label { display: none; }
  .header-cta .btn { width: 44px; min-height: 44px; padding: 0; }
  .hero__btn--arrow { display: none; } /* mobile: vuốt + chấm, giữ nút tạm dừng */
  .hero-slide__desc { display: none; }  /* mobile: giữ tagline + 3 ý ngắn cho gọn */
  .hero-points { margin-top: 12px; gap: 5px; }
  .hero-points li { font-size: 0.875rem; }
  .hero-slide__hotline { display: none; } /* đã có thanh gọi nhanh cố định */
  .hero-slide__sub { font-size: 1.0625rem; }
  .hero-slide__actions { flex-wrap: nowrap; gap: 10px; }
  .hero-slide__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: 0.9375rem; }
  .about__actions .btn { flex: none; }
  .feature-list { gap: 8px 12px; }
  .feature-list li { font-size: 0.8125rem; gap: 8px; }
  .feature-list .icon { width: 18px; height: 18px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .menu-section .carousel { --per-view: 1.6; }
  .brand__logo { width: 64px; }
  .brand__line1 { font-size: 0.9375rem; }
  .brand__line2 { font-size: 1.25rem; }
}