/* ============================================================
   MOBILE APP SHELL — native-app feel for the public site on phones.
   Structure:
     1. GLOBAL foundations — every public page, <=768px
     2. HOME — swipeable curated rails
   All rules are guarded to <=768px so desktop is never affected.
   ============================================================ */

@media (max-width: 768px) {

  /* ========================================================
     1 · GLOBAL APP FOUNDATIONS
     ======================================================== */

  /* Kill the blue tap flash; enable smooth in-page scrolling */
  html { scroll-behavior: smooth; }
  body, body * { -webkit-tap-highlight-color: transparent; }

  /* Momentum + no scrollbar on any horizontal scroller */
  [class*="scroll"], [class*="carousel"], [class*="-rail"],
  .qv-tabs, .td-section-nav, .itin-timeline {
    -webkit-overflow-scrolling: touch;
  }

  /* Press feedback — transform only, so it can't break layout even if broad */
  a, button, [role="button"], .btn, .w-btn,
  [class*="-card"], .dep-chip, .qv-tab, .chip {
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
  }
  .btn:active, .w-btn:active, button:active, [role="button"]:active,
  .pkg-card:active, .tour-card:active, .trip-card:active, .hotel-card:active,
  .hp-card:active, .hp-tour-card:active, .hp-dest-card:active, .hp-blog-card:active,
  .fresh-trip-card:active, .act-card:active, .dest-card:active {
    transform: scale(.975);
  }

  /* Compact frosted top app-bar (all pages) */
  .hdr {
    height: 56px !important;
    background: color-mix(in srgb, var(--paper, #F9F5EC) 84%, transparent) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.05) !important;
    box-shadow: none !important;
    transition: box-shadow .25s ease, background .25s ease;
  }
  .hdr.is-scrolled {
    box-shadow: 0 6px 20px rgba(27,41,33,.08) !important;
    background: color-mix(in srgb, var(--paper, #F9F5EC) 94%, transparent) !important;
  }
  .hdr-inner { padding: 0 16px !important; }
  .hdr-logo-img { height: 30px !important; }
  .hdr-icon-btn, .hdr-burger {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.04) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: none !important;
  }

  /* Honour the notch / home-indicator on the floating tab bar */
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom) !important; }

  /* ---- Perfect-fit net: nothing may push past the viewport ---- */
  body { overflow-x: clip; }                 /* clip (not hidden) keeps position:sticky working */
  img, video, iframe, canvas { max-width: 100%; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { max-width: 100%; overflow-x: auto; }

  /* ---- Subtle native page-enter fade (opacity only, transform-free
          so it never breaks fixed/sticky children) ---- */
  @media (prefers-reduced-motion: no-preference) {
    main.site-main { animation: appPageIn .30s ease both; }
    @keyframes appPageIn { from { opacity: 0; } to { opacity: 1; } }
  }

  /* Consistent card corners across the product surfaces */
  .pkg-card, .tour-card, .trip-card, .hotel-card, .act-card,
  .hp-card, .hp-tour-card, .fresh-trip-card, .hp-blog-card, .dest-card {
    border-radius: 18px !important;
  }

  /* Reduced-motion: drop the press-scale + smooth scroll */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    a, button, [role="button"], [class*="-card"], .btn, .w-btn { transition: none !important; }
    .btn:active, button:active, [class*="-card"]:active { transform: none !important; }
  }

  /* ========================================================
     2 · HOME — swipeable curated rails
     Scoped high enough to beat home.css's grid rules.
     ======================================================== */

  body.page-home [data-page="home"] .hp-panel-title,
  body.page-home [data-page="home"] .hp-fw-title {
    font-size: clamp(23px, 6.4vw, 28px) !important;
    line-height: 1.14 !important;
    text-wrap: balance;
  }

  /* the 2-row grids otherwise collapse to one column and stack every
     card vertically (4000px+); turn each into an edge-to-edge rail */
  body.page-home [data-page="home"] .hp-2row-grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 14px !important;
    margin: 0 -16px !important;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  body.page-home [data-page="home"] .hp-2row-grid::-webkit-scrollbar { display: none; }
  body.page-home [data-page="home"] .hp-2row-grid > * {
    flex: 0 0 78% !important;
    max-width: 300px;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* already-flex rails: unify snap + hide scrollbar */
  body.page-home [data-page="home"] .hp-dest-scroll,
  body.page-home [data-page="home"] .hp-blogs-grid.side-scroll,
  body.page-home [data-page="home"] .hp-rev-grid {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-home [data-page="home"] .hp-dest-scroll::-webkit-scrollbar,
  body.page-home [data-page="home"] .hp-blogs-grid.side-scroll::-webkit-scrollbar,
  body.page-home [data-page="home"] .hp-rev-grid::-webkit-scrollbar { display: none; }
}