/* =============================================================================
   Mobile refinements — loaded last so it can raise tap targets and smooth out
   touch behaviour without forking each product stylesheet.

   Everything here was driven by measuring the real rendered pages at 375px:
   no page scrolls horizontally, but a set of controls were well under the 44px
   touch target guideline and the form fields were small enough to trigger iOS's
   zoom-on-focus.
   ============================================================================= */

@media (max-width: 767.98px) {

  /* ---- iOS zooms the whole page when a focused field is under 16px. Holding
       inputs at 16px is the single change that makes form entry feel native
       rather than jumping the viewport on every tap. ---- */
  input,
  select,
  textarea,
  .field-select,
  .field-value-btn,
  .visa-form-field input,
  .visa-form-field select,
  .visa-form-field textarea {
    font-size: 16px;
  }

  /* ---- Header: the topbar email/phone labels are hidden below 576px, which
       left the two most important contact actions as bare 14px icons. Give the
       links a real hit area without changing how they look. ---- */
  .topbar-link {
    min-width: 44px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
  }

  .navbar-toggler.custom-toggler {
    width: 44px;
    height: 44px;
  }

  /* ---- Search-card fields: 20px tall rows are hard to hit accurately. ---- */
  .field-box {
    padding: 0.6rem 0.8rem 0.65rem;
  }

  /* The clickable element is the control itself, not the padded .field-box around
     it, so the control has to carry the height. */
  .field-value-btn,
  .field-select {
    min-height: 34px;
  }

  .swap-btn {
    width: 44px;
    height: 44px;
  }

  .product-tab {
    min-height: 42px;
  }

  /* ---- Listing controls ---- */
  .lst-stab,
  .hotel-stab {
    min-height: 40px;
  }

  .lst-hero-back,
  .section-view-all {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .dest-theme-pill,
  .svc-chip {
    min-height: 40px;
  }

  /* ---- Detail-page CTAs ---- */
  .vd-type-cta,
  .cd-cabin-select,
  .sd-sidebar-btn,
  .td-sidebar-btn,
  .vd-sidebar-btn,
  .cd-sidebar-btn,
  .hres-btn {
    min-height: 44px;
  }

  .acc-toggle-pw {
    width: 40px;
    height: 40px;
  }

  /* ---- Footer: column links were 16px tall with no vertical padding, so
       neighbouring links were almost impossible to hit apart. ---- */
  .footer-col ul a,
  .footer-legal-links a {
    display: inline-block;
    padding: 0.55rem 0;
    min-height: 24px;
  }

  .social-btn {
    width: 42px;
    height: 42px;
  }

  /* ---- Touch feel ----
       Removing the grey flash and replacing it with an explicit pressed state is
       what separates "a website on a phone" from something that feels like an
       app: feedback is immediate and matches the element being pressed. ---- */
  a,
  button,
  .lst-card,
  .hres-card,
  .route-card,
  .offer-card,
  .why-us-card {
    -webkit-tap-highlight-color: transparent;
  }

  .lst-card:active,
  .hres-card:active,
  .route-card:active,
  .offer-card:active,
  .why-us-card:active,
  .dest-guide-card:active {
    transform: scale(0.985);
    transition: transform 0.08s ease;
  }

  .search-btn:active,
  .hres-btn:active,
  .vd-type-cta:active,
  .sd-sidebar-btn:active,
  .td-sidebar-btn:active {
    transform: scale(0.97);
  }

  /* Horizontal card rails: momentum scrolling and snap, so they behave like a
     native carousel rather than a stiff overflow box. */
  .routes-track,
  .lst-sorttabs,
  .hotel-sorttabs,
  .dest-theme-card,
  .vd-subnav,
  .td-subnav,
  .sd-subnav,
  .cd-subnav {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .routes-track > * {
    scroll-snap-align: start;
  }

  /* Stops a scroll gesture inside a rail or panel from chaining to the page
     behind it once it hits the end. */
  .routes-track,
  .rooms-container,
  .popover-panel,
  .visa-country-list {
    overscroll-behavior: contain;
  }
}

/* Anchor jumps land under the sticky sub-navs rather than behind them, and
   in-page navigation eases instead of snapping. Kept outside the media query so
   the behaviour is consistent on desktop too. */
html {
  scroll-behavior: smooth;
}

:target,
[id] {
  scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lst-card:active,
  .hres-card:active,
  .route-card:active,
  .offer-card:active,
  .why-us-card:active,
  .dest-guide-card:active,
  .search-btn:active,
  .hres-btn:active {
    transform: none;
  }
}

/* =============================================================================
   Below-the-fold rendering cost

   Every page loads the full stylesheet set, so style and layout have to be
   resolved for each of the 800–1600 elements a product landing page renders.
   Measured on a throttled phone that was 320–410 ms of blocking work, almost
   all of it for sections nobody has scrolled to yet.

   content-visibility:auto lets the browser skip style, layout and paint for a
   section while it is off screen, and do the work only as it approaches the
   viewport. The hero itself is excluded: it is what the visitor sees at load,
   so there is nothing to skip there. The sections below it are listed even
   though the first one starts near the fold — the browser still renders
   whatever is actually on screen, so the only effect is on the part that is
   scrolled past the bottom.

   contain-intrinsic-size carries a placeholder height so the scrollbar does not
   jump; the `auto` keyword tells the browser to remember each section's real
   height once measured, so the estimate stops mattering after first render.
   ============================================================================= */
@media (max-width: 767.98px) {
  .routes-section,
  .offers-section,
  .why-us-section,
  .visa-process-section,
  .visa-consultation-section,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}