/* ============================================================
   HIPSTER INDIA TOURS — guides.css
   City guide pages (first user: chandigarh-guides.html).
   Split view: a short tour summary on top, the guides library
   below. Scrolling down, the library rises over the tour until it
   is the only thing on screen. Scrolling back up, the tour returns.
   js/guides.js sets --p (0 = split, 1 = library fills the screen).
   ============================================================ */

[hidden]{display:none!important}

/* The site sets overflow-x:hidden on both html and body. On body that
   turns it into a scroll container and stops position:sticky from
   working, which this layout relies on. clip does the same job
   without creating a scroll container. */
body.cg-page{overflow-x:visible;overflow-x:clip}

.cg{--nav-h:66px;--tour-h:clamp(440px,56vh,600px);--p:0;position:relative;padding-top:var(--nav-h)}
.cg-label{font-family:var(--font-label);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dk)}

/* ── Top half: the tour ─────────────────────────────────── */
.cg-tour{position:sticky;top:var(--nav-h);height:var(--tour-h);z-index:1;background:var(--bg);overflow:hidden}
.cg-tour-inner{height:100%;display:flex;flex-direction:column;transform-origin:50% 0;
  transform:translateY(calc(var(--p) * -32px)) scale(calc(1 - var(--p) * .03));
  opacity:calc(1 - var(--p) * .6);will-change:transform,opacity}

.cg-hero{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:22px;padding-bottom:22px}
.cg-hero-text{display:flex;flex-direction:column;gap:12px;min-width:0}
.cg-hero-text .tag{margin-bottom:0}
.cg-tour-title{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08}
.cg-answer{background:#FBF3EC;border:1px solid #EBCDBA;border-radius:12px;padding:14px 18px}
.cg-answer p{font-size:.95rem;line-height:1.6;color:var(--ink);margin-top:4px;max-width:none}
.cg-answer a{color:var(--terra-dk);font-weight:600;text-decoration:underline}
.cg-hero-img{position:relative;align-self:stretch;min-height:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md)}
.cg-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.cg-facts{flex-shrink:0;background:#F7F2EA;border-top:1px solid var(--border)}
.cg-facts .container{padding-top:12px;padding-bottom:14px;display:flex;flex-direction:column;gap:10px}
.cg-facts-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cg-updated{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink2)}
.cg-updated svg{color:var(--terra)}
.cg-updated b{font-weight:600}
.cg-facts-row{display:flex;align-items:center;gap:16px}
.cg-facts-list{flex:1;min-width:0;display:flex}
.cg-fact{flex:1;min-width:0;padding:0 16px;border-left:1px solid var(--border)}
.cg-fact:first-child{padding-left:0;border-left:0}
.cg-fact dt{font-family:var(--font-label);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cg-fact dd{font-family:var(--font-h);font-size:1.02rem;line-height:1.3;color:var(--ink);margin-top:2px}
.cg-price{color:var(--terra)!important}
.cg-price small{font-family:var(--font-b);font-size:.72rem;color:var(--muted)}
.cg-facts-cta{flex-shrink:0}

/* ── Bottom half: the guides sheet ──────────────────────── */
.cg-sheet{position:relative;z-index:2;background:#fff;min-height:calc(100vh - var(--nav-h));padding-bottom:64px;
  border-radius:calc((1 - var(--p)) * 28px) calc((1 - var(--p)) * 28px) 0 0;
  box-shadow:0 -14px 40px rgba(26,20,16,calc(.16 * (1 - var(--p))))}
.cg-grab{display:block;width:44px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto;position:relative;top:10px;opacity:calc(1 - var(--p) * 2)}
.cg-crumbs{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);padding:26px 0 4px}
.cg-crumbs a:hover{color:var(--terra)}
.cg-crumbs [aria-current]{color:var(--ink);font-weight:600}

.cg-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;padding-top:10px}
.cg-rail{position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;scrollbar-width:thin}
.cg-rail-label{font-family:var(--font-label);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cg-rail-gap{margin-top:26px}
.cg-rail-list{border-top:1px solid var(--border)}
.cg-rail-list a,.cg-topic{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);font-family:var(--font-b);font-size:.9rem;font-weight:500;color:var(--ink);text-align:left;cursor:pointer;transition:color .18s}
.cg-rail-list a:hover,.cg-topic:hover{color:var(--terra)}
.cg-topic[aria-pressed="true"]{color:var(--terra);font-weight:700}
.cg-count{color:var(--muted);font-weight:500;font-size:.85rem}

.cg-main h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;margin:8px 0 12px}
.cg-lede{color:var(--ink2);max-width:60ch}
.cg-block{margin-top:40px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.cg-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.cg-block-head h2{font-size:clamp(1.4rem,2.4vw,1.7rem)}
.cg-showing{font-family:var(--font-label);font-size:.78rem;color:var(--muted)}

.cg-guides{list-style:none}
.cg-guide a{display:flex;align-items:center;gap:20px;min-height:96px;padding:12px 0;border-bottom:1px solid var(--border)}
.cg-guide img{width:72px;height:72px;border-radius:10px;flex-shrink:0}
.cg-g-text{flex:1;min-width:0}
.cg-g-title{display:block;font-family:var(--font-h);font-size:1.1rem;line-height:1.25;letter-spacing:-.01em;transition:color .18s}
.cg-g-ex{display:block;font-size:.85rem;line-height:1.45;color:var(--muted);margin-top:2px}
.cg-g-date{font-size:.75rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.cg-arrow{color:var(--terra);flex-shrink:0}
.cg-guide a:hover .cg-g-title,.cg-q a:hover .cg-q-text{color:var(--terra)}

.cg-qs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.cg-q a{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:88px;padding:14px 0;border-bottom:1px solid var(--border)}
.cg-q-text{font-family:var(--font-h);font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;transition:color .18s}
.cg-q-in{font-size:.75rem;color:var(--muted)}
.cg-q-in b{color:var(--terra-dk);font-weight:600}
.cg-more{padding-top:24px}

/* Draft-only: search phrases under each item. Remove class "cg-draft" from <body> to hide. */
.cg-kw,.cg-draftnote{display:none}
.cg-draft .cg-kw{display:block;font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:4px}
.cg-draft .cg-draftnote{display:block;margin-top:16px;padding:12px 16px;border:1px dashed var(--border2);border-radius:10px;background:var(--bg);font-size:.82rem;line-height:1.6;color:var(--ink2);max-width:72ch}
.cg-draftnote code{font-size:.78rem;background:#fff;border:1px solid var(--border);border-radius:4px;padding:0 4px}
.cg-src{display:inline-block;font-style:normal;font-family:var(--font-label);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:999px;margin-right:8px;vertical-align:1px}
.cg-src-g{background:#E8F0E6;color:#2F5A2A}
.cg-src-a{background:#F3E6D9;color:#8A4A17}

/* ── Small screens: no split, just stacked ──────────────── */
@media(max-width:860px){
  .cg{--tour-h:auto}
  .cg-tour{position:relative;top:auto;height:auto;overflow:visible}
  .cg-tour-inner{transform:none!important;opacity:1!important}
  .cg-hero{grid-template-columns:1fr;padding-top:28px}
  .cg-hero-img{height:220px;align-self:auto}
  .cg-facts-row{flex-direction:column;align-items:stretch}
  .cg-facts-list{flex-wrap:wrap;gap:12px 0}
  .cg-fact{flex:1 1 45%;padding:0;border-left:0}
  .cg-facts-cta{justify-content:center}
  .cg-sheet{min-height:0;border-radius:24px 24px 0 0;margin-top:-1px}
  .cg-layout{grid-template-columns:minmax(0,1fr)}
  .cg-rail{position:static;min-width:0}
  .cg-rail-jump,.cg-rail-other,.cg-rail-topics .cg-rail-label{display:none}
  .cg-rail-topics .cg-rail-list{display:flex;gap:8px;overflow-x:auto;border-top:0;padding-bottom:6px}
  .cg-topic{width:auto;flex:0 0 auto;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;white-space:nowrap}
  .cg-topic[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .cg-topic[aria-pressed="true"] .cg-count{color:rgba(255,255,255,.7)}
  .cg-qs{grid-template-columns:1fr}
  .cg-g-date{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cg-tour-inner{transform:none}
}