/* =============================================================================
   Guide furniture, shared by the long guide pages (30 September 2026).
   -----------------------------------------------------------------------------
   Five pieces, each answering one finding in the analytics of 24-30 Sept 2026
   (people scroll 3-46% of a page and almost nobody goes on to a second one):

     .g-glance   "At a glance" card at the top: the answer before the scroll.
     .g-jump     sticky "on this page" bar under the header, one scrolling row.
     .g-finder   search + type chips for a list of cards, inside .g-jump.
     .g-next     picture cards pointing at the obvious next page, MID-page.
     .g-fig / .g-stats / .g-icons   visual breaks in long text.

   Class names carry a g- prefix because several pages keep their own <style>
   (the local list, the generated pages) and already use .jump, .facts, .card.
   Colours are palette tokens only, so every piece follows the page's
   data-palette. Icons come from /brand/icons.svg (Lucide, verbatim).
   ============================================================================= */

.ic{width:20px;height:20px;flex:none;display:block;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- 1. At a glance -------------------------------------------------------- */
.g-glance{background:#fff;border-radius:18px;padding:20px 22px 6px;margin:30px 0 8px;
  box-shadow:0 1px 0 rgba(46,33,28,.06);border-top:3px solid var(--accent);}
.g-glance .g-label{display:block;color:var(--accent);margin-bottom:4px;font-size:11px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.g-glance dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 28px;margin:0;}
.g-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--ground-alt);}
.g-row .g-i{width:38px;height:38px;border-radius:11px;background:var(--ground-alt);color:var(--accent);
  display:grid;place-items:center;flex:none;}
.g-row .g-i .ic{width:19px;height:19px;}
.g-row div{min-width:0;}
.g-row dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin:1px 0 2px;}
.g-row dd{margin:0;font-size:15px;font-weight:500;line-height:1.38;color:var(--text);}
.g-row dd small{display:block;font-weight:400;font-size:13px;color:var(--text-soft);margin-top:1px;}
.g-row dd a{color:var(--accent);}
@media (max-width:600px){
  .g-glance{padding:16px 16px 4px;}
  .g-row{padding:9px 0;gap:11px;}
  .g-row .g-i{width:32px;height:32px;border-radius:9px;}
  .g-row .g-i .ic{width:17px;height:17px;}
  .g-row dd{font-size:14.5px;}
}
.g-glance .g-src{font-size:12px;color:var(--text-soft);padding:10px 0 12px;margin:0;max-width:none;}
.g-glance .g-src a{color:var(--accent);}

/* ---- 2. The sticky "on this page" bar ---------------------------------------
   Sticks under the fixed header (--nav-h comes from site-nav.css). One row that
   scrolls sideways, never wraps: sixteen categories on /local/ used to wrap into
   four rows of chips before the first entry. */
.g-jump{position:sticky;top:var(--nav-h,52px);z-index:40;margin:22px 0 0;padding:10px 0;
  background:var(--ground);box-shadow:0 1px 0 transparent;transition:box-shadow .25s;}
.g-jump.stuck{box-shadow:0 1px 0 var(--ground-alt),0 10px 18px -14px rgba(46,33,28,.25);}
.g-jump .g-jl{display:none;}
.g-jump ol{list-style:none;display:flex;gap:7px;overflow-x:auto;margin:0;padding:1px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
.g-jump ol::-webkit-scrollbar{display:none;}
.g-jump li{flex:none;}
.g-jump a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:99px;
  background:#fff;border:1px solid var(--ground-alt);color:var(--text);font-size:13px;font-weight:600;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;}
.g-jump a:hover{border-color:var(--accent);color:var(--accent);}
.g-jump a.on{background:var(--dark);color:var(--on-dark);border-color:var(--dark);}
.g-jump a i{font-style:normal;font-weight:500;font-size:11.5px;opacity:.6;}
/* the extra room the bar takes when a heading is jumped to */
html:has(.g-jump){scroll-padding-top:calc(var(--nav-h,52px) + 72px);}

/* ---- 3. Finder: search + type chips over a list of cards --------------------
   Progressive enhancement, the /hiking/ rule: every card is in the HTML and none
   is hidden at build time. The controls are injected into an empty .g-finder-ui
   by guide.js, and that box is reserved in CSS (html.js only) so nothing shifts. */
.js .g-finder-ui{min-height:90px;}   /* measured: 42 search + 8 gap + 40 chips */
@media (min-width:760px){ .js .g-finder-ui{min-height:42px;} }
.g-finder{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.g-search{flex:1 1 100%;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;
  background:#fff;border:1.5px solid var(--ground-alt);border-radius:99px;color:var(--text-soft);}
.g-search:focus-within{border-color:var(--accent);color:var(--accent);}
.g-search .ic{width:17px;height:17px;}
.g-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--text);}
.g-search input::placeholder{color:var(--text-soft);opacity:.8;}
.g-chips{flex:1 1 100%;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
.g-chips::-webkit-scrollbar{display:none;}
.g-chip{flex:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:8px 14px;border-radius:99px;background:#fff;border:1px solid var(--ground-alt);color:var(--text);}
.g-chip:hover{border-color:var(--accent);color:var(--accent);}
.g-chip[aria-pressed="true"]{background:var(--dark);color:var(--on-dark);border-color:var(--dark);}
.g-chip i{font-style:normal;font-weight:500;font-size:11.5px;opacity:.6;margin-left:3px;}
@media (min-width:760px){
  .g-finder{flex-wrap:nowrap;}
  .g-search{flex:0 0 280px;}
  .g-chips{flex:1 1 auto;}
}
.g-count{font-size:13px;color:var(--text-soft);margin:12px 0 0;}
.g-count a{color:var(--accent);font-weight:600;}
.g-hide{display:none !important;}
.g-empty{background:var(--ground-alt);border-radius:14px;padding:18px 20px;margin-top:18px;font-size:14.5px;color:var(--text-soft);}
.g-empty button{font:inherit;font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;padding:0;text-decoration:underline;}

/* ---- 4. Next-step cards ------------------------------------------------------ */
.g-next{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));margin:30px 0;}
.g-next a{display:flex;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:10px 16px 10px 10px;
  text-decoration:none;color:var(--text);box-shadow:0 1px 0 rgba(46,33,28,.06);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
.g-next a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(120,55,15,.13);}
.g-next img,.g-next .g-ni{width:78px;height:78px;border-radius:11px;object-fit:cover;flex:none;}
.g-next .g-ni{background:var(--ground-alt);color:var(--accent);display:grid;place-items:center;}
.g-next .g-ni .ic{width:28px;height:28px;}
.g-next .g-nt{flex:1;min-width:0;}
.g-next .g-k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.g-next b{display:block;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.25;margin:2px 0;}
.g-next small{display:block;font-size:13px;line-height:1.4;color:var(--text-soft);}
.g-next .g-arrow{width:18px;height:18px;color:var(--accent);transition:transform .3s;}
.g-next a:hover .g-arrow{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){ .g-next a,.g-next .g-arrow{transition:none;} .g-next a:hover{transform:none;} }

/* ---- 5. Visual breaks --------------------------------------------------------- */
.g-fig{margin:30px 0;}
.g-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;background:var(--ground-alt);}
.g-fig figcaption{font-size:13px;color:var(--text-soft);margin-top:9px;line-height:1.5;}
.g-fig figcaption a{color:var(--text-soft);}
.g-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:26px 0;}
.g-stat{background:var(--dark);color:var(--on-dark);border-radius:16px;padding:18px 20px;}
.g-stat b{display:block;font-family:var(--font-display);font-weight:550;font-size:clamp(28px,3.4vw,40px);line-height:1;color:#fff;margin-bottom:6px;}
.g-stat span{font-size:13px;line-height:1.4;opacity:.8;}
.g-icons{list-style:none;display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));margin:18px 0 6px;padding:0;}
.g-icons li{display:flex;align-items:center;gap:11px;background:#fff;border-radius:12px;padding:11px 14px;
  font-size:14.5px;line-height:1.3;color:var(--text);}
.g-icons .ic{color:var(--accent);width:19px;height:19px;}

/* ---- Phones (mobile audit, 30 Sept 2026) --------------------------------------
   Phones are two thirds of views and read 40% less time than computers (32 s against
   54 s). Measured at 375x812: the header plus the finder took 166px, a fifth of the
   screen, on every directory page; chips and buttons were 38px, under the 44px a
   thumb needs. So on a phone the search box folds to a round icon in the chip row
   (it opens when tapped, and stays open while it holds text), and every chip and
   jump link is 44px tall. */
@media (max-width:759px){
  .js .g-finder-ui{min-height:44px;}
  .g-finder{flex-wrap:nowrap;}
  .g-search{flex:0 0 44px;height:44px;padding:0;justify-content:center;transition:flex-basis .2s;}
  .g-search input{flex:0 0 0;width:0;padding:0;}
  .g-search:focus-within,.g-search.has-q{flex:1 0 100%;padding:0 14px;justify-content:flex-start;}
  .g-search:focus-within input,.g-search.has-q input{flex:1;width:auto;}
  .g-search:focus-within + .g-chips,.g-search.has-q + .g-chips{display:none;}
  .g-chips{flex:1 1 auto;min-width:0;}
  .g-chip,.g-jump a{min-height:44px;padding:0 15px;display:inline-flex;align-items:center;}
}

/* ---- Sticky action bar (phones) -------------------------------------------------
   The one thing a page is for (call, book, directions), pinned to the bottom of the
   screen once the reader has scrolled past the first screen. guide.js adds .show. It
   carries real links, so brand/track.js counts the taps as leads like any other. */
.g-actbar{display:none;}
@media (max-width:759px){
  .g-actbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:var(--ground);
    box-shadow:0 -6px 22px rgba(46,33,28,.14);transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.7,.2,1);}
  .g-actbar.show{transform:none;}
  .g-actbar a{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:48px;
    border-radius:99px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
    border:1.6px solid var(--accent);color:var(--accent);background:#fff;}
  .g-actbar a:first-child{background:var(--accent);color:var(--on-accent);}
  .g-actbar .ic{width:18px;height:18px;}
  body.has-actbar footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px);}
}
@media (prefers-reduced-motion:reduce){ .g-actbar{transition:none;} }

/* "Show on the map" pin, top-right of a directory card */
.g-onmap{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-soft);background:var(--ground);text-decoration:none;transition:background .2s,color .2s;}
.g-onmap:hover{background:var(--accent);color:var(--on-accent);}
.g-onmap .ic{width:17px;height:17px;}