/* ==========================================================================
   FILE: css/responsive.css
   MÔ TẢ: Hệ thống Responsive theo triết lý Mobile-first với 4 mốc chuẩn:
          - 480px  (Điện thoại lớn)
          - 768px  (Máy tính bảng dọc - Tablet Portrait)
          - 1024px (Máy tính bảng ngang / Laptop nhỏ)
          - 1280px (Màn hình Desktop tiêu chuẩn & rộng)
          Đảm bảo mọi nút bấm tương tác đạt tối thiểu 44x44px.
   ========================================================================== */

/* --- 1. MẶC ĐỊNH TRÊN MOBILE NHỎ (< 480px) --- */
.btn,
.filter-tab,
.lang-switcher__btn,
.menu-toggle,
.floating-cta__btn,
.modal-close {
  min-height: 44px;
}

.lang-switcher__btn {
  min-height: 36px;
  padding-inline: 0.55rem;
}

.brand-logo__subtitle {
  display: none;
}

.hero__actions .btn,
.cta-banner__actions .btn {
  width: 100%;
}

.search-box {
  min-width: 100%;
}

.lightbox__nav {
  top: auto;
  bottom: var(--space-4);
  transform: none;
}
.lightbox__nav--prev { left: 28%; }
.lightbox__nav--next { right: 28%; }

/* --- 2. BREAKPOINT >= 480px (ĐIỆN THOẠI LỚN) --- */
@media (min-width: 480px) {
  .brand-logo__subtitle {
    display: block;
  }

  .hero__actions .btn,
  .cta-banner__actions .btn {
    width: auto;
  }
}

/* --- 3. BREAKPOINT >= 768px (TABLET) --- */
@media (min-width: 768px) {
  .search-box {
    min-width: 280px;
  }

  .lightbox__nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .lightbox__nav--prev { left: var(--space-6); }
  .lightbox__nav--next { right: var(--space-6); }
}

/* --- 4. BREAKPOINT >= 1024px (LAPTOP / DESKTOP) --- */
@media (min-width: 1024px) {
  /* Ẩn hoàn toàn Drawer Mobile trên màn hình lớn */
  .mobile-drawer {
    display: none !important;
  }

  /* Thu gọn nút nổi trên Desktop để không che nội dung */
  .floating-cta {
    right: var(--space-6);
    bottom: var(--space-6);
  }
}

/* --- 5. BREAKPOINT >= 1280px (MÀN HÌNH RỘNG) --- */
@media (min-width: 1280px) {
  .site-header__inner {
    gap: var(--space-8);
  }

  .main-nav {
    gap: var(--space-8);
  }
}