/* /pachmarhi/ travel-guide layer (15 Oct 2026): photo hero with the H1, answer-first intro, numbered list of the 18 places,
   and the guide sections after the road (best time, how to reach, gypsy, days, nearby, FAQ, call to action).
   Loaded after pachmarhi.css and site-mobile.css. Kept apart from the owner's zip css so a new zip does not wipe it. */

/* ---------- hero: photo with the headline on it ---------- */
.pjr .pg-hero { position: relative; margin: 0 0 8px; border-radius: 18px; overflow: hidden; background: #1b2b22; color: #fff; isolation: isolate; }
.pjr .pg-hero picture, .pjr .pg-hero img { display: block; width: 100%; height: 100%; }
.pjr .pg-hero img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 50%; }
.pjr .pg-hero-text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 52px 44px; max-width: 760px;
  background: linear-gradient(90deg, rgba(14,24,18,.86) 0%, rgba(14,24,18,.62) 48%, rgba(14,24,18,0) 100%); }
.pjr .pg-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(14,24,18,.55) 0%, rgba(14,24,18,0) 45%); pointer-events: none; }
.pjr .pg-kicker { font: 600 12px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #f2c96b; margin: 0 0 14px; }
.pjr .pg-hero h1 { font-family: var(--display); font-weight: 700 !important; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; margin: 0; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.pjr .pg-hero h1 span { display: block; font-size: .5em; font-weight: 500; color: #e9e2cd; margin-top: 10px; letter-spacing: .01em; }
.pjr .pg-sub { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #eef0ea; max-width: 54ch; }
.pjr .pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pjr .pg-chips li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 12px; font: 600 13px/1 var(--body); backdrop-filter: blur(3px); }
.pjr .pg-byline { margin: 16px 0 0; font-size: 13px; color: #d9dccf; }
.pjr .pg-byline time { color: #fff; font-weight: 600; }
.pjr .pg-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pjr .pg-btn { display: inline-flex; align-items: center; gap: 8px; background: #f2b705; color: #18221d !important; text-decoration: none; font: 700 14px/1 var(--body); font-weight: 700 !important; padding: 14px 22px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.pjr .pg-btn:hover { filter: brightness(.95); }
.pjr .pg-btn--ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.55); box-shadow: none; }
@media (max-width: 899px) {
  .pjr .pg-hero { border-radius: 16px; }
  .pjr .pg-hero::after { display: none; }
  .pjr .pg-hero-text { position: relative; inset: auto; max-width: none; padding: 22px 20px 24px; background: #193b29; }
  .pjr .pg-hero h1 { font-size: 30px; }
  .pjr .pg-sub { font-size: 15px; }
  .pjr .pg-kicker { font-size: 11px; margin-bottom: 10px; }
}

/* ---------- answer-first intro + numbered list ---------- */
.pjr .pg-intro { max-width: 820px; margin: 34px auto 0; }
.pjr .pg-intro > p { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.pjr .pg-intro a, .pjr .pg-sec a:not(.pg-btn) { color: var(--forest); font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
.pjr .pg-list-h { font-family: var(--display); font-size: 26px; margin: 26px 0 12px; }
.pjr .pg-places { list-style: none; counter-reset: pl; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.pjr .pg-places li { counter-increment: pl; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.pjr .pg-places li::before { content: counter(pl); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #8e2b1b; color: #fff; font: 700 14px/1 var(--display); }
.pjr .pg-places a { color: var(--ink); font-weight: 700 !important; text-decoration: none; }
.pjr .pg-places a:hover { color: var(--forest); text-decoration: underline; }
.pjr .pg-places small { display: block; color: var(--mute); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.pjr .pg-places .d { color: var(--forest); font-weight: 600; }
/* the tourist places map: a compact card, not a full-width block */
.pjr .pg-mapwrap { max-width: 960px; margin: 34px auto 0; padding: 18px 18px 14px; background: #fff; border: 1px solid rgba(23,51,36,.12); border-radius: 20px; box-shadow: 0 10px 30px rgba(23,51,36,.08); }
.pjr .pg-map-h { font: 700 24px/1.2 var(--display); color: var(--ink); margin: 2px 4px 14px; font-weight: 700 !important; }
.pjr .pg-mapwrap .hero-cover.map-cover { border-radius: 12px; overflow: hidden; background: #f4f1e6; }
.pjr .pg-mapwrap .hero-cover.map-cover img { object-fit: contain; }
.pjr .pg-map-cap { text-align: center; font-size: 13px; line-height: 1.5; color: var(--mute); margin: 10px 4px 0; }
@media (max-width: 560px) {
  .pjr .pg-mapwrap { padding: 12px 10px 10px; border-radius: 16px; margin-top: 26px; }
  .pjr .pg-map-h { font-size: 21px; margin: 2px 4px 10px; }
  .pjr .pg-mapwrap .hero-cover.map-cover { aspect-ratio: 1092/1440; }
}
@media (max-width: 700px) {
  .pjr .pg-places { grid-template-columns: 1fr; }
  .pjr .pg-intro > p { font-size: 16px; }
  .pjr .pg-list-h { font-size: 22px; }
}

/* ---------- headings inside the road: groups are H2, places are H3 ---------- */
.pjr .stop.group h2 { font-size: 30px; font-weight: 700 !important; margin-top: 4px; }
.pjr .stop.card h3 { font-size: 26px; font-weight: 700 !important; margin-top: 8px; font-family: var(--display); line-height: 1.12; }
.pjr .stop.card h3 .aka { display: block; font-size: 14px; font-weight: 600; color: var(--mute); letter-spacing: .02em; margin-top: 4px; font-family: var(--body); }
.pjr .stop.note .road-h { font-size: 22px; }
@media (max-width: 899px) {
  .pjr .stop.group h2 { font-size: 22px; }
  .pjr .stop.card h3 { font-size: 21px; }
}
/* former decorative headings, now plain text with the same look */
.pjr .encounter-title { font-family: var(--display); font-size: 32px; line-height: 1.2; margin: 0; }
.pjr .howto-title { font-family: var(--display); font-size: 28px; line-height: 1.15; margin: 6px 0 12px; }
@media (max-width: 560px) { .pjr .encounter-title { font-size: 26px; } .pjr .howto-title { font-size: 23px; } }

/* ---------- guide sections after the road ---------- */
.pjr .pg-guide { max-width: 860px; margin: 40px auto 0; display: grid; gap: 22px; }
.pjr .pg-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px; }
.pjr .pg-sec h2 { font-family: var(--display); font-size: 30px; font-weight: 700 !important; margin: 0 0 10px; }
.pjr .pg-sec h3 { font-family: var(--display); font-size: 21px; font-weight: 700 !important; margin: 20px 0 8px; }
.pjr .pg-sec p { font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; color: var(--ink); }
.pjr .pg-sec ul, .pjr .pg-sec ol { margin: 0 0 12px; padding-left: 20px; font-size: 16px; line-height: 1.6; }
.pjr .pg-sec li { margin: 4px 0; }
.pjr .pg-eyebrow { display: block; font: 600 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; }
.pjr .pg-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 12px; }
.pjr .pg-table th, .pjr .pg-table td { text-align: left; vertical-align: top; padding: 11px 10px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.pjr .pg-table th { font: 700 11px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: #f7f6ef; }
.pjr .pg-table td:first-child { font-weight: 700; white-space: nowrap; color: var(--forest); }
.pjr .pg-tag { display: inline-block; font: 700 11px/1 var(--body); padding: 4px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.pjr .pg-tag.best { background: #e3efd8; color: #2f5a35; }
.pjr .pg-tag.rain { background: #dcecf3; color: #2c5f76; }
.pjr .pg-tag.hot { background: #f7e6cf; color: #7c4b12; }
.pjr .pg-note { background: #f4f1e4; border-left: 4px solid #f2b705; border-radius: 10px; padding: 12px 14px; font-size: 15px !important; }
.pjr .pg-days { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.pjr .pg-day { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fbfaf5; }
.pjr .pg-day h3 { margin-top: 0; }
.pjr .pg-day ol { padding-left: 18px; }
.pjr .pg-near { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pjr .pg-near > div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fbfaf5; }
.pjr .pg-near h3 { margin-top: 0; font-size: 19px; }
.pjr .pg-near p { font-size: 15px; }
.pjr .pg-faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.pjr .pg-faq summary { cursor: pointer; list-style: none; padding: 14px 34px 14px 0; position: relative; font: 700 17px/1.4 var(--body); font-weight: 700 !important; color: var(--ink); }
.pjr .pg-faq summary::-webkit-details-marker { display: none; }
.pjr .pg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 400 26px/1 var(--body); color: var(--forest); }
.pjr .pg-faq details[open] summary::after { content: "\2212"; }
.pjr .pg-faq details p { padding: 0 0 8px; }
@media (max-width: 760px) {
  .pjr .pg-sec { padding: 22px 18px; border-radius: 16px; }
  .pjr .pg-sec h2 { font-size: 24px; }
  .pjr .pg-sec h3 { font-size: 19px; }
  .pjr .pg-sec p, .pjr .pg-sec ul, .pjr .pg-sec ol { font-size: 15px; }
  .pjr .pg-days, .pjr .pg-near { grid-template-columns: 1fr; }
  .pjr .pg-table { font-size: 14px; }
  .pjr .pg-table th, .pjr .pg-table td { padding: 9px 6px; }
  .pjr .pg-table td:first-child { white-space: normal; }
  .pjr .pg-faq summary { font-size: 16px; }
}

/* ---------- closing call to action (replaces the "thank you for taking the service" ending) ---------- */
.pjr .farewell .pg-cta-copy h2 { font-family: var(--display); font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: 6px 0 12px; }
.pjr .farewell .pg-cta-copy p { max-width: 52ch; margin: 0 auto 8px; font-size: 17px; line-height: 1.6; }
.pjr .farewell .pg-cta-row { justify-content: center; }
.pjr .farewell .pg-cta-points { list-style: none; padding: 0; margin: 14px auto 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; }
.pjr .farewell .pg-cta-points li::before { content: "\2713"; color: #f2b705; font-weight: 700; margin-right: 6px; }

/* the road's sound and wildlife buttons only matter on the road: hidden over the hero, intro and guide sections */
.pjr:not(.pg-on-road) #snd, .pjr:not(.pg-on-road) #motion-toggle { opacity: 0; pointer-events: none; }
.pjr #snd, .pjr #motion-toggle { transition: opacity .25s; }
@media (max-width: 560px) { .pjr .pg-kicker { letter-spacing: .1em; font-size: 10.5px; } }

/* ---- 15 Oct 2026: the road scene as a jungle (green forest floor; tree shadows on card photos, drawn in #pg-shade above the cards) ---- */
.pjr #route { background: linear-gradient(180deg, #dce7c3 0, #c6d7a3 1.5%, #c4d6a1 100%); }
/* the forest floor runs to both screen edges (the road box itself keeps its width) */
.pjr #route { box-shadow: 0 0 0 100vmax #c4d6a1; clip-path: inset(0 -100vmax); }
.pjr #map { --contour: #9db47c; }
.pjr #pg-shade { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; }

/* ---- How to Reach table on phones: one card per row, every value labelled (4 columns do not fit 390px) ---- */
@media (max-width: 700px) {
  html body .pjr .pg-table.pg-table--stack { table-layout: auto !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
  html body .pjr .pg-table.pg-table--stack thead { display: none !important; }
  html body .pjr .pg-table.pg-table--stack tbody,
  html body .pjr .pg-table.pg-table--stack tr { display: block !important; width: auto !important; }
  html body .pjr .pg-table.pg-table--stack tr { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-top: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
  html body .pjr .pg-table.pg-table--stack td { display: grid !important; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; width: auto !important; padding: 11px 14px !important; border: 0 !important; border-top: 1px solid var(--line) !important; background: transparent !important; white-space: normal !important; font-size: 15px !important; line-height: 1.55 !important; }
  html body .pjr .pg-table.pg-table--stack td::before { content: attr(data-label); font: 700 11px/1.6 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--forest); }
  html body .pjr .pg-table.pg-table--stack td:first-child { display: block !important; background: var(--forest-deep) !important; color: #fff !important; font: 600 17px/1.3 var(--display) !important; padding: 12px 14px !important; border-top: 0 !important; }
  html body .pjr .pg-table.pg-table--stack td:first-child::before { content: none; }
}