/**
 * HAIBO Tours — responsive layer
 * Mobile: 320–767px | Tablet: 768–1024px | Desktop: 1025px+
 * Desktop layout unchanged; overrides scoped to smaller viewports.
 */

/* ─── Base ─── */
html {
  -webkit-text-size-adjust: 100%;
}

/* overflow-x on html/body — see mobile-fixes.css */

img,
video {
  max-width: 100%;
}

.haibo-media {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fluid typography (all viewports; capped on desktop) */
.hero-title {
  font-size: clamp(2rem, 6vw + 0.5rem, 5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  line-height: 1.75;
}

.section-title {
  font-size: clamp(1.65rem, 4vw + 0.5rem, 3rem);
  line-height: 1.12;
}

.page-heading {
  font-size: clamp(1.85rem, 5.5vw + 0.5rem, 4.5rem);
  line-height: 1.1;
}

p,
.leading-8 {
  overflow-wrap: break-word;
}

/* Safe area + page gutter */
.haibo-gutter {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* ─── Performance: reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════
   MOBILE — max-width: 767px
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
  html {
    scroll-behavior: auto;
  }

  /* Lighter glass / blur on small screens */
  .glass,
  .nav-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .cta-cinematic__overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .hero-banner::before,
  .cta-cinematic__bg {
    transform: scale(1.03);
  }

  .cta-cinematic:hover .cta-cinematic__bg {
    transform: scale(1.03);
  }

  /* Reduce hover / float animations (less jank); destination cards styled in destinations-mobile.css */
  .stats-card:hover,
  .contact-card:hover,
  .package-card:hover,
  .gallery-media-card:hover,
  .gallery img:hover,
  .gallery-item:hover {
    transform: none;
  }

  .floating,
  .cta-cinematic--float:not(.dest-cta-cinematic) {
    animation: none;
  }

  .dest-cta-card__actions {
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.45rem !important;
  }

  .dest-cta-card__actions .dest-cta-btn {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .btn-main:hover {
    transform: none;
  }

  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* ── Navbar ── */
  nav.nav-blur {
    padding: 0.6rem max(1rem, env(safe-area-inset-right)) 0.6rem max(1rem, env(safe-area-inset-left)) !important;
  }

  nav.nav-blur > .flex.justify-between {
    align-items: center;
    gap: 0.35rem;
  }

  nav a.flex.items-center.gap-3 {
    gap: 0.5rem !important;
    min-width: 0;
  }

  nav img[data-haibo-logo] {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.65rem;
    flex-shrink: 0;
  }

  nav h1 {
    font-size: 1.05rem !important;
    line-height: 1.2;
  }

  nav .text-xs {
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
    line-height: 1.3;
  }

  nav .flex.items-center.gap-4 {
    gap: 0.35rem !important;
    flex-shrink: 0;
  }

  #menu-btn {
    font-size: 1.35rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mobile-menu {
    margin-top: 0.65rem;
  }

  #mobile-menu .flex.flex-col {
    gap: 0.85rem;
    padding-bottom: 0.75rem;
  }

  /* ── Typography ── */
  .hero-title {
    font-size: clamp(1.85rem, 8vw, 2.65rem) !important;
  }

  .page-heading {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
  }

  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }

  .hero-subtitle,
  .text-lg.leading-8,
  .text-gray-300.leading-8,
  .text-gray-200.leading-8 {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  [class*='tracking-[5px]'],
  [class*='tracking-[4px]'] {
    letter-spacing: 0.2em !important;
  }

  .text-3xl.md\:text-5xl,
  .cta-cinematic__content h2 {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.25;
  }

  /* ── Section spacing & gutters ── */
  .py-28 {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .py-24 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .px-8,
  .md\:px-20,
  #safaris {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  section {
    scroll-margin-top: 4.5rem;
  }

  /* ── Hero (home) ── */
  #home.hero-banner {
    min-height: min(92svh, 720px);
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    justify-content: center;
  }

  .page-hero.hero-banner .hero-inner {
    align-items: flex-end;
    justify-content: flex-end;
  }

  #home .max-w-3xl {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #home .flex-wrap.gap-5 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem !important;
  }

  #home .flex-wrap.gap-5 a {
    width: 100%;
    text-align: center;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    font-size: 1rem !important;
  }

  /* Page heroes — min-heights from hero-overlays.css; gutter only */
  .page-hero.hero-banner:not(#home):not(.hero-destination) {
    min-height: clamp(18rem, 48svh, 26rem);
    align-items: flex-end;
  }

  .page-hero.hero-banner:not(.hero-destination) .hero-inner {
    padding-top: 5rem !important;
    padding-bottom: 1.75rem !important;
  }

  .contact-hero.hero-banner,
  .gallery-hero.hero-banner {
    min-height: clamp(17rem, 46svh, 24rem);
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    text-align: center;
    justify-content: center;
  }

  .contact-hero.hero-banner > *,
  .gallery-hero.hero-banner > * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Weather widget below hero copy */
  #home .weather-widget {
    width: 100%;
    max-width: 20rem;
    margin: 1.25rem auto 0;
    padding: 0;
  }

  /* ── Search form ── */
  #safaris {
    margin-top: -1.5rem !important;
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  .safari-search {
    padding: 1rem !important;
    gap: 0.75rem !important;
  }

  .safari-search__input,
  .safari-search__select,
  .safari-search__submit {
    min-height: 3rem;
    font-size: 1rem;
  }

  /* Destination & package cards — see cards-mobile.css */

  /* Home gallery — gallery-page.css */

  /* ── About ── */
  #about .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  #about .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .about-stat-icon {
    width: 2.65rem;
    height: 2.65rem;
    margin-bottom: 0.65rem;
  }

  .about-stat-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .stats-card {
    padding: 0.9rem !important;
    border-radius: 1.15rem !important;
  }

  .stats-card .stats-card-title {
    font-size: 0.72rem !important;
    line-height: 1.3;
  }

  .stats-card .stats-card-sub {
    font-size: 0.75rem !important;
  }

  #about img.haibo-media,
  #about img {
    border-radius: 1.35rem !important;
    max-height: 16rem;
    width: 100%;
    object-fit: cover;
  }

  /* ── Contact cards (home + contact page) ── */
  #contact-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .contact-card {
    padding: 1.1rem !important;
    border-radius: 1.25rem !important;
  }

  .contact-icon {
    width: 2.35rem !important;
    height: 2.35rem !important;
    margin-bottom: 0.65rem !important;
  }

  .contact-icon svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  .contact-card p.text-lg {
    font-size: 0.82rem !important;
    line-height: 1.45;
  }

  /* ── Contact page layout & forms ── */
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #contact-form .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #contact-form input,
  #contact-form select,
  #contact-form textarea,
  #contact-form button {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  #contact-form textarea {
    min-height: 8rem;
  }

  .glass.rounded-\[40px\] {
    border-radius: 1.35rem !important;
    padding: 1.35rem !important;
  }

  /* ── Packages — packages-grid.css (2-col mobile) ── */

  .grid.lg\:grid-cols-2.gap-16 {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .gallery.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .gallery.grid-cols-2 .gallery-item,
  .gallery.grid-cols-2 img {
    min-height: 8.5rem !important;
    height: 8.5rem !important;
    object-fit: cover;
    border-radius: 1rem !important;
  }

  .gallery.grid-cols-2 img.md\:col-span-2,
  .gallery.grid-cols-2 .gallery-item.md\:col-span-2 {
    grid-column: span 2;
    min-height: 10rem !important;
    height: 10rem !important;
  }

  .page-hero .flex.flex-wrap.gap-3 {
    justify-content: center;
    gap: 0.5rem !important;
  }

  .page-hero .flex.flex-wrap.gap-3 span {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem !important;
  }

  /* ── CTA blocks ── */
  .cta-cinematic {
    border-radius: 1.35rem !important;
  }

  .cta-cinematic__content.p-10,
  .cta-cinematic__content.p-12,
  .cta-cinematic__content.p-16 {
    padding: 1.35rem !important;
  }

  .flex.flex-wrap.justify-center.gap-4,
  .flex.flex-wrap.justify-center.gap-5 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.65rem !important;
  }

  .flex.flex-wrap.justify-center.gap-4 a,
  .flex.flex-wrap.justify-center.gap-5 a {
    width: 100%;
    text-align: center;
  }

  /* ── Social ── */
  .social-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .social-link {
    justify-content: center;
    width: 100%;
  }

  /* ── Footer: see css/footer-mobile.css ── */

  /* ── WhatsApp float (base mobile; footer clearance in footer-mobile.css) ── */
  .whatsapp-float {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    right: max(1rem, env(safe-area-inset-right, 1rem));
    width: 3.15rem;
    height: 3.15rem;
    z-index: 40;
  }

  .whatsapp-float svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  /* ── Section headers ── */
  .flex.flex-col.md\:flex-row.justify-between {
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .flex.flex-col.md\:flex-row .glass,
  .flex.flex-col.md\:flex-row a.glass {
    width: 100%;
    text-align: center;
  }

  #gallery .text-center.md\:text-left {
    text-align: left;
    width: 100%;
  }
}

/* Very small phones */
@media (max-width: 374px) {
  #home-destinations:not(.destinations-catalog-grid),
  #all-destinations:not(.destinations-catalog-grid),
  #contact-cards {
    gap: 0.55rem !important;
  }

  #contact-cards {
    grid-template-columns: 1fr !important;
  }

  nav h1 {
    font-size: 0.95rem !important;
  }
}

/* ═══════════════════════════════════════
   TABLET — 768px to 1024px
   ═══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  nav.nav-blur {
    padding: 0.85rem 1.5rem !important;
  }

  nav img[data-haibo-logo] {
    width: 3rem !important;
    height: 3rem !important;
  }

  nav h1 {
    font-size: 1.35rem !important;
  }

  nav .flex.items-center.gap-4 {
    gap: 0.75rem !important;
  }

  .hero-title {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important;
  }

  .page-heading {
    font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
  }

  .section-title {
    font-size: clamp(1.85rem, 3vw, 2.5rem) !important;
  }

  .py-28 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .px-8,
  .md\:px-20 {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  /* Hero */
  #home.hero-banner {
    min-height: 85vh;
    min-height: 85svh;
  }

  .page-hero.hero-banner:not(.hero-destination) {
    min-height: clamp(20rem, 48vh, 30rem);
  }

  .contact-hero.hero-banner,
  .gallery-hero.hero-banner {
    min-height: clamp(18rem, 44vh, 28rem);
  }

  /* Grids: 2 columns on tablet (legacy grids only) */
  #home-destinations:not(.destinations-catalog-grid),
  #all-destinations:not(.destinations-catalog-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Home gallery — gallery-page.css */

  #contact-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .whatsapp-float {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* ═══════════════════════════════════════
   DESKTOP — 1025px+ (preserve Tailwind)
   ═══════════════════════════════════════ */
@media (min-width: 1025px) {
  .hero-title {
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .destination-card .dest-card-media img {
    object-fit: cover;
  }
}