/* ==========================================================================
   扬州 · 镇江 行程表  —  style.css
   移动优先、自适应深浅色、零外部依赖
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root{
  --bg:        #f3f0e9;
  --bg-soft:   #eae5da;
  --surface:   #ffffff;
  --surface-2: #faf8f3;
  --text:      #16232a;
  --text-2:    #4a5b61;
  --text-3:    #8b979b;
  --line:      #e3dccd;
  --line-soft: #efe9dd;

  --jade:      #2b6a5c;
  --jade-deep: #143330;
  --jade-soft: #e7f1ee;
  --gold:      #b08327;
  --gold-soft: #f8f0dd;
  --red:       #b8453b;
  --red-soft:  #fbeceb;

  --shadow-s: 0 1px 2px rgba(20,32,36,.05), 0 2px 8px rgba(20,32,36,.05);
  --shadow-m: 0 2px 4px rgba(20,32,36,.05), 0 10px 28px rgba(20,32,36,.07);
  --shadow-l: 0 4px 8px rgba(20,32,36,.06), 0 22px 60px rgba(20,32,36,.12);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;

  /* 主字体：霞鹜文楷（CDN 异步载入，失败自动回退系统楷/黑体）
     —— 楷体笔画细，小字号易发虚，故全站最小字号不低于 11.5px */
  --sans: "LXGW WenKai","LXGW WenKai Screen","PingFang SC","HarmonyOS Sans SC",
          "MiSans","Hiragino Sans GB","Microsoft YaHei",-apple-system,
          BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif: "LXGW WenKai","LXGW WenKai Screen","Noto Serif SC","Source Han Serif SC",
           "Songti SC","STSong",Georgia,serif;
  /* 等宽数字：文楷数字非等宽，时间轴对齐交给这个栈兜底 */

  --pad: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #0d1517;
    --bg-soft:   #111c1f;
    --surface:   #162226;
    --surface-2: #131d21;
    --text:      #e9f0ee;
    --text-2:    #a3b3b5;
    --text-3:    #6d7e81;
    --line:      #23343a;
    --line-soft: #1b2a2f;

    --jade:      #6fc0a8;
    --jade-deep: #0b2321;
    --jade-soft: #16302c;
    --gold:      #d9b061;
    --gold-soft: #2b2415;
    --red:       #e88478;
    --red-soft:  #2e1a19;

    --shadow-s: 0 1px 2px rgba(0,0,0,.3);
    --shadow-m: 0 2px 4px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
    --shadow-l: 0 4px 8px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.5);
  }
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:var(--jade); text-decoration:none;}
a:active{opacity:.6;}
h1,h2,h3,h4{margin:0; line-height:1.3; font-weight:700; text-wrap:balance;}
p{margin:0;}
ol,ul{margin:0; padding:0; list-style:none;}

.wrap{max-width:920px; margin:0 auto; padding:0 var(--pad);}

/* ---------- 顶部阅读进度 ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:90;
  background:linear-gradient(90deg,var(--jade),var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .1s linear;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(78vh,540px);
  display:flex; align-items:flex-end;
  padding:calc(var(--safe-t) + 28px) 0 26px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background:#0d262c url("img/hero.svg") center/cover no-repeat;
  transform:scale(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,20,24,.62) 0%, rgba(6,20,24,.14) 34%, rgba(6,20,24,.78) 100%);
}
.hero__inner{position:relative; width:100%;}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:#a9dcc9;
  border:1px solid rgba(169,220,201,.42);
  background:rgba(10,34,36,.4);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.hero__eyebrow::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:#e0b458; box-shadow:0 0 8px #e0b458;
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(40px,12vw,74px);
  letter-spacing:.05em; color:#fff;
  text-shadow:0 3px 24px rgba(0,0,0,.5);
  margin-bottom:10px;
}
.hero h1 span{color:#e0b458; font-weight:400; margin:0 .12em;}
.hero__sub{
  color:rgba(255,255,255,.82); font-size:14.5px;
  letter-spacing:.03em; margin-bottom:20px;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px;
}
.hero__meta span{
  font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:6px 13px; border-radius:999px;
}

/* ---------- 吸顶日程切换 ---------- */
.seg{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .seg{background:var(--bg);}
}
.seg__scroll{
  display:flex; gap:8px; overflow-x:auto;
  padding:10px var(--pad);
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.seg__scroll::-webkit-scrollbar{display:none;}
.seg a{
  flex:0 0 auto; scroll-snap-align:center;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:46px; min-width:64px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text-2);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.seg a small{
  display:block; font-size:11px; font-weight:400;
  color:var(--text-3); letter-spacing:.04em; margin-top:1px;
}
.seg a[aria-current="true"]{
  background:var(--jade); border-color:var(--jade);
  color:#fff; box-shadow:var(--shadow-m);
}
.seg a[aria-current="true"] small{color:rgba(255,255,255,.72);}

/* ---------- 区块 ---------- */
main{padding-bottom:40px;}
.sec{padding-top:40px; scroll-margin-top:72px;}
.sec__head{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:18px;
}
.sec__num{
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:var(--jade); background:var(--jade-soft);
  padding:4px 10px; border-radius:7px; white-space:nowrap;
}
.sec__head h2{
  font-family:var(--serif);
  font-size:clamp(20px,5.4vw,26px);
  letter-spacing:.03em;
}
.sec__head .meta{
  margin-left:auto; font-size:12px; color:var(--text-3);
  white-space:nowrap; font-weight:600;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
/* 窄屏：让 meta 换到第二行，避免溢出被裁 */
@media (max-width:560px){
  .sec__head{flex-wrap:wrap; row-gap:6px;}
  .sec__head .meta{
    margin-left:0; flex:1 0 100%;
    white-space:normal; overflow:visible;
  }
}

/* ---------- 信息卡 ---------- */
.grid{display:grid; gap:12px;}
@media (min-width:700px){ .grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));} }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:18px;
  box-shadow:var(--shadow-s);
}
.card__label{
  font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--text-3); text-transform:uppercase; margin-bottom:12px;
}
.train{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.train b{
  font-size:17px; font-weight:700; color:var(--red);
  background:var(--red-soft); padding:4px 11px; border-radius:9px;
  letter-spacing:.02em;
}
.train span{font-size:14.5px; font-weight:700; letter-spacing:.01em;}
.kv{font-size:14px; color:var(--text-2); margin:5px 0;}
.kv b{color:var(--text); font-weight:700;}
.tag{
  display:inline-block; margin-top:10px; font-size:12px; font-weight:700;
  color:var(--gold); background:var(--gold-soft);
  padding:5px 11px; border-radius:8px;
}
.kv + .kv{margin-top:10px;}

/* ---------- 出发前必办 ---------- */
.check{display:grid; gap:10px;}
.check li{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:14px;
  padding:15px 17px;
  box-shadow:var(--shadow-s);
  transition:opacity .2s;
}
.check input{
  -webkit-appearance:none; appearance:none;
  flex:0 0 auto; width:24px; height:24px; margin:2px 0 0;
  border:2px solid var(--line); border-radius:8px;
  background:var(--surface-2); cursor:pointer; position:relative;
  transition:background .18s, border-color .18s;
}
.check input:checked{background:var(--jade); border-color:var(--jade);}
.check input:checked::after{
  content:""; position:absolute; left:7px; top:3px;
  width:6px; height:12px;
  border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.check label{flex:1; font-size:14.5px; cursor:pointer;}
.check input:checked + label{opacity:.48;}
.check input:checked + label .ttl{text-decoration:line-through;}
.check .ttl{font-weight:700; font-size:15px;}
.check .when{
  display:inline-block; font-size:11.5px; font-weight:700;
  color:var(--red); background:var(--red-soft);
  padding:2px 8px; border-radius:6px; margin-left:6px;
  vertical-align:1px;
}
.check .desc{
  display:block; font-size:13px; color:var(--text-3);
  line-height:1.6; margin-top:3px;
}
.check .lnks{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.check .lnks a{
  font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:8px;
  background:var(--jade-soft); color:var(--jade);
  min-height:34px; display:inline-flex; align-items:center;
}

/* ---------- 日程 ---------- */
.day{padding-top:44px; scroll-margin-top:72px;}
.day__head{
  position:relative; overflow:hidden;
  border-radius:var(--r-l);
  min-height:168px;
  display:flex; align-items:flex-end;
  box-shadow:var(--shadow-m);
  margin-bottom:22px;
  isolation:isolate;
}
.day__head img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
}
.day__head::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,22,26,.03) 0%, rgba(8,22,26,.34) 54%, rgba(8,22,26,.84) 100%);
}
.day__head .txt{padding:18px; width:100%;}
.day__badge{
  display:inline-block; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; color:#0d262c;
  background:#e0b458; padding:4px 11px; border-radius:999px;
  margin-bottom:9px;
}
.day__head h2{
  font-family:var(--serif);
  font-size:clamp(21px,5.6vw,28px);
  color:#fff; letter-spacing:.04em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.day__head p{
  color:rgba(255,255,255,.85); font-size:13.5px; margin-top:4px;
}
.day__facts{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:11px;
}
.day__facts span{
  font-size:11.5px; font-weight:700; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  padding:3px 10px; border-radius:999px;
}

/* ---------- 时间轴 ---------- */
.tl{position:relative; padding-left:24px;}
.tl::before{
  content:""; position:absolute; left:5px; top:12px; bottom:12px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--jade) 0%, var(--line) 62%, transparent 100%);
}
.tl > li{position:relative; margin-bottom:12px;}
.tl > li::before{
  content:""; position:absolute; left:-23px; top:19px;
  width:11px; height:11px; border-radius:50%;
  background:var(--surface);
  border:2.5px solid var(--jade);
  box-shadow:0 0 0 4px var(--bg);
}
.tl > li.key::before{
  background:var(--red); border-color:var(--red);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 7px color-mix(in srgb, var(--red) 22%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tl > li.key::before{box-shadow:0 0 0 4px var(--bg);}
}

.ev{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:var(--shadow-s);
}
.ev__img{
  display:block; width:100%; height:128px;
  object-fit:cover; border-radius:11px;
  margin-bottom:12px;
  background:var(--bg-soft);
}
@media (min-width:700px){ .ev__img{height:164px;} }
.ev__top{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;}
.ev__t{
  font-size:14px; font-weight:700; color:var(--jade);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  flex:0 0 auto; min-width:44px;
}
.tl > li.key .ev__t{color:var(--red);}
.ev h4{font-size:15.5px; letter-spacing:.01em; flex:1 1 auto; min-width:0;}
.ev__note{font-size:13.5px; color:var(--text-2); margin-top:6px; line-height:1.65;}
.ev__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.chip{
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:4px 9px; border-radius:7px; white-space:nowrap;
}
.chip--fee {color:var(--gold); background:var(--gold-soft);}
.chip--free{color:var(--jade); background:var(--jade-soft);}
.chip--book{color:var(--red);  background:var(--red-soft);}
.chip--tip {color:var(--text-2); background:var(--bg-soft);}
.map{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700;
  color:var(--jade);
  background:var(--jade-soft);
  border:1px solid transparent;
  padding:5px 11px; border-radius:8px;
  min-height:32px;
}
.map::after{content:"↗"; font-size:11px;}
.map:active{background:var(--jade); color:#fff;}

/* ---------- 可选项折叠 ---------- */
.more{
  margin-top:14px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--surface-2);
  overflow:hidden;
}
.more > summary{
  list-style:none; cursor:pointer;
  padding:13px 16px;
  font-size:13.5px; font-weight:700; color:var(--text-2);
  display:flex; align-items:center; gap:9px;
  min-height:48px;
}
.more > summary::-webkit-details-marker{display:none;}
.more > summary::before{
  content:""; flex:0 0 auto;
  width:7px; height:7px; border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:rotate(-45deg); transition:transform .2s; margin-left:2px;
}
.more[open] > summary::before{transform:rotate(45deg);}
.more > summary .n{
  margin-left:auto; font-size:11.5px; font-weight:700;
  color:var(--text-3); background:var(--bg-soft);
  padding:2px 8px; border-radius:6px;
}
.more__body{padding:2px 16px 16px;}
.more__body li{
  font-size:13.5px; color:var(--text-2);
  padding:11px 0; border-top:1px solid var(--line-soft);
  line-height:1.65;
}
.more__body li:first-child{border-top:none;}
.more__body b{color:var(--text);}

/* ---------- 提示框 ---------- */
.note-box{
  margin-top:16px;
  border-radius:14px;
  padding:16px 18px;
  font-size:13.5px;
  line-height:1.72;
  background:var(--jade-soft);
  border:1px solid color-mix(in srgb, var(--jade) 24%, transparent);
  color:var(--text-2);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .note-box{border-color:var(--line);}
}
.note-box h5{
  margin:0 0 9px; font-size:14px; font-weight:700;
  color:var(--jade); letter-spacing:.02em;
}
.note-box ul{display:grid; gap:6px;}
.note-box li{position:relative; padding-left:15px;}
.note-box li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.45;
}
.note-box b{color:var(--text);}
.note-box--warn{
  background:var(--red-soft);
  border-color:color-mix(in srgb, var(--red) 26%, transparent);
}
.note-box--warn h5{color:var(--red);}
.note-box .mt{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:56px;
  background:var(--jade-deep);
  color:rgba(255,255,255,.6);
  padding:34px 0 calc(34px + var(--safe-b));
  font-size:13.5px;
}
@media (prefers-color-scheme: dark){
  .foot{background:#0a1a1a;}
}
.foot h3{
  color:#fff; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 14px; font-weight:700;
}
.foot .links{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.foot .links a{
  color:#cfe9df;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:600;
  min-height:38px; display:inline-flex; align-items:center;
}
.foot .links a:active{background:rgba(255,255,255,.2);}
.foot ul{display:grid; gap:7px; margin-bottom:24px;}
.foot ul li{position:relative; padding-left:14px; line-height:1.7;}
.foot ul li::before{
  content:""; position:absolute; left:1px; top:.75em;
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35);
}
.foot__end{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:16px; font-size:12px; color:rgba(255,255,255,.38);
}

/* ---------- 返回顶部 ---------- */
.top{
  position:fixed; right:16px; bottom:calc(18px + var(--safe-b)); z-index:70;
  width:46px; height:46px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--jade); color:#fff;
  font-size:18px; line-height:1;
  box-shadow:var(--shadow-l);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .24s, visibility .24s, transform .24s;
}
.top.on{opacity:1; visibility:visible; transform:none;}

/* ---------- 大屏微调 ---------- */
@media (min-width:700px){
  :root{--pad:26px;}
  .sec{padding-top:52px;}
  .day{padding-top:56px;}
  .day__head{min-height:220px;}
  .day__head .txt{padding:26px;}
  .ev{padding:16px 20px;}
  .tl{padding-left:28px;}
  .tl > li::before{left:-26px;}
}

/* ---------- 打印 ---------- */
@media print{
  .seg,.top,.progress{display:none !important;}
  body{background:#fff;}
  .hero{min-height:auto; color:#000;}
  .hero__bg,.hero::after{display:none;}
  .hero h1,.hero__sub{color:#000; text-shadow:none;}
  .day__head{min-height:auto; box-shadow:none;}
  .day__head img,.day__head::after{display:none;}
  .day__head h2,.day__head p{color:#000; text-shadow:none;}
  .card,.ev,.check li{box-shadow:none; break-inside:avoid;}
  .more{border-style:solid;}
  .more > summary{display:none;}
  .more__body{display:block !important;}
  section,.day{break-inside:avoid;}
}