/* /pachmarhi/ on phones (owner, 14 Oct 2026: "improve its mobile design").
   Loaded after pachmarhi.css. Phone-only rules, nothing changes from 900px up.
   Kept in its own file so a new zip from the owner (which regenerates pachmarhi.css) does not wipe it. */

/* elements added by site-mobile.js: shown on phones only */
.pjr .map-hint, .pjr .road-progress { display: none; }
.pjr .hero-cover.map-cover { cursor: zoom-in; }
@media (max-width: 560px) { .pjr .hero-cover.map-cover { cursor: default; } }

/* 1. the illustrated map: on a phone the whole map is 366px wide and its 18 labels unreadable. Show it at 380px tall,
      let the visitor swipe sideways across it, and open it full size on tap. */
@media (max-width: 899px) {
  .pjr .hero { position: relative; }
  .pjr .hero-start-line { font-size: 13px; line-height: 1.5; }
}
/* phones (14 Oct, late): a portrait version of the map fills the width, so no sideways swipe is needed; tap opens it full size */
@media (max-width: 560px) {
  .pjr .hero-cover.map-cover { aspect-ratio: 941/1672; height: auto; }
  .pjr .hero-cover.map-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* the full-size map in the photo viewer: as tall as the screen allows, pan sideways (pinch to zoom works as well) */
.pjr dialog.map-viewer { padding: 10px; max-width: 98vw; width: 98vw; overflow: auto; }
.pjr dialog.map-viewer img { height: min(82vh, 1672px); width: auto; max-width: none; max-height: none; }
@media (max-width: 560px) { .pjr dialog.map-viewer img { height: auto; width: 100%; max-width: 100%; } }
.pjr dialog.map-viewer p { font-size: 11px; margin-top: 8px; }

/* 2. the section chips: one swipeable row instead of two wrapped lines, and it sticks under the site header
      so a visitor can jump between sections anywhere on this long page */
@media (max-width: 899px) {
  .pjr .journey-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 8px; padding: 12px 4px; margin: 6px -4px 0; position: sticky; top: var(--site-header, 64px); z-index: 20; background: linear-gradient(var(--bg) 0, var(--bg) 100%); scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  .pjr .journey-nav::-webkit-scrollbar { display: none; }
  .pjr .journey-nav a { flex: 0 0 auto; scroll-snap-align: start; font-size: 12px !important; padding: 9px 14px; background: var(--surface); white-space: nowrap; }
  .pjr .journey-nav a.is-here { background: var(--forest); color: #fff; border-color: var(--forest); }
}

/* 3 + 4. (14 Oct, evening) the owner's updated page now lays phones out itself: a winding centre road with narrow boxes
      alternating left and right. Its own spacing and type sizes are kept; only the smallest labels get a readable floor. */
@media (max-width: 560px) {
  .pjr dt { font-size: 9px; }
  .pjr dl { font-size: 11.5px; }
  .pjr .in > .eyebrow { font-size: 9px !important; }
  .pjr .in > .km, .pjr .km { font-size: 10px; }
  .pjr .stop p { font-size: 13px; }
  .pjr .wild p { font-size: 12px; }
}

/* 5. the page's own two controls (sound, wildlife) as small round icon buttons on the left, above the site's call button;
      the site's WhatsApp and back-to-top stay on the right, so nothing overlaps the card text any more */
@media (max-width: 899px) {
  .pjr #snd, .pjr #motion-toggle { right: auto !important; left: 12px !important; width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important; justify-content: center; font-size: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.2); opacity: .94; }
  .pjr #snd { bottom: calc(env(safe-area-inset-bottom, 0px) + 106px) !important; }
  .pjr #motion-toggle { bottom: calc(env(safe-area-inset-bottom, 0px) + 156px) !important; display: flex; align-items: center; justify-content: center; }
  .pjr #snd span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pjr #snd svg { width: 20px; height: 20px; }
  .pjr #motion-toggle::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 5h3v14H7zM14 5h3v14h-3z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 5h3v14H7zM14 5h3v14h-3z'/></svg>") center/contain no-repeat; }
  .pjr #motion-toggle[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>"); }
  /* the "you did not stop" toast sits above the controls */
  .pjr .brake { bottom: calc(env(safe-area-inset-bottom, 0px) + 210px) !important; }
}

/* 6. a thin progress line at the top of the page on phones: how far along the 52 km road the gypsy is */
@media (max-width: 899px) {
  .pjr .road-progress { display: block; position: fixed; left: 0; right: 0; top: var(--site-header, 64px); height: 3px; z-index: 21; background: rgba(0,0,0,.06); pointer-events: none; }
  .pjr .road-progress i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #2f6b48, #f2b705); transition: width .15s linear; }
}