/* ==========================================================================
   StrayBirds v3 — Travel page (page-specific layout; owner: live+travel agent)
   Load order: brand.css, motion-v3.css, foldbike.css, then this file, then page-travel.js.
   Board: design/project/V3Travel.dc.html.
   Page classes:
     .pg-hero(__img/__badge/__head)     hero: Ken Burns + wipe-in headline
     .pg-steps                          sb-filmstrip wrapper (four moves, rise-in one by one)
     .pg-trip(__toggle/__figure/__cap)  "Fold it. Park it." toggle group + M7 crossfade photo
     .pg-facts(__grid/__row/__cell)     travel facts (asymmetric 2-col grid, ink surface)
     .pg-find(__row/__letter/__name)    "Find us" — two static store rows + Amap Navigate links
     .pg-way(__img/__head)              full-bleed "your own way" photo section
     .pg-ways(__row/__num)              "your own way" numbered lines 01–03
   ========================================================================== */

/* ---------- Hero ---------- */
.pg-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 160vw, 660px);
  background: var(--sb-red);
  color: var(--sb-white);
}
.pg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* top clears the M10 ride-along bike (fixed under the header at scroll 0) */
.pg-hero__badge { position: absolute; left: var(--sb-gutter); top: 56px; z-index: 1; }
.pg-hero__head { position: absolute; left: 0; bottom: 24px; z-index: 1; max-width: calc(100% - 24px); }
@media (min-width: 700px)  { .pg-hero { min-height: 640px; } }
@media (min-width: 1024px) { .pg-hero { min-height: 48vw; max-height: 800px; } }

/* ---------- Four moves (M5 rise-in, one by one) ---------- */
.pg-steps { --sb-film-n: 2; }
@media (min-width: 1024px) { .pg-steps { --sb-film-n: 4; } }

/* ---------- Fold it. Park it. — toggle group + M7 crossfade ---------- */
.pg-trip__figure { position: relative; aspect-ratio: 350 / 380; max-width: 420px; overflow: hidden; background: var(--sb-brick); margin-top: 20px; }
.pg-trip__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-trip__caption { margin-top: 14px; }

/* ---------- Travel facts (asymmetric 2-col grid, ink surface) ---------- */
.pg-facts { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 14px; }
.pg-facts__cell { border-top: 1.5px solid var(--sb-ink-line); padding-top: 10px; min-width: 0; }
.pg-facts__cell--wide { grid-column: 1 / 3; }
.pg-facts__label { font-weight: 700; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-ink-muted); }
.pg-facts__label [lang|="zh"] { letter-spacing: .04em; }
.pg-facts__value { margin: 4px 0 0; font-family: var(--sb-font-zh); font-weight: 900; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.3; }

/* ---------- Find us — two static store rows ---------- */
.pg-find__list { margin-top: 12px; display: flex; flex-direction: column; }
.pg-find__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sb-line); }
.pg-find__letter { font-style: italic; font-weight: 900; font-size: 1.25rem; color: var(--sb-red); }
.pg-find__letter--b { color: var(--sb-ink); }
.pg-find__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-find__name-en { font-style: italic; font-weight: 800; font-size: .875rem; }
.pg-find__name-zh { font-family: var(--sb-font-zh); font-weight: 700; font-size: .8125rem; color: var(--sb-muted); }
.pg-find__note { margin-top: 10px; font-size: .8125rem; color: var(--sb-muted); }

/* ---------- Your own way ---------- */
.pg-way { position: relative; overflow: hidden; min-height: clamp(420px, 140vw, 560px); background: var(--sb-brick); color: var(--sb-white); }
.pg-way__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.pg-way__head { position: absolute; left: 0; bottom: 24px; z-index: 1; max-width: calc(100% - 24px); }
@media (min-width: 700px) { .pg-way { min-height: 480px; } }

.pg-ways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pg-ways__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--sb-line); }
.pg-ways__num { font-style: italic; font-weight: 900; font-size: 1.375rem; color: var(--sb-red); }
.pg-ways__en { display: block; font-style: italic; font-weight: 800; font-size: .9375rem; }
.pg-ways__zh { display: block; margin-top: 2px; font-family: var(--sb-font-zh); font-size: .8125rem; color: var(--sb-muted); }

/* ---------- CTA ---------- */
.pg-cta { display: flex; justify-content: center; }

/* ---------- Boot / carry block: the real fold drawing (fold-drawing.css) ----------
   The lifted bike is the line drawing's static lying pose (it replaced FoldBike's guessed folded shape); the two
   static folded poses replace the M7 flat ↔ standing toggle. */
.fold-carry .fc-lift .fd-gnd, .fold-carry .fc-lift ellipse { display: none; }
/* A thin paper halo keeps the ink lines readable against the dark boot interior. */
.fold-carry .fc-lift .fd-art { filter: drop-shadow(0 0 1px var(--sb-paper, #F4F1E8)) drop-shadow(0 0 1px var(--sb-paper, #F4F1E8)); }
.fold-carry .tr-poses { max-width: 520px; margin: 24px auto 0; }