/* QGuide V5.5 editorial typography and Songshan visitor-guide layout. */
:root {
  --qg-ink:#083b56;
  --qg-text:#293b43;
  --qg-muted:#667078;
  --qg-rule:rgba(121,105,78,.27);
  --qg-surface:#fffdf8;
  --qg-space-1:8px;
  --qg-space-2:14px;
  --qg-space-3:22px;
  --qg-space-4:34px;
  /* --ql-font-ui/--ql-font-display 唯一定義在 visual-polish-v54.css，這裡
     不再另外重新定義一份（曾經有過 --qg-font-* 這層命名，跟 --ql-font-*
     互相重新指派，是 2026-08-19 查出的字型不統一根因之一，已拿掉這層間接，
     全部直接用 --ql-font-*）。--font-sans/--font-serif 是 styles.css 最早
     定義的舊名字，這裡讓它們也對齊同一套字型，桌機 v3.css/v4.css 大量在用。 */
  --font-sans:var(--ql-font-ui);
  --font-serif:var(--ql-font-display);
}

html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body,
button,
input,
select,
textarea { font-family:var(--ql-font-ui); }

body { color:var(--qg-text); font-size:16px; line-height:1.65; font-kerning:normal; text-rendering:optimizeLegibility; }

body.ql-visual-lock h1,
body.ql-visual-lock h2,
body.ql-visual-lock h3,
.v3-page h1,
.v3-page h2,
.v3-page h3 { font-family:var(--ql-font-display); text-wrap:balance; }

body.ql-visual-lock .ql-desktop-nav a { font-size:15px!important; font-weight:650!important; letter-spacing:.055em!important; }
body.ql-visual-lock .ql-desktop-hero h1 { font-size:clamp(38px,3.5vw,52px)!important; line-height:1.17!important; letter-spacing:.035em!important; }
body.ql-visual-lock .ql-desktop-hero p { max-width:44ch; font-size:17px!important; line-height:1.7!important; letter-spacing:.025em!important; }
/* The route/guides desktop hero (visual-lock-v52.js's ql-v52-route-desktop /
   ql-v52-guides-desktop) keeps its heading on one line (white-space:nowrap,
   see visual-lock-v52.css) inside a fixed-width grid column next to the
   ql-scope-select pill. The clamp()+20ch rules above were tuned for a
   different, wrapping hero and made this one's nowrap title overflow its
   box and paint over the pill. Restore the smaller size v52 was built for. */
body.ql-visual-lock .ql-v52-route-desktop .ql-desktop-hero h1,
body.ql-visual-lock .ql-v52-guides-desktop .ql-desktop-hero h1 { font-size:38px!important; max-width:none; }
body.ql-visual-lock .ql-place-card h3 { font-size:20px; line-height:1.32; }
body.ql-visual-lock .ql-place-card p { font-size:13px; line-height:1.68; }
body.ql-visual-lock .ql-place-card .ql-meta { margin-top:12px; color:var(--qg-muted); }

body.ql-visual-lock .ql-venue-guide { display:none; }
body.ql-visual-lock .ql-mobile-venue-guide { display:none; }

/* V5.5 site-wide visual system: shared type scale, spacing and card depth. */
:root {
  --qg-size-caption:12px;
  --qg-size-meta:13px;
  --qg-size-body:15px;
  --qg-size-body-lg:17px;
  --qg-size-card-title:20px;
  --qg-size-section:26px;
  --qg-radius-control:11px;
  --qg-radius-card:16px;
  --qg-radius-panel:20px;
  --qg-shadow-card:0 5px 18px rgba(31,49,52,.06);
  --qg-shadow-panel:0 12px 28px rgba(31,49,52,.075);
}

button,
input,
select,
textarea { font-size:inherit; line-height:1.4; }

.button,
body.ql-visual-lock button { font-family:var(--ql-font-ui); letter-spacing:.02em; }

.v3-page { padding-bottom:52px; }
.v3-page p,
.v4-console-main p,
.v4-detail-main p { line-height:1.68; }
.v3-page small,
.v4-console-main small,
.v4-console-main .v4-console-table-head { font-size:var(--qg-size-caption); line-height:1.5; }

/* Headings deliberately use only three levels: page, section and card. */
.v3-explore-hero h1 { max-width:680px; font-size:clamp(40px,3.2vw,52px); line-height:1.2; letter-spacing:.035em; }
.v3-page-hero h1,
.v3-editor-intro h1 { font-size:clamp(34px,2.65vw,42px); line-height:1.23; letter-spacing:.035em; }
.v3-page-hero p,
.v3-editor-intro p { font-family:var(--ql-font-ui); font-size:var(--qg-size-body-lg); line-height:1.65; letter-spacing:.015em; }
.v3-section-head h2,
.v3-panel-title-row h2,
.v3-guide-summary h2,
.v3-route-stops-detail h2,
.v3-guide-info h2,
.v4-section-head h2,
.v4-console-panel h2 { font-size:var(--qg-size-section); line-height:1.3; letter-spacing:.025em; }
.v3-page :is(.v3-card-title-row h3,.v3-guide-card-body h3,.v3-route-row-copy h3,.v3-draft-stops h3,.v3-trip-card h3,.v3-guide-image-grid h3),
.v4-console-panel h3,
.v4-console-table-row strong { font-family:var(--ql-font-ui); font-size:var(--qg-size-card-title); font-weight:750; letter-spacing:.01em; line-height:1.38; }

/* The public product uses a calm primary panel with quiet nested cards. */
.v3-page :is(.v3-route-map-card,.v3-route-list-section,.v3-editor-panel,.v3-guide-author-card,.v3-guide-summary,.v3-route-stops-detail,.v3-guide-info,.v3-guide-image-cta),
.v4-console-sidebar,
.v4-console-panel { border-radius:var(--qg-radius-panel); box-shadow:var(--qg-shadow-panel); }
.v3-page :is(.v3-route-row,.v3-guide-card,.v3-guide-image-grid article,.v3-trip-card,.v3-publish-card,.v3-draft-stops article),
.v4-console-metrics article,
.v4-console-table-row { border-radius:var(--qg-radius-card); box-shadow:var(--qg-shadow-card); }
.v3-page :is(.v3-route-row,.v3-guide-image-grid article,.v3-draft-stops article),
.v4-console-table-row { box-shadow:none; }
.v3-page :is(.v3-route-row,.v3-guide-card,.v3-guide-image-grid article,.v3-trip-card) { border-color:rgba(121,105,78,.25); }

/* Locked destination views share the same cadence without changing their layout. */
body.ql-visual-lock .ql-desktop-hero { padding-bottom:18px; }
body.ql-visual-lock .ql-desktop-hero h1 { max-width:20ch; }
body.ql-visual-lock :is(.ql-panel,.ql-place-card,.ql-v52-featured-guide,.ql-v52-more-guides article,.ql-v52-route-map,.ql-v52-weather) { border-color:rgba(121,105,78,.25); }
body.ql-visual-lock .ql-panel { border-radius:var(--qg-radius-panel); box-shadow:var(--qg-shadow-panel); }
body.ql-visual-lock :is(.ql-place-card,.ql-v52-route-row,.ql-v52-more-guides article) { border-radius:var(--qg-radius-card); box-shadow:none; }
body.ql-visual-lock :is(.ql-panel h2,.ql-v52-route-list h2,.ql-v52-route-map h2,.ql-v52-weather h2,.ql-v52-guide-filter h2,.ql-v52-guide-side h2) { font-size:22px; line-height:1.32; letter-spacing:.02em; }
body.ql-visual-lock :is(.ql-place-card h3,.ql-v52-route-row h3,.ql-v52-featured-copy h3) { font-family:var(--ql-font-ui); font-size:var(--qg-size-card-title); font-weight:750; letter-spacing:.01em; }
body.ql-visual-lock :is(.ql-place-card p,.ql-v52-route-row p,.ql-v52-more-guides article p,.ql-v52-guide-notes p) { font-size:var(--qg-size-meta); line-height:1.65; }
body.ql-visual-lock .ql-v52-route-grid,
body.ql-visual-lock .ql-v52-guides-grid { gap:18px; }

/* Data operations need a denser, quieter hierarchy than traveller-facing pages. */
.v4-console-page-head { margin-bottom:14px; }
.v4-console-page-head h1 { font-size:32px; line-height:1.25; letter-spacing:.025em; }
.v4-console-panel { padding:18px; }
.v4-console-sidebar nav a { padding:9px 10px; font-size:13px; line-height:1.45; }
.v4-console-table-head { padding-bottom:8px; }
.v4-console-table-row { padding:12px 10px; border-radius:0; }

@media (max-width:900px) {
  body { font-size:15px; }
  .v3-page { width:calc(100% - 28px); padding-top:16px; padding-bottom:118px; }
  .v3-explore-hero h1,
  .v3-page-hero h1,
  .v3-editor-intro h1 { font-size:clamp(30px,8.2vw,36px); line-height:1.25; }
  .v3-page-hero p,
  .v3-editor-intro p { font-size:15px; }
  .v3-section-head h2,
  .v3-panel-title-row h2,
  .v3-guide-summary h2,
  .v3-route-stops-detail h2,
  .v3-guide-info h2 { font-size:23px; }
  body.ql-visual-lock .ql-desktop-hero h1 { font-size:32px!important; }
  body.ql-visual-lock :is(.ql-panel h2,.ql-v52-route-list h2,.ql-v52-route-map h2,.ql-v52-weather h2,.ql-v52-guide-filter h2,.ql-v52-guide-side h2) { font-size:20px; }
  .v4-console-page-head h1 { font-size:28px; }
  .v4-console-panel h2 { font-size:22px; }
}

@media (min-width:901px) {
  body.ql-visual-lock .ql-venue-guide {
    display:block;
    width:min(1280px,calc(100% - 48px));
    margin:34px auto 42px;
    padding:0 0 34px;
    border-top:1px solid var(--qg-rule);
    border-bottom:1px solid var(--qg-rule);
    scroll-margin-top:104px;
  }
  body.ql-visual-lock .ql-venue-guide__intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:52px; padding:38px 0 30px; align-items:start; }
  body.ql-visual-lock .ql-venue-guide h2 { max-width:18ch; margin:0; color:var(--qg-ink); font-size:38px; line-height:1.22; letter-spacing:.025em; }
  body.ql-visual-lock .ql-venue-guide__intro p { max-width:52ch; margin:16px 0 0; color:#4c575b; font-size:16px; line-height:1.8; }
  body.ql-visual-lock .ql-venue-guide__meta { display:grid; gap:0; margin:0; border-top:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-venue-guide__meta div { padding:13px 0; border-bottom:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-venue-guide__meta dt { color:#8c6249; font-size:12px; font-weight:750; letter-spacing:.08em; }
  body.ql-visual-lock .ql-venue-guide__meta dd { margin:4px 0 0; color:var(--qg-text); font-size:14px; line-height:1.55; }
  body.ql-visual-lock .ql-venue-guide__meta a { display:inline-flex; align-items:center; margin-top:12px; color:var(--ql-action); font-size:14px; font-weight:700; text-decoration:none; }
  body.ql-visual-lock .ql-venue-guide__grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; border-top:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-venue-guide__card { min-width:0; padding:24px 28px 10px; border-left:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-venue-guide__card:first-child { padding-left:0; border-left:0; }
  body.ql-visual-lock .ql-venue-guide__card h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--qg-ink); font-family:var(--ql-font-display); font-size:22px; line-height:1.28; }
  body.ql-visual-lock .ql-venue-guide__card h3 svg { width:23px; height:23px; color:#98705b; }
  body.ql-visual-lock .ql-venue-guide__card ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
  body.ql-visual-lock .ql-venue-guide__card li { color:#556167; font-size:14px; line-height:1.65; }
  body.ql-visual-lock .ql-venue-guide__card strong { display:block; color:var(--qg-text); font-size:14px; }
  body.ql-visual-lock .ql-venue-guide__timeline { display:grid; grid-template-columns:160px 1fr; gap:26px; margin-top:28px; padding-top:24px; border-top:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-venue-guide__timeline h3 { margin:0; color:var(--qg-ink); font-size:27px; line-height:1.25; }
  body.ql-visual-lock .ql-venue-guide__timeline ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0; padding:3px 0 0; list-style:none; }
  body.ql-visual-lock .ql-venue-guide__timeline li { position:relative; padding-top:19px; color:#5c666c; font-size:12px; line-height:1.58; }
  body.ql-visual-lock .ql-venue-guide__timeline li::before { position:absolute; top:0; left:0; width:9px; height:9px; border-radius:50%; background:#9a6a4f; content:""; }
  body.ql-visual-lock .ql-venue-guide__timeline li::after { position:absolute; top:4px; left:12px; right:-16px; height:1px; background:var(--qg-rule); content:""; }
  body.ql-visual-lock .ql-venue-guide__timeline li:last-child::after { display:none; }
  body.ql-visual-lock .ql-venue-guide__timeline time { display:block; margin-bottom:5px; color:#8c6249; font-family:var(--ql-font-display); font-size:18px; font-weight:700; }
}

@media (max-width:900px) {
  body.ql-visual-lock .ql-mobile-venue-guide { display:block; margin:30px 16px calc(110px + env(safe-area-inset-bottom)); padding:28px 0 0; border-top:1px solid var(--qg-rule); scroll-margin-top:92px; }
  body.ql-visual-lock .ql-mobile-venue-guide h2 { margin:0; color:var(--qg-ink); font-size:28px; line-height:1.3; letter-spacing:.02em; }
  body.ql-visual-lock .ql-mobile-venue-guide__summary { margin:12px 0 0; color:#526067; font-size:14px; line-height:1.76; }
  body.ql-visual-lock .ql-mobile-venue-guide__meta { display:grid; gap:0; margin:22px 0 0; border-top:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-mobile-venue-guide__meta div { padding:12px 0; border-bottom:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-mobile-venue-guide__meta dt { color:#8c6249; font-size:11px; font-weight:750; letter-spacing:.08em; }
  body.ql-visual-lock .ql-mobile-venue-guide__meta dd { margin:3px 0 0; color:var(--qg-text); font-size:13px; line-height:1.58; }
  body.ql-visual-lock .ql-mobile-venue-guide__card { padding:20px 0; border-bottom:1px solid var(--qg-rule); }
  body.ql-visual-lock .ql-mobile-venue-guide__card h3 { display:flex; align-items:center; gap:7px; margin:0 0 12px; color:var(--qg-ink); font-size:20px; line-height:1.3; }
  body.ql-visual-lock .ql-mobile-venue-guide__card h3 svg { width:21px; height:21px; color:#98705b; }
  body.ql-visual-lock .ql-mobile-venue-guide__card ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
  body.ql-visual-lock .ql-mobile-venue-guide__card li { color:#556167; font-size:13px; line-height:1.62; }
  body.ql-visual-lock .ql-mobile-venue-guide__card strong { display:block; color:var(--qg-text); }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline { margin-top:24px; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline h3 { margin:0 0 15px; color:var(--qg-ink); font-size:23px; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline li { position:relative; padding-top:16px; color:#626d70; font-size:10.5px; line-height:1.5; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline li::before { position:absolute; top:0; left:0; width:8px; height:8px; border-radius:50%; background:#9a6a4f; content:""; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline li::after { position:absolute; top:3px; left:10px; right:-8px; height:1px; background:var(--qg-rule); content:""; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline li:last-child::after { display:none; }
  body.ql-visual-lock .ql-mobile-venue-guide__timeline time { display:block; margin-bottom:4px; color:#8c6249; font-size:13px; font-weight:750; }
  body.ql-visual-lock .ql-mobile-venue-guide__official { display:inline-flex; margin-top:20px; color:var(--ql-action); font-size:13px; font-weight:700; text-decoration:none; }
  body.ql-visual-lock .ql-home-mobile .ql-mobile-hero h1 { font-size:clamp(29px,8vw,33px)!important; line-height:1.25!important; letter-spacing:.02em!important; }
  body.ql-visual-lock .ql-mobile-section h2 { font-size:24px!important; line-height:1.32!important; }
  body.ql-visual-lock .ql-mobile-feature h3 { font-size:18px!important; line-height:1.38!important; }
  body.ql-visual-lock .mobile-bottom-nav a { font-size:13px!important; letter-spacing:.035em!important; }
}

/* Mobile repairs found during full-width visual verification. */
@media (max-width:900px) {
  body.ql-v52 .ql-v52-guide-mobile-top {
    display:block!important;
    height:auto!important;
    min-height:64px;
    padding:10px 0 8px;
    overflow:visible!important;
  }
  body.ql-v52 .ql-v52-guide-mobile-top>div {
    display:flex!important;
    width:100%!important;
    grid-template-columns:none!important;
    align-items:center;
    gap:10px!important;
  }
  body.ql-v52 .ql-v52-guide-mobile-top>img { display:none!important; }
  body.ql-v52 .ql-v52-guide-mobile-top h1 {
    min-width:0;
    margin:0!important;
    font-size:26px!important;
    line-height:1.2!important;
    letter-spacing:.025em!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
  }
  body.ql-v52 .ql-v52-guide-mobile-hero { height:auto; min-height:112px; padding:8px 0 12px; }

  body.ql-v52 .ql-v52-route-overview { grid-template-columns:1fr; gap:12px; }
  body.ql-v52 .ql-v52-mobile-map { min-height:200px; }
  body.ql-v52[data-route-page="route"] #ai-fab,
  body.ql-v52[data-route-page="guides"] #ai-fab { display:none!important; }

  body.v4-console-mode .v5-admin-banner { display:grid; grid-template-columns:1fr; gap:14px; }
  body.v4-console-mode .v5-admin-banner .button-group { display:grid; grid-template-columns:1fr; width:100%; gap:8px; }
  body.v4-console-mode .v5-admin-banner .button-group .button { width:100%; min-height:44px; white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; }
}