/* =============================================================
   Wimup — shared MOBILE stylesheet
   Loaded last on every page; reflows the desktop layouts to a
   single mobile-first column, adds room for the bottom tab bar,
   and powers the hamburger menu + tab bar chrome (mobile-nav.js).
   Same DOM, same URLs → SEO/GEO friendly. Breakpoint: 768px.
   ============================================================= */

/* ---- chrome that is ALWAYS present (any width) ---- */
.m-burger,.m-tabbar,.m-menu,.m-topicons{display:none}

@media (max-width:768px){

  /* ====== global frame ====== */
  .wrap{padding-left:16px !important;padding-right:16px !important}
  body{padding-bottom:64px}              /* clear the fixed tab bar */
  html{-webkit-text-size-adjust:100%}

  /* hide the dense desktop utility strip; its links live in the menu */
  .util{display:none !important}

  /* ====== header → logo + icons + burger ====== */
  header.site .wrap{height:58px;gap:10px}
  header.site .nav,
  header.site .hsearch,
  header.site .cta,
  header.site .spacer{display:none !important}
  .wm-acts{display:none !important}      /* injected desktop icons */
  .logo{height:30px}
  .m-topicons{display:flex;align-items:center;gap:6px;margin-left:auto}
  .m-iconbtn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;
    display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;position:relative;text-decoration:none}
  .m-iconbtn:active{background:var(--bg-2)}
  .m-iconbtn svg{width:19px;height:19px}
  .m-iconbtn .b{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:999px;background:var(--red);
    color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--sans)}
  .m-burger{display:flex}

  /* ====== type scale-down ====== */
  .hero h1,.chero h1,.ahero h1,.thero h1,.phero h1,.dhero h1,.whero h1,.nhero h1,.ihero h1{font-size:38px !important;line-height:1.05 !important}
  .hero .lede,.chero .lede{font-size:16.5px !important}
  .sec{padding:40px 0}
  .sec-head{flex-wrap:wrap;margin-bottom:20px}
  .sec-head h2{font-size:26px}
  .news h2{font-size:28px}

  /* ====== collapse every shared multi-column grid ====== */
  .hero .wrap,.chero .wrap,.news .wrap,.plan,.vlayout,.vbk,.promise,
  .factsheet,.events,.fld.two,.cgrid,.split,.browse .split{grid-template-columns:1fr !important}

  .grid4,.grid3,.qa-grid,.themes,.tgrid,.tgrid.soon,.steps,.principles,
  .vstrip,.nearby,.boards,.fs-grid,.dishes,.transport,.events{grid-template-columns:1fr !important}

  /* two-up where single would waste space (small tiles) */
  .statband .wrap,.facts .wrap{grid-template-columns:1fr 1fr !important}

  /* hero search + chips */
  .hero{padding-bottom:8px}
  .searchbar{flex-wrap:wrap;padding:8px}
  .searchbar input{min-width:0;flex:1 1 120px;padding:8px 4px}
  .searchbar .go{flex:1 0 100%;margin-top:6px}
  .chips{margin-top:12px}
  .hstats{gap:22px !important;flex-wrap:wrap}

  /* hero map card — keep but shorter */
  .mapwrap .mapsurface,.mapsurface{height:300px}

  /* video band rail under feature */
  .vfeature .player{height:230px !important}

  /* content + sidebar articles (city guides, place, guides) */
  .layout,.player-layout,.acct{grid-template-columns:1fr !important;gap:28px !important}
  .aside,.anav,.side{position:static !important}
  .aside{flex-direction:column !important}

  /* sticky right-rail booking card stays inline */
  .bookcard{position:static !important}

  /* ====== footer ====== */
  .foot-top{grid-template-columns:1fr 1fr !important;gap:22px 18px}
  .foot-brand{grid-column:1 / -1}
  .foot-bot{flex-direction:column;gap:12px;align-items:flex-start}

  /* horizontal-scroll chip rows shouldn't overflow the viewport */
  .echips,.chips{overflow-x:auto}

  /* ====== FULL-SCREEN slide-in MENU (built by mobile-nav.js) ====== */
  .m-menu{display:block;position:fixed;inset:0;z-index:300;visibility:hidden}
  .m-menu.open{visibility:visible}
  .m-menu .scrim{position:absolute;inset:0;background:rgba(10,28,37,.4);opacity:0;transition:opacity .2s}
  .m-menu.open .scrim{opacity:1}
  .m-menu .panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;
    display:flex;flex-direction:column;transform:translateX(102%);transition:transform .24s ease;box-shadow:-18px 0 50px rgba(10,28,37,.25)}
  .m-menu.open .panel{transform:none}
  .m-menu .mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
  .m-menu .mhead .logo{height:28px}
  .m-menu .mx{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;font-size:22px;
    line-height:1;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .m-menu .mbody{flex:1;overflow-y:auto;padding:14px 16px 28px;-webkit-overflow-scrolling:touch}
  .m-menu .msearch{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--bg-2);
    border-radius:12px;padding:12px 14px;margin-bottom:18px;color:var(--ink-soft)}
  .m-menu .msearch svg{width:18px;height:18px;flex:none}
  .m-menu .msearch span{font-size:15px}
  .m-menu .mgrp{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:18px 2px 6px}
  .m-menu .mlink{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;font-size:17px;
    font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
  .m-menu .mlink .car{color:var(--ink-soft);font-size:13px}
  .m-menu .msub{display:flex;flex-wrap:wrap;gap:8px;padding:12px 2px 2px}
  .m-menu .msub a{font-size:13.5px;font-weight:600;color:var(--ink-soft);background:var(--bg-2);
    border:1px solid var(--line);padding:8px 13px;border-radius:999px}
  .m-menu .mcta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
  .m-menu .mcta .btn{padding:15px}
  .m-menu .mcta .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .m-menu .mutil{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
  .m-menu .mutil a{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

  /* ====== STICKY BOTTOM TAB BAR ====== */
  .m-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .m-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 0 8px;color:var(--ink-soft);font-size:10px;font-weight:600;min-height:56px;text-decoration:none}
  .m-tabbar a svg{width:22px;height:22px}
  .m-tabbar a.on{color:var(--navy)}
  .m-tabbar a .tdot{position:absolute;top:8px;margin-left:16px;min-width:15px;height:15px;border-radius:999px;
    background:var(--red);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}

  /* keep the search drawer (nav-enhance.js) usable on phones */
  .wm-sd-in{padding:0 16px !important}
}

/* ===== APP-SHELL pages (Map Explore): the fixed flex shell needs
   its own handling because body{overflow:hidden}. Map on top,
   results list below, both inside the locked viewport. ===== */
@media (max-width:768px){
  body.m-appshell{padding-bottom:0}
  .explore{flex-direction:column !important}
  .explore .emap{height:42vh;flex:none !important;order:-1}
  .explore .epanel{width:100% !important;flex:1 1 auto !important;border-right:0;border-top:1px solid var(--line)}
  .explore .epanel .ehead{padding:14px 16px 12px}
  .explore .echips,.explore .ecount{padding-left:16px;padding-right:16px}
  .explore .elist{padding:0 10px 84px}     /* clear tab bar */
  .etopbar{left:12px;right:12px;top:12px}
  .etopbar .legend{display:none}
  .m-tabbar{box-shadow:0 -2px 16px rgba(10,28,37,.08)}
}