/* =====================================================================
   360 HOTEL SOLUTIONS — mobile.css
   All responsive behaviour lives here. Loaded AFTER style.css.
   Breakpoints: 1024 / 920 (main mobile switch) / 640 / 540 / 400
   ===================================================================== */


/* ---------- Tablet polish ---------- */
@media(max-width:1024px){
  .service-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .results-grid{grid-template-columns:repeat(2,1fr);}
}

/* ====================================================================
   MAIN MOBILE SWITCH  (<= 920px)
   ==================================================================== */
@media(max-width:920px){

  /* ----- floating whatsapp ----- */
  .wa-float{width:50px;height:50px;right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
  .wa-float svg{width:24px;height:24px;}

  /* ----- compact section rhythm ----- */
  .problem,.journey,.concierge,.dashboard-section,.services,.clients,.results{
    padding-top:56px;padding-bottom:56px;
  }
  .problem{padding-bottom:64px;}
  .why{padding:56px 0;border-radius:28px;}
  .why-band{padding-bottom:64px;}
  .final-cta{padding:56px 22px;border-radius:28px;}
  .cta-band{padding-bottom:64px;}
  footer{margin-top:64px;padding-top:56px;}

  /* ===== HEADER → hamburger ===== */
  nav.main-nav{display:none;}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;border:none;background:transparent;cursor:pointer;padding:0 8px;
  }
  .nav-toggle span{display:block;height:2.5px;width:24px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .2s;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  /* drawer */
  .mobile-nav{
    display:flex;flex-direction:column;position:fixed;top:0;right:0;
    height:100dvh;width:min(86vw,360px);background:#fff;z-index:300;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px -20px rgba(2,15,77,.3);overflow-y:auto;
  }
  body.nav-open .mobile-nav{transform:translateX(0);}
  .nav-overlay{
    display:block;position:fixed;inset:0;background:rgba(2,15,77,.45);
    z-index:250;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  }
  body.nav-open .nav-overlay{opacity:1;visibility:visible;}

  .mnav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--gray);position:sticky;top:0;background:#fff;z-index:2;}
  .mnav-head img{height:30px;width:auto;}
  .mnav-close{background:transparent;border:none;cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--navy);}
  .mnav-close svg{width:22px;height:22px;}
  .mnav-body{padding:8px 12px 24px;display:flex;flex-direction:column;}

  details.mnav-group{border-bottom:1px solid var(--gray);}
  details.mnav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 10px;font-size:15px;font-weight:700;color:var(--navy);}
  details.mnav-group>summary::-webkit-details-marker{display:none;}
  details.mnav-group>summary .chev{width:18px;height:18px;color:var(--muted);transition:transform .25s;flex-shrink:0;}
  details.mnav-group[open]>summary .chev{transform:rotate(180deg);}
  .mnav-sub{padding:0 8px 12px;display:flex;flex-direction:column;gap:2px;}
  .mnav-note{padding:0 12px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-light);line-height:1.35;}
  .mnav-sub a{padding:10px 12px;font-size:13.5px;color:var(--muted);border-radius:8px;font-weight:600;}
  .mnav-sub a:active,.mnav-sub a:hover{background:var(--bg);color:var(--navy);}
  .mnav-link{padding:15px 10px;font-size:15px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gray);}
  .mnav-cta{margin:20px 6px 4px;background:var(--grad);color:#fff;text-align:center;padding:15px;border-radius:100px;font-weight:700;font-size:15px;box-shadow:0 10px 26px -10px rgba(14,99,255,.5);}

  /* ===== HERO ===== */
  /* phone + floating blocks go ON TOP, text below */
  .hero{padding:36px 0 44px;}
  .hero-grid{display:flex;flex-direction:column;gap:30px;}
  .hero-grid>div:first-child{order:2;text-align:center;}
  .hero-visual{order:1;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-ctas{justify-content:center;flex-wrap:nowrap;gap:10px;margin-bottom:22px;}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{flex:1;padding:14px 14px;font-size:14px;}
  /* feature pills → 2 x 2 grid on mobile */
  .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow:visible;}
  .hero-pill{flex-direction:column;gap:6px;width:100%;justify-content:center;text-align:center;border-radius:14px;padding:13px 8px;font-size:11.5px;line-height:1.3;}
  .hero-pill .ico{width:16px;height:16px;}

  /* phone + floating stat blocks — bounded so the phone is large and the
     3 blocks sit in the side gutters, overlapping the phone by only ~10% */
  .hero-visual{position:relative;width:360px;max-width:96vw;margin:0 auto;padding:16px 0;min-height:auto;}
  .phone-shell{width:210px;}
  .phone-screen-wrap{height:414px;}
  /* .float-pills keeps display:contents from style.css so blocks float absolutely */
  .float-pill{padding:7px 10px;border-radius:11px;gap:6px;}
  .float-pill .fp-label{display:none;}          /* compact corner badge: icon + number only */
  .float-pill .fp-icon{width:24px;height:24px;}
  .float-pill .fp-icon svg{width:13px;height:13px;}
  .float-pill .fp-num{font-size:13px;}
  /* 3 blocks: top-left, top-right, bottom-left (mirrors desktop) */
  .fp-1{top:7%;bottom:auto;left:0;right:auto;}
  .fp-2{top:7%;bottom:auto;right:0;left:auto;}
  .fp-3{bottom:7%;top:auto;left:0;right:auto;}

  /* ===== PROBLEM ===== */
  .problem-grid{grid-template-columns:1fr;gap:14px;}
  .problem-card{padding:24px 22px;}
  .problem-card .stat{font-size:32px;margin-bottom:8px;}

  /* ===== JOURNEY → swipeable carousel ===== */
  .journey-flow{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:14px;padding:6px 4px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .journey-flow::-webkit-scrollbar{display:none;}
  .journey-flow::before{display:none;}
  .jf-step{flex:0 0 80%;scroll-snap-align:center;padding:0;}
  .jf-num{width:40px;height:40px;font-size:14px;margin-bottom:12px;}
  .jf-card{padding:18px 16px;}
  .jf-card h3{font-size:14.5px;}
  .jf-card p{font-size:12px;}
  .journey-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
  .journey-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--gray);padding:0;cursor:pointer;transition:width .25s,background .25s,border-radius .25s;}
  .journey-dots button.active{background:var(--blue);width:22px;border-radius:5px;}

  /* result strip → stacked + wrapping */
  .journey-result{flex-direction:column;text-align:center;padding:24px 20px;gap:18px;}
  .jr-text{font-size:15px;max-width:100%;}
  .jr-stats{gap:14px;width:100%;justify-content:space-around;}
  .jr-stat .jrs-num{font-size:23px;}
  .jr-stat .jrs-label{font-size:10.5px;}

  /* ===== CONCIERGE ===== */
  .flow-steps{grid-template-columns:1fr 1fr;gap:14px;}
  .flow-step{padding:22px 18px;}

  /* ===== DASHBOARD → inside a phone ===== */
  .dash-frame{display:none;}
  .dash-mobile{display:flex;justify-content:center;}
  .dash-phone{
    width:312px;max-width:90vw;position:relative;
    background:linear-gradient(160deg,#2c2c2c 0%,#111 100%);
    border-radius:44px;padding:6px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 0 0 1.5px #111,0 40px 80px -24px rgba(2,15,77,0.45);
  }
  .dash-phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:64px;height:19px;background:#111;border-radius:11px;z-index:4;}
  .dash-screen{background:#fff;border-radius:39px;overflow:hidden;height:600px;display:flex;flex-direction:column;}
  .dms-statusbar{height:42px;background:var(--navy);display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px 6px;font-size:9.5px;color:#fff;font-weight:700;}
  .dms-sb-icons{display:flex;gap:5px;align-items:center;}
  .dms-appbar{background:var(--navy);padding:6px 16px 14px;display:flex;align-items:center;justify-content:space-between;}
  .dms-brand{display:flex;align-items:center;gap:8px;}
  .dms-brand .mark{width:22px;height:22px;border-radius:6px;background:var(--grad);}
  .dms-brand span:last-child{color:#fff;font-size:13px;font-weight:700;}
  .dms-avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);}
  .dms-body{flex:1;overflow-y:auto;padding:14px;background:var(--bg);display:flex;flex-direction:column;gap:12px;}
  .dms-greeting{font-size:13px;font-weight:700;color:var(--navy);}
  .dms-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .dms-stat{background:#fff;border:1px solid var(--gray);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:3px;}
  .dms-stat .dms-sl{font-size:10.5px;color:var(--muted);font-weight:600;}
  .dms-stat .dms-sv{font-size:18px;font-weight:800;color:var(--navy);}
  .dms-stat .dms-sv.up{color:#16A34A;}
  .dms-stat .dms-st{font-size:9.5px;color:#16A34A;font-weight:600;}
  .dms-card{background:#fff;border:1px solid var(--gray);border-radius:12px;padding:14px;}
  .dms-card-label{font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:12px;}
  .dms-brow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--gray);}
  .dms-brow:first-of-type{border-top:none;}
  .dms-brow .gname{font-size:12px;font-weight:700;color:var(--navy);display:block;}
  .dms-brow .gmeta{font-size:10px;color:var(--muted);}
  .dms-tabbar{display:flex;background:#fff;border-top:1px solid var(--gray);padding:8px 4px;}
  .dms-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;font-weight:600;color:var(--muted-light);}
  .dms-tab svg{width:18px;height:18px;}
  .dms-tab.active{color:var(--blue);}

  /* ===== WHY ===== */
  .why-grid{grid-template-columns:1fr;gap:32px;}
  .why-content h2{font-size:clamp(21px,5vw,28px);}
  .compare-row>div{padding:11px 12px;font-size:11.5px;}
  .compare-row.head>div{font-size:10.5px;}

  /* ===== CLIENTS (carousel) ===== */
  .clients-track .client-card{flex:0 0 230px;padding:20px 18px;}
  .client-logo-ph{width:44px;height:44px;font-size:15px;flex-shrink:0;}
  .client-card h5{font-size:14px;}

  /* ===== PARTNERS / OTA carousel ===== */
  .partners{padding:52px 0;}
  .partner-logo{width:140px;height:68px;padding:12px 16px;}

  /* ===== RESULTS ===== */
  .results-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;}
  .result-stat{padding:26px 16px;}
  .result-stat .num{font-size:32px;}

  /* ===== FOOTER ===== */
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 24px;margin-bottom:40px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ====================================================================
   SMALL PHONES  (<= 640px)
   ==================================================================== */
@media(max-width:640px){
  .flow-steps{grid-template-columns:1fr;}
  .jf-step{flex:0 0 84%;}
  .services-head h2,.problem-head h2,.journey-head h2,.concierge-head h2,.dash-head h2{font-size:clamp(22px,6vw,28px);}
  .service-grid{grid-template-columns:1fr;}
  .dash-screen{height:560px;}
}

/* ====================================================================
   EXTRA SMALL  (<= 540px)
   ==================================================================== */
@media(max-width:540px){
  .results-grid{grid-template-columns:1fr 1fr;}
  .jr-stats{gap:10px;}
  .jr-stat .jrs-num{font-size:21px;}
  .hero h1{font-size:clamp(30px,9vw,40px);}
}

/* ====================================================================
   TINY  (<= 400px)
   ==================================================================== */
@media(max-width:400px){
  .logo img{height:30px;}
  .phone-shell{width:198px;}
  .phone-screen-wrap{height:392px;}
  .dash-phone{width:280px;}
  .hero-pill{font-size:11.5px;padding:7px 12px;}
  .jf-step{flex:0 0 88%;}
}