/* ==========================================================================
   StrayBirds v3 — Live page (page-specific layout; owner: live+travel agent)
   Load order: brand.css, motion-v3.css, foldbike.css, then this file.
   Board: design/project/V3Live.dc.html.
   Adds one small brand.css-style variant this page needs (LIVE pillar = brick):
     .sb-slab--brick
   Page classes:
     .pg-hero(__img/__badge/__head)          hero: Ken Burns + wipe-in headline
     .pg-mosaic(__tall/__stack/__tile)       M8 parallax mosaic, 3 speeds (asymmetric grid)
     .pg-scenes-track / .pg-scene(*)         M9 swipe carousel
     .pg-mood(__kicker/__lines/__line/__sum) M5 rise-in lines, one by one
     .pg-xhs(-grid/-card/-actions/-fallback) static curated Xiaohongshu cards
   ========================================================================== */

/* ---- brand.css extension (brick = LIVE pillar; not in the shared file) ---- */
.sb-slab--brick { --sb-slab-bg: var(--sb-brick); --sb-slab-fg: var(--sb-white); }
.sb-ticker--brick { --sb-ticker-bg: var(--sb-brick); --sb-ticker-fg: var(--sb-white); }

/* ---------- Hero ---------- */
.pg-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 150vw, 640px);
  background: var(--sb-brick);
  color: var(--sb-white);
}
.pg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
/* 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: 620px; } }
@media (min-width: 1024px) { .pg-hero { min-height: 46vw; max-height: 780px; } }

/* ---------- Mosaic (M8 scroll parallax, 3 speeds; asymmetric grid) ---------- */
.pg-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: hidden; }
.pg-mosaic__tall { grid-row: 1 / 3; position: relative; aspect-ratio: 193 / 432; overflow: hidden; }
.pg-mosaic__cell { position: relative; aspect-ratio: 193 / 214; overflow: hidden; }
.pg-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }

/* ---------- Scenes (M9 swipe carousel) ---------- */
.pg-scenes-track.sb-carousel { padding-inline: var(--sb-gutter); }
.pg-scenes-track .sb-carousel-item { width: min(78vw, 300px); }
.pg-scene__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sb-sand); }
.pg-scene__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-scene__num { position: absolute; left: 10px; top: 10px; }
.pg-scene__cap { margin: 10px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-scene__cap-en { font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.pg-scene__cap-zh { font-weight: 700; font-size: .8125rem; color: var(--sb-muted); }

/* ---------- Mood: kicker + rise-in lines + summary (M5) ---------- */
.pg-mood__kicker { font-weight: 700; font-size: .75rem; letter-spacing: .14em; }
.pg-mood__lines { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.pg-mood__line { font-family: var(--sb-font-zh); font-weight: 900; font-size: clamp(2.25rem, 1.2rem + 7vw, 3.5rem); line-height: 1.1; }
.pg-mood__line--accent { color: var(--sb-paper); }
.pg-mood__summary { margin-top: 18px; font-style: italic; font-weight: 800; font-size: 1.125rem; }

/* ---------- Xiaohongshu: static curated cards, not a live feed ---------- */
.pg-xhs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pg-xhs-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.pg-xhs-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--sb-sand); }
.pg-xhs-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-xhs-card__title { font-family: var(--sb-font-zh); font-weight: 700; font-size: .75rem; line-height: 1.4; }
.pg-xhs-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pg-xhs-id { font-size: .75rem; color: var(--sb-muted); }
.pg-xhs-id strong { font-variant-numeric: tabular-nums; color: var(--sb-fg, var(--sb-ink)); }

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

@media (prefers-reduced-motion: reduce) {
  .pg-mosaic img { transform: none !important; }
}