/*
  LUXE ISLES — MOBILE RESPONSIVE CSS
  Covers: 320px-768px (mobile) and 768px-1024px (tablet)
*/

/* ── NAV CURRENCY BUTTON ALIGNMENT ── */
nav { gap: 12px; }
#li-currency { position: relative !important; display: flex !important; align-items: center !important; }
.li-curr-btn { height: 42px !important; display: flex !important; align-items: center !important; }

/* ── KILL ALL NAV PSEUDO-ELEMENT ARROWS (belt + braces) ── */
nav a::before,
nav li::before,
nav a[href="destinations.html"]::before,
nav a[href="tours.html"]::before,
.nav-links a::before,
.nav-links li::before {
  content: none !important;
  display: none !important;
}

/* ── NAV UNDERLINE HOVER ANIMATION ── */
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold, #c9a96e);
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: center;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}
.nav-hamburger span {
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,.85);
  display: block;
  transition: transform .3s, opacity .3s;
  border-radius: 1px;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ── MOBILE NAV MENU ── */
.nav-hamburger { display: none !important; }
.mobile-nav-menu {
  display: none !important;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: rgba(8,8,8,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,169,110,.15);
  padding: 20px 28px 28px;
  z-index: 999;
}
.mobile-nav-menu.open { display: block !important; }
.mobile-nav-menu a {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none;
  transition: color .25s, padding-left .25s;
}
.mobile-nav-menu a:hover { color: #c9a96e; padding-left: 6px; }
.mobile-nav-menu a:last-child { border-bottom: none; color: #c9a96e; font-weight: 500; }

/* ══════════════════════════════════════════════
   GLOBAL
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }
}

/* ══════════════════════════════════════════════
   MOBILE (max-width: 768px)
═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* NAV */
  nav { padding: 0 20px !important; height: 60px !important; gap: 8px !important; }
  .nav-links { display: none !important; }
  .nav-enquire { padding: 8px 18px !important; font-size: .62rem !important; }
  .nav-hamburger { display: flex !important; }
  #li-currency { display: none !important; }

  /* HERO */
  .hero, .article-hero { height: 70vh !important; min-height: 420px !important; }
  .hero-content, .ah-content { padding: 0 20px 60px !important; max-width: 100% !important; }
  .hero-title, .ah-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .hero-price-val { font-size: 2rem !important; }
  .hero-scroll { display: none !important; }
  .blog-hero, .contact-hero, .page-hero, .doc-hero,
  .sm-hero, .gallery-hero, .matcher-hero { padding: 100px 20px 40px !important; }
  .bh-title, .ph-title, .sm-title, .gh-title, .mh-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .ch-inner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 20px !important; }

  /* TOUR BAR */
  .tour-bar { padding: 0 16px !important; flex-direction: column !important; height: auto !important; }
  .tour-bar-left h2 { font-size: .9rem !important; padding: 12px 0 4px !important; }
  .tour-bar-right { gap: 12px !important; padding: 10px 0 12px !important; flex-wrap: wrap !important; }
  .tb-contact, .tbdiv, .tb-or { display: none !important; }
  .btn-book, .btn-book-now { padding: 10px 24px !important; font-size: .65rem !important; }

  /* STATS BAR */
  .stats-bar .stats-inner { grid-template-columns: repeat(2, 1fr) !important; padding: 0 16px !important; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; }

  /* 2-COLUMN → 1 COLUMN */
  .story-grid, .ov-grid, .overview-grid,
  .itin-stop-grid, .itin-stop-grid.reverse,
  .form-inner, .process-header, .weather-top,
  .hi-grid, .article-layout, .booking-inner,
  .calc-page, .doc-layout, .ch-inner { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }

  /* 3-COLUMN → 1 COLUMN */
  .team-grid, .awards-grid, .values-grid, .why-pillars,
  .offices-grid, .reviews-grid, .more-grid, .pricing-grid,
  .accom-grid, .package-cards, .tours-grid, .how-section,
  .result-cards, .best-time-cards, .press-quote-strip { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* INNER PADDING */
  .story-inner, .ov-inner, .process-inner, .hi-inner,
  .accom-inner, .reviews-inner, .faq-inner, .other-inner,
  .team-inner, .values-inner, .awards-inner, .press-inner,
  .footer-inner, .more-inner, .author-inner, .cta-inner { padding: 0 20px !important; }

  /* ARTICLES GRID */
  .articles-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* WHY PILLARS */
  .why-pillar::before { display: none !important; }
  .process-steps { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .process-steps::before { display: none !important; }

  /* NUMBERS */
  .numbers-inner { grid-template-columns: repeat(2, 1fr) !important; padding: 0 20px !important; }
  .num-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; padding: 24px 16px !important; }
  .num-val { font-size: 2.4rem !important; }

  /* FOOTER */
  .footer-inner { grid-template-columns: 1fr !important; padding: 0 20px !important; gap: 32px !important; }
  .footer-brand { align-items: flex-start !important; }
  .footer-legal { padding: 16px 20px !important; flex-wrap: wrap !important; gap: 16px !important; }
  .footer-copy { padding: 12px 20px 24px !important; }

  /* SECTIONS */
  .story-section, .values-section, .team-section, .process-section,
  .press-section, .awards-section, .cta-section, .overview-section,
  .hi-section, .gallery-section, .why-section, .weather-section,
  .accordion-section, .accommodation-section, .reviews-section,
  .faq-section, .other-tours, .more-section, .newsletter-strip,
  .offices-section, .faq-mini, .wishlist-page, .compare-wrap { padding-top: 56px !important; padding-bottom: 56px !important; }

  .itinerary-section .itin-inner { padding: 0 20px !important; }
  .itin-stop { padding: 48px 0 !important; }

  /* BLOG FEATURED */
  .featured-card { display: block !important; }
  .fc-img { height: 220px !important; }
  .fc-body { padding: 28px 20px !important; }
  .featured-section .featured-inner { padding: 0 20px !important; }

  /* FILTER BARS */
  .filter-bar .filter-inner, .selector-strip {
    padding: 12px 16px !important; flex-wrap: wrap !important; height: auto !important; gap: 12px !important;
  }
  .filter-search { padding: 0 !important; border-right: none !important; width: 100% !important; }
  .filter-cats { flex-wrap: wrap !important; padding: 0 !important; gap: 6px !important; }
  .filter-cat { padding: 6px 12px !important; }

  /* GALLERY */
  .masonry { columns: 2 !important; padding: 0 16px 48px !important; }
  .insta-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .insta-strip { padding: 32px 20px !important; }

  /* BOOKING */
  .booking-page { padding: 90px 16px 48px !important; }
  .step-header { padding: 24px 20px 0 !important; }
  .step-panel { padding: 0 20px 28px !important; }
  .steps-labels { display: none !important; }
  .date-grid, .form-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .booking-summary { display: none !important; }

  /* CONTACT */
  .contact-sidebar { display: none !important; }
  .form-section .form-inner { padding: 40px 20px 60px !important; }

  /* ARTICLE */
  .article-layout { padding: 40px 20px 60px !important; }
  .article-sidebar { display: none !important; }
  .article-body p { font-size: 1rem !important; }

  /* MISC */
  .progress-bar { top: 60px !important; }
  #li-whatsapp { bottom: 20px !important; right: 16px !important; }
  #li-livechat { bottom: 20px !important; left: 16px !important; }

  /* CALCULATOR */
  .calc-page { grid-template-columns: 1fr !important; padding: 90px 20px 56px !important; gap: 32px !important; }
  .calc-right { position: static !important; }

  /* WISHLIST */
  .wishlist-grid { grid-template-columns: 1fr !important; }
  .sug-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .wishlist-page { padding: 60px 20px 80px !important; }

  /* DOC */
  .doc-layout { grid-template-columns: 1fr !important; padding: 40px 20px 60px !important; }
  .doc-nav { display: none !important; }
  .sm-body { grid-template-columns: 1fr !important; padding: 40px 20px 60px !important; gap: 32px !important; }

  /* TYPOGRAPHY */
  .story-title, .values-title, .section-title, .why-title,
  .cta-title, .nl-title, .overview-title, .ov-title,
  .reviews-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }

  /* AI MATCHER */
  .chat-window { height: 340px !important; padding: 20px 16px !important; }
  .chat-input-area { padding: 14px 16px !important; }
  .how-section { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   TABLET (769px - 1024px)
═══════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .team-grid, .awards-grid, .articles-grid,
  .reviews-grid, .pricing-grid, .accom-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .overview-inner, .ov-inner, .team-inner, .values-inner,
  .process-inner, .hi-inner, .accom-inner, .reviews-inner,
  .other-inner, .footer-inner { padding: 0 40px !important; }
  .masonry { columns: 3 !important; }
}