.travel-page {
  --travel-hero: #e8effb;
  --travel-photo-edge: #e8effb;
}

[data-theme="dark"] .travel-page {
  --travel-hero: #14243f;
  --travel-photo-edge: #14243f;
}

.travel-page ::selection { background: var(--button); color: #fff; }
.travel-page :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.travel-page .travel-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; padding-block: 20px; color: var(--muted); }
.travel-breadcrumb a { color: var(--blue); }
.travel-page h1, .travel-page h2, .travel-page h3 { line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.travel-page p { margin: 0; }
.travel-page [hidden] { display: none; }
.travel-page .header-actions > button, .travel-page .mobile-menu summary { min-height: 44px; min-width: 44px; font-size: max(11px, .8rem); }
.travel-page .mobile-menu summary { display: grid; place-items: center; }
.travel-page .travel-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.travel-page .travel-icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

.travel-hero {
  background: var(--travel-hero);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.travel-hero-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.travel-intro { padding: clamp(28px, 4.5vw, 64px); align-self: center; }
.travel-intro h1 { font-size: clamp(2.1rem, 4.2vw, 4rem); text-wrap: balance; }
[lang="zh-CN"] #travel-title span { display: block; }
[lang="zh-CN"] #travel-title { font-size: clamp(1.85rem, 4.2vw, 4rem); }
.travel-intro p { color: var(--muted); max-width: 52ch; margin-top: 18px; font-size: clamp(.92rem, 1.45vw, 1.05rem); }
.travel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.travel-page .travel-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--blue); font-weight: 600; background: var(--surface); }
.travel-page .travel-action.primary { background: var(--button); border-color: var(--button); color: #fff; }
.travel-action .travel-icon, .travel-links .travel-icon { width: 18px; height: 18px; }
.travel-action:hover { text-decoration: underline; text-underline-offset: 4px; }
.travel-hero-art { position: relative; min-height: 250px; margin: 0; isolation: isolate; }
.travel-hero-art img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.travel-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--travel-photo-edge), transparent 34%); pointer-events: none; }
.travel-route { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
.travel-route > * { display: flex; gap: 10px; align-items: center; min-height: 67px; padding: 14px clamp(12px, 2vw, 24px); }
.travel-route > * + * { border-inline-start: 1px solid var(--line); }
.travel-route a { color: var(--blue); font-weight: 600; }
.travel-route a:hover { background: var(--soft); }
.travel-route-title { font-weight: 700; }
.travel-route-title small { display: block; color: var(--muted); font-size: .82em; }

.travel-section { padding-block: clamp(30px, 5vw, 64px); }
.travel-section + .travel-section { padding-top: 0; }
.travel-section h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); text-wrap: balance; }
.travel-section h2 + p { color: var(--muted); margin-top: 9px; max-width: 70ch; }
.travel-section-head { display: flex; align-items: end; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.travel-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.travel-filters button { min-height: 44px; padding: 7px 14px; color: var(--blue); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; }
.travel-filters button[aria-pressed="true"] { color: white; background: var(--button); border-color: var(--button); }
.travel-guides, .travel-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.travel-guide, .travel-option { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.travel-guide-text { display: grid; align-content: center; background: var(--soft); }
.travel-guide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.travel-guide-copy, .travel-option { padding: clamp(16px, 2.4vw, 26px); }
.travel-guide h3, .travel-option h3 { font-size: 1.25rem; }
.travel-guide .travel-meta { display: block; margin-top: 7px; color: var(--blue); font-weight: 600; }
.travel-guide p, .travel-option p { margin-top: 10px; color: var(--muted); }
.travel-guide details { margin-top: 13px; border-top: 1px solid var(--line); }
.travel-guide summary { min-height: 44px; align-content: center; color: var(--blue); font-weight: 600; }
.travel-guide ol { margin: 8px 0 12px; padding-inline-start: 1.4em; }
.travel-guide li + li { margin-top: 8px; }
.travel-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.travel-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.travel-budget { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px, 3vw, 32px); }
.travel-budget h2 + p { margin-bottom: 18px; }
.travel-budget-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.travel-budget label { display: grid; gap: 5px; color: var(--muted); }
.travel-budget input { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.travel-budget output { display: block; margin-top: 12px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.travel-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 20px; }
.travel-page .travel-footer strong { color: var(--ink); }
.travel-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.travel-footer .travel-links { margin: 0; }

@media (max-width: 960px) {
  .travel-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .travel-route-title { grid-column: 1 / -1; min-height: 50px; border-bottom: 1px solid var(--line); }
  .travel-route > a:nth-child(2) { border-inline-start: 0; }
}

@media (max-width: 700px) {
  .travel-hero-main { grid-template-columns: minmax(0, 1fr); }
  .travel-intro { padding: 24px 20px; }
  .travel-intro p { margin-top: 12px; }
  .travel-actions { margin-top: 18px; }
  .travel-hero-art { min-height: 0; aspect-ratio: 2 / 1; }
  .travel-hero-art::after { background: linear-gradient(var(--travel-photo-edge), transparent 28%); }
  .travel-route > a:not(.travel-route-title) { font-size: .78rem; line-height: 1.4; padding: 8px 5px; justify-content: center; text-align: center; flex-direction: column; gap: 5px; }
  .travel-route-title { padding-inline: 14px; }
  .travel-guides, .travel-options { grid-template-columns: minmax(0, 1fr); }
  .travel-guide img { aspect-ratio: 2 / 1; }
  .travel-budget-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .travel-hero-art img { animation: travel-arrival 900ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes travel-arrival {
    from { transform: scale(1.04); }
    to { transform: scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.travel-page) { scroll-behavior: auto; }
}