/* ============================================================
   ChinaRoute RU · 全站设计系统（排版 / 组件 / 动效）
   加载顺序：base.css → 页面样式 → fonts.css → design-system.css
   断点：PC ≥1024px · 平板 768-1023px · 移动 <768px
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
  --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ds-dur-fast: .18s;
  --ds-dur: .32s;
  --ds-dur-slow: .6s;
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 22px;
  --ds-gap: clamp(18px, 2.4vw, 28px);
  --ds-focus: 0 0 0 3px rgba(166, 138, 82, .35);
}

/* ---------- 页面加载过渡 ---------- */
@keyframes ds-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
body { animation: ds-page-in .45s var(--ds-ease) both; }

/* ---------- 滚动入场动画（页面加载即触发，避免首屏外内容长期不可见） ---------- */
@keyframes ds-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.ds-reveal {
  animation: ds-rise .7s var(--ds-ease) both;
  animation-delay: var(--reveal-delay, 0s);
}
/* 兼容旧观察器脚本：is-inview 仍可作为二次触发，但不再必需 */
.ds-reveal.is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ds-reveal { opacity: 1; transform: none; }
}

/* ---------- 统一按钮系统 ---------- */
.btn,
button[class*="action"],
.ticket-action,
.copy-button,
.city-tabs button,
.category-filters button,
.traffic-btn,
.route-submit {
  transition:
    transform var(--ds-dur-fast) var(--ds-ease),
    box-shadow var(--ds-dur-fast) var(--ds-ease),
    background-color var(--ds-dur-fast) var(--ds-ease),
    border-color var(--ds-dur-fast) var(--ds-ease),
    color var(--ds-dur-fast) var(--ds-ease),
    opacity var(--ds-dur-fast) var(--ds-ease);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .traffic-btn:hover, .ticket-action:hover, .copy-button:hover {
    transform: translateY(-2px);
  }
}
.btn:active, .traffic-btn:active, .ticket-action:active, .copy-button:active,
.category-filters button:active, .city-tabs button:active {
  transform: translateY(0) scale(.97);
}

/* 主按钮光泽扫过微交互 */
.btn-primary, .traffic-btn-primary { position: relative; overflow: hidden; }
.btn-primary::after, .traffic-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s var(--ds-ease);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after, .traffic-btn-primary:hover::after { transform: translateX(120%); }
}

/* ---------- 统一卡片系统 ---------- */
.paper-card, .ticket-card, .poi-card, .control-card,
.traffic-quick-card, .city-guide-card, .route-planner-panel,
.traffic-map-panel, .ticket-map-panel {
  border-radius: var(--ds-radius-md);
  transition:
    transform var(--ds-dur) var(--ds-ease),
    box-shadow var(--ds-dur) var(--ds-ease),
    border-color var(--ds-dur) var(--ds-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ticket-card:hover, .poi-card:hover, .traffic-quick-card:hover {
    transform: translateY(-4px);
  }
}

/* 卡片选中态 */
.ticket-card.is-active, .poi-card.is-selected {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 统一表单系统 ---------- */
input[type="search"], input[type="text"], select {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  border-radius: var(--ds-radius-sm);
  transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast), background var(--ds-dur-fast);
}
input[type="search"]:focus, input[type="text"]:focus, select:focus {
  border-color: var(--gold);
  box-shadow: var(--ds-focus);
}

/* 单选 segmented 控件 */
.route-mode-control label span {
  transition: all var(--ds-dur-fast) var(--ds-ease);
}

/* ---------- 语言切换器 ---------- */
.language-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(74, 58, 46, .07);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.language-switcher .lang-switch {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brown-soft);
  min-height: 30px;
}
.language-switcher .lang-switch.is-active {
  background: var(--brown);
  color: #f8f4eb;
  box-shadow: 0 4px 12px rgba(74, 58, 46, .28);
}

/* ---------- 移动端汉堡菜单 ---------- */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-sm);
  background: var(--card-strong);
  color: var(--brown);
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
body.menu-open .menu-toggle .icon-open { display: none; }
body.menu-open .menu-toggle .icon-close { display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(72px + env(safe-area-inset-top)) 24px 32px;
  background: linear-gradient(180deg, #faf7f2 0%, #f4efe6 100%);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform .45s var(--ds-ease), visibility 0s .45s;
}
body.menu-open .mobile-menu {
  transform: none;
  visibility: visible;
  transition: transform .45s var(--ds-ease), visibility 0s;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 6px;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--ds-ease), transform .4s var(--ds-ease), color .2s;
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu a::after { content: "→"; color: var(--gold); font-size: .8em; }
.mobile-menu a:active { color: var(--gold-deep); }
.mobile-menu .menu-lang {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: center;
}
.site-header { z-index: 100; }
body.menu-open { overflow: hidden; }

@media (max-width: 1160px) {
  .menu-toggle { display: inline-flex; }
}

/* ---------- Toast 统一 ---------- */
.toast, .ticket-toast, .traffic-toast {
  font-family: var(--font-body);
  letter-spacing: .01em;
}

/* ---------- 链接微交互 ---------- */
.nav-links a, .traffic-nav a, .mobile-destinations-head a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--gold);
  transition: right var(--ds-dur) var(--ds-ease);
}
@media (hover: hover) {
  .nav-links a:hover::after { right: 0; }
}

/* ---------- 图片切换与加载 ---------- */
.ticket-hero-image { transition: opacity .4s var(--ds-ease), transform .8s var(--ds-ease); }
.ticket-hero-image.is-switching { opacity: 0; transform: scale(1.015); }
.ticket-cover img { transition: transform .6s var(--ds-ease); }
@media (hover: hover) {
  .ticket-card:hover .ticket-cover img { transform: scale(1.05); }
}

/* ---------- 快捷卡片微交互 ---------- */
.traffic-quick-card { position: relative; overflow: hidden; }
.traffic-quick-card .quick-card-index { transition: color var(--ds-dur) var(--ds-ease); }
@media (hover: hover) {
  .traffic-quick-card:hover .quick-card-index { color: var(--gold); }
}

/* ---------- Tab 切换 ---------- */
.city-tabs button, .category-filters button, .city-guide-tabs button {
  border-radius: 999px;
}
.city-tabs button.active, .category-filters button.is-active, .city-guide-tabs button.is-active {
  box-shadow: 0 4px 14px rgba(74, 58, 46, .22);
}

/* 城市攻略内容切换动画 */
@keyframes ds-fade-swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.city-route-body.is-swapping { animation: ds-fade-swap .35s var(--ds-ease); }

/* ============================================================
   响应式排版系统
   ============================================================ */

/* —— PC ≥1024px —— */
@media (min-width: 1024px) {
  .hero-content h1 { font-size: var(--fs-hero); line-height: 1.14; letter-spacing: var(--ls-display); }
  .hero-subtitle { font-size: clamp(17px, 1.5vw, 21px); }
  .hero-desc { font-size: clamp(15px, 1.2vw, 17px); line-height: var(--lh-body); }
  section h2 { font-size: clamp(22px, 2.2vw, 30px); }
  section h3 { font-size: var(--fs-lg); }
  .feature-grid, .hotel-section, .faq-section, .city-ai-grid { gap: var(--ds-gap); }
}

/* —— 平板 768–1023px —— */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-content h1 { font-size: clamp(28px, 5vw, 40px); }
  .feature-grid, .hotel-section, .faq-section, .city-ai-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hotel-section .intro-card, .faq-section .intro-card, .ai-card { grid-column: 1 / -1; }
  .ticket-workspace { grid-template-columns: 250px 1fr; }
  .traffic-workspace { grid-template-columns: 1fr; }
}

/* —— 移动 <768px —— */
@media (max-width: 768px) {
  .hero-content h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.22; }
  .hero-subtitle { font-size: 15px; }
  .hero-desc { font-size: 14px; line-height: 1.8; }
  section h2 { font-size: 20px; line-height: 1.35; }
  section h3 { font-size: 16px; }
  body { line-height: 1.8; }

  .feature-grid, .hotel-section, .faq-section, .city-ai-grid,
  .ticket-workspace, .traffic-workspace, .address-section {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* 移动端卡片内容密度 */
  .paper-card, .ticket-card { border-radius: var(--ds-radius-sm); }
  .ticket-actions { flex-wrap: wrap; }
  .ticket-action { flex: 1 1 30%; }

  /* 触屏目标尺寸 ≥44px */
  .btn, .ticket-action, .copy-button, .traffic-btn,
  .city-tabs button, .category-filters button, .quick-prompts button {
    min-height: 44px;
  }
  .language-switcher .lang-switch { min-height: 34px; padding: 6px 12px; }

  /* 移动端筛选控件全宽 */
  .control-card select, .control-card input { width: 100%; }

  /* 移动端 toast 安全区 */
  .toast, .ticket-toast, .traffic-toast {
    max-width: calc(100vw - 32px);
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* 超小屏 <360px */
@media (max-width: 360px) {
  .hero-content h1 { font-size: 24px; }
  .nav-actions { gap: 4px; }
  .telegram-pill span:last-child { display: none; }
}

/* ---------- 横向滚动条美化 ---------- */
.mobile-destination-list, .category-filters, .city-guide-tabs, .map-marker-list {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.mobile-destination-list::-webkit-scrollbar,
.category-filters::-webkit-scrollbar,
.city-guide-tabs::-webkit-scrollbar,
.map-marker-list::-webkit-scrollbar { height: 4px; }
.mobile-destination-list::-webkit-scrollbar-thumb,
.category-filters::-webkit-scrollbar-thumb,
.city-guide-tabs::-webkit-scrollbar-thumb,
.map-marker-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

/* ---------- 骨架/加载 ---------- */
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.route-placeholder { animation: ds-pulse 1.6s ease-in-out infinite; }

/* ---------- 子页面头部语言切换器布局 ---------- */
.ticket-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ticket-header .home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.traffic-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.traffic-nav .language-switcher { order: -1; }
@media (max-width: 768px) {
  .ticket-header { flex-wrap: wrap; gap: 10px; }
  .ticket-header-actions { width: 100%; justify-content: space-between; }
  .traffic-nav { gap: 8px; }
}

/* ---------- 移动端头部防重叠 ---------- */
@media (max-width: 768px) {
  .nav-shell {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .nav-shell .brand { flex: 1 1 auto; min-width: 0; }
  .nav-shell .brand-text small { display: none; }
  .nav-shell .nav-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nav-shell .telegram-pill span:last-child { display: none; }
  .nav-shell .telegram-pill { padding: 6px 9px; }
  .language-switcher .lang-switch { padding: 5px 9px; font-size: 11px; }

  .traffic-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .traffic-nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
  .traffic-nav .language-switcher { order: 0; margin-right: auto; }
  .traffic-telegram-link { margin-left: 0; }
  .traffic-home-link, .traffic-telegram-link {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 10px;
    font-size: .78rem;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .nav-shell .language-switcher .lang-switch { padding: 4px 7px; }
}

/* 修正旧版交通页小屏规则：恢复首页链接文字与 Telegram 入口 */
@media (max-width: 520px) {
  .traffic-home-link span[data-i18n] { display: inline; }
  .traffic-telegram-link { display: inline-flex; }
}

/* ============================================================
   第三轮优化（2026-08-01）：手风琴 / 留白 / 溢出修复
   ============================================================ */

/* ---------- FAQ 手风琴 ---------- */
.faq-card { display: flex; flex-direction: column; }
.faq-card .faq-card-head {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
}
.faq-card .faq-card-head > span:first-child { margin-bottom: 6px; }
.faq-card .faq-chevron {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(238, 230, 216, .6);
  color: var(--gold-deep);
  transition: transform var(--ds-dur) var(--ds-ease), background var(--ds-dur-fast);
}
.faq-card.is-open .faq-chevron { transform: rotate(180deg); background: rgba(166, 138, 82, .22); }
.faq-card .faq-answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.faq-card .faq-answer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: var(--lh-body);
}
.faq-card .faq-answer[hidden] { display: none; }
.faq-card.is-open {
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(58, 44, 30, .14);
}
@media (hover: hover) {
  .faq-card .faq-card-head:hover .faq-chevron { background: rgba(166, 138, 82, .18); }
}

/* ---------- mock-input 变为可点击按钮后的重置 ---------- */
button.mock-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--brown-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
@media (hover: hover) {
  button.mock-input:hover { border-color: var(--gold); box-shadow: var(--ds-focus); }
}

/* ---------- 助手面板侧栏链接 ---------- */
.assistant-sidebar a { text-decoration: none; }

/* ---------- 修复移动端 2px 横向溢出（装饰水印外凸） ---------- */
.why-card, .paper-card { overflow: hidden; }
.section-watermark { inset: auto 4px -24px auto; }

/* ---------- 移动端快捷入口：更高更宽松，杜绝文案裁切 ---------- */
@media (max-width: 768px) {
  .quick-prompts { gap: 10px; margin-top: 14px; }
  .quick-prompts button {
    min-height: 64px;
    height: auto;
    padding: 10px 12px;
    overflow: visible;
    align-items: center;
  }
  .quick-prompts button > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .quick-prompts strong {
    white-space: normal;
    line-height: 1.22;
    font-size: 15px;
    letter-spacing: .02em;
  }
  .quick-prompts small {
    white-space: normal;
    line-height: 1.3;
    font-size: 11px;
    letter-spacing: .01em;
  }
  body[data-lang="ru"] .quick-prompts small,
  body[data-lang="en"] .quick-prompts small { font-size: 11px; line-height: 1.32; }

  /* 移动端卡片与区块留白：落落大方 */
  .intro-card, .benefit-card, .faq-card, .city-card, .ai-card { padding: 20px; }
  .hotel-section, .faq-section, .feature-grid, .city-ai-grid { gap: 16px; }
  .final-cta { padding-block: 56px; }
}

/* ---------- 恢复小屏返回首页文字（覆盖旧 aux 规则） ---------- */
@media (max-width: 420px) {
  .aux-home-link span[data-i18n] { display: inline; }
}

/* ---------- 门票页 eyebrow 行 ---------- */
.ticket-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }