/* =========================
   MOBILE FIXES (GLOBAL)
   Added for: header/topbar + Why Jumbo + Happy Travellers + Ready to Plan
   ========================= */
@media (max-width: 900px){
  html, body{ overflow-x:hidden; }
  img, video{ max-width:100%; height:auto; }
}

/* 1) BLUE-PINK TOP BAR + WHITE HEADER */
@media (max-width: 900px){
  .top-bar .top-bar-inner{
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
  }
  .top-bar .top-bar-highlight{
    flex-wrap:wrap;
    gap:8px;
  }

  .site-header .container.nav{
    flex-wrap:wrap !important;
    gap:10px;
  }

  /* Default: hide desktop nav links; use hamburger */
  .site-header .nav-links{
    display:none !important;
  }
  .site-header .nav-toggle{
    display:inline-flex !important;
  }

  .site-header .nav-right{
    min-width:0 !important;
  }

  /* Hide contact block on small screens to prevent wrapping */
  .site-header .nav-contact{
    display:none !important;
  }

  /* Scale logos */
  .site-header .nav-logo,
  .site-header .nav-secondary-logo-right{
    max-height:44px;
    width:auto;
  }
}

/* Show mobile menu when toggled open (site-common.js toggles body.nav-open) */
@media (max-width: 900px){
  body.nav-open .site-header .nav-links{
    display:flex !important;
    flex-direction:column;
    width:100%;
    gap:12px;
    padding:14px 0;
    align-items:flex-start;
  }
  body.nav-open .site-header .nav-right{
    display:flex !important;
    width:100%;
    justify-content:flex-start;
    gap:12px;
    padding:0 0 14px;
  }
}

/* 2) WHY BOOK WITH JUMBO TRAVEL */
@media (max-width: 900px){
  .why-book .tiles,
  .why-book .grid,
  .why-book .cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* 3) HAPPY TRAVELLERS */
@media (max-width: 900px){
  .happy-travellers .tiles,
  .happy-travellers .grid,
  .happy-travellers .cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* 4) READY TO PLAN (prevent character images overlapping form) */
@media (max-width: 900px){
  .ready-to-plan,
  .ready-to-plan .container{
    display:block !important;
  }

  .ready-to-plan .left,
  .ready-to-plan .visual,
  .ready-to-plan .image-box{
    position:relative !important;
    overflow:hidden !important;
    z-index:1 !important;
    margin-bottom:14px;
  }

  .ready-to-plan .right,
  .ready-to-plan form,
  .ready-to-plan .enquiry-card{
    position:relative !important;
    z-index:5 !important;
  }

  .ready-to-plan .character,
  .ready-to-plan .characters img,
  .ready-to-plan .rotating img{
    max-width:90% !important;
  }
}


/* =========================
   MOBILE FIXES v5 (HOME SECTIONS)
   - WHY BOOK / HAPPY TRAVELLERS: wbj-section
   - READY TO PLAN: form grid + CTA button + hide character stage
   ========================= */
@media (max-width: 900px){
  /* WHY BOOK + HAPPY TRAVELLERS */
  #ways-to-book.wbj-section .wbj-grid,
  .wbj-section .wbj-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .wbj-section .wbj-card{
    width: 100% !important;
    max-width: 100% !important;
  }
  .wbj-section .wbj-block{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wbj-section .wbj-title{
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.15 !important;
  }
  .wbj-section .wbj-subtitle{
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* READY TO PLAN: prevent any overlap and make form 1-column */
  #ready-to-plan .readyplan-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #ready-to-plan .readyplan-form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #ready-to-plan .readyplan-form-grid label,
  #ready-to-plan .readyplan-form-grid input,
  #ready-to-plan .readyplan-form-grid select,
  #ready-to-plan .readyplan-form-grid textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #ready-to-plan .readyplan-btn{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  /* Show character rotator on mobile (requested) and keep it compact */
  #ready-to-plan .readyplan-character-stage{
    display: block !important;
    margin-top: 12px !important;
  }
  #ready-to-plan .character-rotator{
    height: 220px !important;
  }
}


/* NAV OPEN PATCH: ensure menu always collapses/expands correctly */
@media (max-width: 900px){
  body:not(.nav-open) .site-header .nav-links{display:none !important;}
}

/* =========================
   PATCH: Home mobile header stability + menu close compatibility
   - Align CSS with JS (body.nav-open)
   - Prevent partial/blur rendering glitches on sticky white header
   ========================= */
@media (max-width: 900px){
  /* Ensure sticky white header renders solid on mobile */
  .homepage-locked .site-header{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }

  /* Mobile menu open state (JS toggles body.nav-open) */
  body.nav-open .site-header .nav-links{
    display:flex !important;
    flex-direction:column;
    width:100%;
    gap:12px;
    padding:14px 0;
    align-items:flex-start;
  }

  /* Keep right block available (Contact button/logo) */
  .site-header .nav-right{
    display:flex !important;
    align-items:center;
    gap:10px;
  }

  /* Avoid the mobile menu "sticking" visually due to layout overflow */
  body.nav-open .site-header .container.nav{align-items:flex-start;}
}

/* =========================
   PATCH: Ready to Plan - show character images on mobile + fix form distortion
   ========================= */
@media (max-width: 900px){
  /* Show the character rotator again (it was hidden before) */
  #ready-to-plan .readyplan-character-stage{
    display:block !important;
  }
  #ready-to-plan .character-rotator{
    height:220px !important;
  }
}


/* =========================================================
   READY TO PLAN (MOBILE) - HARDENED
   - Ensure character rotator is visible
   - Prevent form distortion (full-width controls, no overflow)
   ========================================================= */
@media (max-width: 900px){
  #ready-to-plan .readyplan-info{overflow: visible !important;}
  #ready-to-plan .readyplan-character-stage{
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    max-width: 100% !important;
  }
  #ready-to-plan .character-rotator{
    height: 220px !important;
    min-height: 220px !important;
  }
  #ready-to-plan .readyplan-form{overflow: visible !important;}
  #ready-to-plan .readyplan-form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #ready-to-plan .readyplan-form-grid label,
  #ready-to-plan .readyplan-form-grid input,
  #ready-to-plan .readyplan-form-grid select,
  #ready-to-plan .readyplan-form-grid textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #ready-to-plan select[multiple]{
    height: 160px !important;
  }
}




/* =========================
   PATCH (LOCKED SCOPE): Home - Ready to Plan character rotator (MOBILE ONLY)
   - Force render on iOS Safari / mobile browsers
   - Does NOT affect desktop
========================= */
@media (max-width: 900px){
  #ready-to-plan .readyplan-character-stage{
    display:block !important;
    width:100% !important;
    min-height: 220px !important;
    margin-top: 14px !important;
    overflow: visible !important;
  }
  #ready-to-plan .character-rotator{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height: 220px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }
  #ready-to-plan .character-rotator__img{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    max-width: 100% !important;
    max-height: 220px !important;
    width:auto !important;
    height:auto !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 6 !important;
  }
}