/* ============================================================
   RESPONSIVE / DESKTOP LAYER
   ------------------------------------------------------------
   Mobile-first. Nothing in this file runs on a phone: every rule
   lives inside a min-width media query, so the approved mobile
   composition is left completely untouched.

   Tiers
     640px  tablet   — drop the phone shell, widen gutters
     1024px desktop  — real multi-column layout
     1440px wide     — scale up the type

   The desktop idea: don't just centre the phone. The hero becomes
   an editorial split — copy on the left, the layered card deck
   floating over the photograph's lower right — which keeps the
   "full-bleed image + floating cards" identity of the reference
   while using the width properly.
   ============================================================ */

/* the brand block only exists in the desktop nav */
.nav-brand{ display:none; }


/* ============================================================
   TABLET  ≥ 640px
   The phone shell becomes a real, fluid page.
   ============================================================ */
@media (min-width:640px){
  :root{ --pad:28px; }

  body{ display:block; background:var(--bg); }

  .app{
    width:100%;
    max-width:none;
    height:100vh;              /* 打底：dvh 需要 Chrome 108+ */
    border-radius:0;
    box-shadow:none;
  }
  @supports (height:100dvh){
    .app{ height:100dvh; }
  }
  .app::before{ border-radius:0; }
  .app::after{ display:none; }          /* retire the notch strip */

  .status-spacer{ height:18px; height:calc(18px + env(safe-area-inset-top,0px)); }
  .scroll{ padding-bottom:110px; }

  /* one readable column, generously set */
  .sec, .hero-inner{ max-width:860px; margin-inline:auto; }

  /* 首屏收成约七成半：与手机端同一套构图 ——
     底部让出一截给作品卡片栈，不再是一整屏只有左上角几行字。 */
  .hero{ height:76vh; min-height:520px; max-height:none; }
  @supports (height:100dvh){
    .hero{ height:76dvh; }
  }
  .hero-title{ font-size:clamp(52px, 8.4vw, 76px); }
  .hero-title-wrap{ padding-bottom:0; }

  /* give the deck a bit more presence at this width, otherwise the
     card looks lost against a full-screen hero */
  .sec-nextstop{
    --ns-card-h:296px;
    --ns-gutter:62px;
  }
  .ns-name{ font-size:52px; }
  .ns-body{ padding:30px 28px; }
}


/* ============================================================
   DESKTOP  ≥ 1024px
   ============================================================ */
@media (min-width:1024px){
  :root{
    --pad:56px;
    --tabbar-h:76px;
    --radius-l:28px;
  }

  /* no bottom tab bar on desktop, so the old clearance is dead space */
  .scroll{ padding-bottom:64px; }
  .tail-space{ height:0; }

  /* ---------- shell: phone frame fully retired ---------- */
  .app::before{
    background:
      radial-gradient(90% 60% at 78% 4%, rgba(201,164,106,.15), transparent 62%),
      radial-gradient(70% 50% at 4% 36%, rgba(90,70,140,.12), transparent 70%);
  }

  /* ============================================================
     NAV — the bottom pill becomes a top navigation bar
     ============================================================ */
  .tabbar{
    top:0; bottom:auto; left:0; right:0;
    height:var(--tabbar-h);
    display:flex; align-items:center; gap:2px;
    padding:0 var(--pad);
    border-radius:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(10,10,13,.52);
    box-shadow:none;
    backdrop-filter:blur(26px) saturate(1.5);
    -webkit-backdrop-filter:blur(26px) saturate(1.5);
  }
  /* a top bar should never slide away.
     ⚠ pointer-events 必须跟着复位 —— 手机端的 is-hidden 会关掉点击，
     顶部导航条若沿用那条规则，一滚动就整条点不动了。 */
  .tabbar.is-hidden{ transform:none; opacity:1; pointer-events:auto; }

  /* 返回顶部：桌面端导航搬到顶部，底部整片让开，
     于是不必再躲导航 —— 直接落到右下角。
     44px 比手机端略大：鼠标指针比手指细，需要更明确的落点。 */
  .gq-totop{
    right:32px;
    bottom:32px;
    width:44px; height:44px;
  }
  .gq-totop svg{ width:17px; height:17px; }

  .nav-brand{
    display:flex; align-items:center; gap:13px;
    margin-right:auto;
    text-decoration:none;
    color:inherit;
  }
  .nb-mark{
    width:40px; height:40px; border-radius:12px;
    display:grid; place-items:center;
    font-family:var(--font-disp);
    font-size:17px; font-weight:600;
    letter-spacing:.01em;
    color:#14110C;
    background:linear-gradient(150deg,#EED7A9,#C9A46A);
    box-shadow:0 6px 18px -8px rgba(201,164,106,.7);
  }
  .nb-text{ display:flex; flex-direction:column; gap:3px; }
  .nb-title{
    font-family:var(--font-disp);
    font-size:20px; font-weight:600; line-height:1;
    letter-spacing:-.01em;
    color:#fff;
  }
  .nb-sub{ font-size:10.5px; letter-spacing:.07em; color:var(--ink-3); }

  .tab{
    flex:0 0 auto;
    flex-direction:row; gap:8px;
    height:auto;
    /* 6 项导航：随视口自适应内边距，窄桌面自动收紧 */
    padding:10px clamp(10px, 1.2vw, 18px);
    border-radius:999px;
    color:var(--ink-2);
    transition:color .35s var(--ease), background .35s var(--ease);
  }
  .tab-ico svg{ width:17px; height:17px; }
  .tab-label{ font-size:13.5px; letter-spacing:.01em; }
  .tab:hover:not(.is-active){ color:#fff; background:rgba(255,255,255,.055); }
  .tab.is-active{
    color:#fff;
    background:rgba(255,255,255,.09);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  }
  .tab.is-active .tab-ico svg{ transform:none; }

  /* 「拨打电话」在手机端是一颗从导航条顶上探出来的金色圆钮；
     横排导航里没有「中心」这个概念，探出的圆钮只会显得突兀，
     所以这里把它彻底还原成普通导航项。
     ⚠ 手机端那套是绝对定位（圆钮 top:-10 / 标签 bottom:8），
     这里必须把 position / left / top / bottom / transform 一并复位，
     只写 width:auto 是复位不干净的。 */
  .tab--call{ position:static; }
  .tab--call .tab-ico{
    position:static;
    left:auto; top:auto;
    transform:none;
    width:auto; height:auto;
    display:block;
    border-radius:0;
    color:inherit;
    background:none;
    box-shadow:none;
    animation:none;
  }
  .tab--call .tab-ico svg{ width:17px; height:17px; stroke-width:1.7; }
  .tab--call .tab-label{
    position:static;
    bottom:auto;
    text-align:left;
    color:inherit;
  }

  /* 顶部导航条已经带了品牌块，站内标识页头在这里是重复的 */
  .site-head{ display:none; }
  /* 面包屑接手「让出导航条高度」这件事 */
  .crumb{ padding-top:calc(var(--tabbar-h) + 30px); }
  .crumb-list{ font-size:12px; }

  /* ============================================================
     HERO — editorial split, photo stays full-bleed
     ============================================================ */
  .hero{
    height:auto;
    min-height:76vh;
    max-height:none;
  }
  .hero-inner{
    max-width:1440px;
    margin-inline:auto;
    /* 顶部让出固定导航条的高度：文案与移动端一致，靠左上起排 */
    padding:calc(var(--tabbar-h) + 72px) var(--pad) 104px;
  }

  .hero-title-wrap{ padding-bottom:0; max-width:680px; }
  .hero-title{ font-size:clamp(66px, 7vw, 106px); line-height:.95; }
  .hero-sub{ font-size:21px; margin-top:15px; }
  .hero-date{ font-size:16px; margin-top:19px; }
  .hero-tagline{ font-size:16px; line-height:1.72; margin-top:20px; }

  /* the handwritten signature becomes an editorial signature sitting
     under the copy, mirroring the deck's baseline on the right.
     width:max-content is essential — with position:absolute, setting
     both left and right would stretch the box, and the -6deg rotation
     then swings its far end vertically (a 1440px-wide box drops ~75px). */
  .hero-script{
    left:max(var(--pad), calc(50% - 720px + var(--pad)));
    right:auto;
    top:auto;
    bottom:34px;
    width:max-content;
    text-align:left;
    font-size:27px;
  }

  /* ============================================================
     NEXT-STOP DECK — floats over the hero's lower right
     ============================================================ */
  .sec.sec-nextstop{
    --ns-card-h:340px;
    --ns-top:24px;
    /* the deck viewport here is ~634px; the fan opens to 1.13x, so
       ~76px of room keeps the whole stagger flush to the right edge */
    --ns-gutter:76px;
    max-width:1440px;
    margin-inline:auto;
    /* pull up by exactly the deck's own height so its bottom edge
       always lands a fixed distance above the hero's bottom */
    margin-top:calc(-1 * var(--ns-total) - 40px);
    padding:0 var(--pad);
  }
  .ns-viewport{
    width:clamp(440px, 46vw, 700px);
    margin-left:auto;
    padding-left:0;
  }
  .ns-stage{ left:0; }

  .ns-body{ padding:34px 32px; max-width:58%; }
  .ns-cap{ font-size:12.5px; }
  .ns-name{ font-size:58px; margin-top:14px; }
  .ns-cn{ font-size:17px; margin-top:13px; }
  .ns-date{ font-size:17px; margin-top:14px; }
  .ns-badge{ font-size:12px; padding:8px 15px 8px 13px; margin-top:19px; }
  .ns-badge svg{ width:14px; height:14px; }
  .ns-photo img{ object-position:78% 60%; }

  .ns-arrow{ width:46px; height:46px; margin-top:-23px; }
  .ns-arrow svg{ width:15px; height:15px; }

  .ns-progress{
    width:clamp(440px, 46vw, 700px);
    margin-left:auto;
    margin-top:20px;
  }

  /* ============================================================
     QUICK ACTIONS — one segmented bar
     Three separate cards leave a lot of dead space between the
     label and the chevron at desktop widths, so merge them into a
     single glass bar split by hairlines.
     ============================================================ */
  .sec.sec-quick{
    padding:74px var(--pad) 0;
    max-width:1440px; margin-inline:auto;
  }
  .quick-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:0;
    border-radius:24px;
    border:1px solid var(--stroke);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
    overflow:hidden;
  }
  .quick-card{
    flex-direction:row; align-items:center;
    gap:16px;
    padding:26px 30px;
    border:0;
    border-radius:0;
    background:none;
    backdrop-filter:none;
  }
  .quick-card + .quick-card{ border-left:1px solid var(--stroke); }
  .quick-card:hover{
    transform:none;
    background:rgba(255,255,255,.05);
  }
  .q-ico{ width:48px; height:48px; border-radius:15px; }
  .q-ico svg{ width:23px; height:23px; }
  .q-text{ width:auto; gap:4px; }
  .q-label{ font-size:15.5px; }
  .q-cn{ font-size:11.5px; }
  .q-arw{
    position:static;
    margin-left:auto;
    font-size:20px;
    transition:transform .4s var(--ease);
  }
  .quick-card:hover .q-arw{ transform:translateX(4px); }

  /* ============================================================
     STOPS — timeline beside the next-booking card
     ============================================================ */
  .sec.sec-stops{
    padding:96px var(--pad) 0;
    max-width:1440px; margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:22px;
    align-items:start;
  }
  .sec-stops .sec-head{ grid-column:1 / -1; margin-bottom:18px; }
  .sec-title{ font-size:34px; }
  .sec-title .dot{ font-size:25px; }
  .ttl-sep{ font-size:13px; }
  .pill-btn{ font-size:11.5px; padding:10px 18px; }
  .link-btn{ font-size:13px; }

  .stops-card{ padding:24px 22px 32px; border-radius:32px; }
  .stops-meta{ font-size:11px; margin-bottom:20px; padding-right:16px; }

  /* scale the rail up — the connector is derived from these vars,
     so the line stays exactly through the dot centres */
  :root{
    --node-cap-h: 26px;
    --node-dot: 13px;
    --node-dot-mt: 15px;
  }
  .node-cap{ font-size:9.5px; color:var(--ink-3); }
  .node-city{ font-size:17.5px; margin-top:14px; }
  .node-cn{ font-size:11.5px; margin-top:5px; color:var(--ink-2); }

  .next-card{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    height:100%;
    padding:26px;
    border-radius:24px;
  }
  .next-cap{ font-size:11px; color:var(--ink-2); }
  .next-title{ font-size:17px; margin-top:9px; white-space:normal; }
  .next-sub{ font-size:12px; margin-top:7px; }
  .next-count{
    margin-top:auto;
    font-size:12px;
    padding:9px 15px;
  }

  /* ============================================================
     CITY GALLERY — whole row instead of a horizontal scroller
     ============================================================ */
  .sec.sec-city{
    padding:96px var(--pad) 0;
    max-width:1440px; margin-inline:auto;
  }
  .city-stack{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:16px;
    padding:0;
    overflow:visible;
  }
  .city-card,
  .city-card.is-active{
    width:auto;
    height:280px;
    transform:none;
    opacity:1;
    border-radius:24px;
    margin:0;
    box-shadow:0 26px 54px -26px rgba(0,0,0,.8);
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  /* 桌面端是一整排平铺，不存在「非选中」这回事，压暗层整个关掉 */
  .city-card::after{ display:none; }
  .city-card:hover{
    transform:translateY(-6px);
    box-shadow:0 34px 62px -26px rgba(0,0,0,.9);
  }
  .city-card.is-active{ box-shadow:0 26px 54px -26px rgba(0,0,0,.8); }
  .cc-label{ display:none; }
  .cc-body{ padding:24px 16px; }
  .cc-name{ font-size:32px; }
  .cc-cn{ font-size:13px; margin-top:9px; }
  .cc-range{ font-size:11px; margin-top:9px; }
  .cc-cta{ margin-top:15px; font-size:10.5px; padding:8px 14px; }
  .city-dots{ display:none; }

  /* ============================================================
     CITY PANELS — masonry columns
     A plain 2-col grid leaves a dead cell under the shorter panel
     (Venice is far shorter than Milan). Multi-column flows the
     cards to balance the height instead.
     ============================================================ */
  #cityPanels{
    column-count:2;
    column-gap:22px;
    max-width:1440px;
    margin-inline:auto;
    padding:28px var(--pad) 0;
  }
  .panel{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin:0 0 22px;
    padding:26px;
    border-radius:var(--radius-l);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
    border:1px solid var(--stroke);
    overflow:hidden;
  }
  /* the stacked header is only needed while panels scroll past each other */
  .panel-head{
    position:static;
    margin:0 0 4px;
    padding:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .ph-name{ font-size:36px; }
  .ph-cn{ font-size:14px; }
  .ph-range{ font-size:11.5px; }
  /* lift the small labels — on a large screen 42% white is unreadable */
  .panel-day{ margin:18px 0 14px; font-size:12.5px; color:var(--ink-2); }
  .day-label{ font-size:12px; color:var(--ink-2); }
  .site-media{ height:236px; border-radius:22px; }
  .site-title{ font-size:17px; }
  .site-note{ font-size:12.5px; }
  .strip{ padding:15px 17px; }
  .strip-title{ font-size:13.5px; }
  .nb{ font-size:12.5px; padding:16px 8px; }

  /* ============================================================
     TICKETS — 3-up, image beside copy
     ============================================================ */
  .sec.sec-tickets{
    padding:96px var(--pad) 0;
    max-width:1440px; margin-inline:auto;
  }
  .tk-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:20px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .tk-card{
    width:auto;
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    border-radius:22px;
  }
  .tk-media{ height:100%; min-height:124px; }
  .tk-body{
    padding:20px 22px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .tk-title{ font-size:14.5px; padding-right:22px; min-height:auto; }
  .tk-meta{ font-size:11px; margin-top:10px; }
  .tk-brand{ font-size:10px; padding:5px 10px; }
  .tk-qr{ right:20px; bottom:20px; }
  .tk-qr svg{ width:19px; height:19px; }
  .tk-card:hover{ transform:translateY(-3px); }
}


/* ============================================================
   WIDE  ≥ 1440px
   ============================================================ */
@media (min-width:1440px){
  .sec, .hero-inner, .sec-nextstop, #cityPanels{ max-width:1560px; }

  .hero-title{ font-size:clamp(84px, 6.6vw, 118px); }
  /* re-anchor with `left`, never `right`, so the box keeps shrink-wrapping */
  .hero-script{ left:max(var(--pad), calc(50% - 780px + var(--pad))); }

  .ns-viewport,
  .ns-progress{ width:clamp(520px, 44vw, 760px); }

  /* keep the fan flush at the wider deck size too */
  .sec.sec-nextstop{ --ns-gutter:88px; }

  .ns-name{ font-size:64px; }

  .sec-title{ font-size:36px; }
  .ph-name{ font-size:40px; }
  .cc-name{ font-size:34px; }
}


/* ============================================================
   REDUCED MOTION — keep the layout, drop the movement
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .city-card:hover,
  .quick-card:hover,
  .tk-card:hover{ transform:none; }
}