.routes-hero { position:relative; display:flex; align-items:center; min-height:320px; overflow:hidden; background:#153a43; color:#fff; }
.routes-hero > img,.routes-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.routes-hero > img { object-fit:cover; object-position:center 58%; }
.routes-hero-shade { background:linear-gradient(90deg,#071e26dd 0%,#143344a6 38%,#1537443d 76%),linear-gradient(0deg,#0b272b61,transparent 65%); }
.routes-hero-content { position:relative; z-index:1; padding-top:46px; padding-bottom:46px; }
.routes-hero-content > span { color:#e5f1f1; font-size:12px; font-weight:800; letter-spacing:.18em; }
.routes-hero h1 { margin:12px 0 15px; font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-size:clamp(37px,4vw,54px); line-height:1.2; }
.routes-hero p { margin:0; color:#f4f8f7; font-size:16px; line-height:1.75; }
.routes-hero-credit { position:absolute; right:22px; bottom:14px; z-index:1; color:#fff9; font-size:11px; text-decoration:none; }
.routes-page { padding-top:25px; padding-bottom:90px; }
.routes-explore { display:grid; grid-template-columns:minmax(0,7fr) minmax(270px,3fr); grid-template-areas:"filters map" "ad map"; align-items:start; gap:16px; }
.routes-filter-card,.routes-region-card { min-width:0; border:1px solid #e5ebeb; border-radius:11px; background:#fff; }
.routes-filter-card { grid-area:filters; position:relative; padding:13px 19px; }
.routes-filter-row { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:start; gap:12px; padding:15px 0; }
.routes-filter-row + .routes-filter-row { border-top:1px solid #edf0ef; }
.routes-filter-row h2 { margin:9px 0 0; color:#263c3b; font-size:14px; white-space:nowrap; }
.routes-filter-row h2 span { color:#3789e9; font-size:20px; vertical-align:-2px; }
.routes-filter-options { display:flex; flex-wrap:wrap; gap:7px; }
.routes-filter-options a,.routes-more-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:41px; padding:0 13px; border:1px solid #e3e9eb; border-radius:6px; background:#fff; color:#425b62; font:inherit; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer; }
.routes-filter-options a:hover,.routes-more-toggle:hover { border-color:#6da1df; color:#266ace; }
.routes-filter-options a.is-active { border-color:#377ce8; background:#377ce8; color:#fff; }
.routes-more-toggle { color:#286ddd; }
.routes-destination-popover { position:absolute; z-index:20; top:68px; left:90px; right:12px; max-height:450px; overflow:auto; padding:19px 22px; border:1px solid #d9e5e9; border-radius:10px; background:#fff; box-shadow:0 16px 38px #17394129; }
.routes-destination-popover[hidden] { display:none; }
.routes-popover-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.routes-popover-head strong { color:#203d3c; font-size:17px; }
.routes-popover-head button { width:30px; height:30px; border:0; border-radius:50%; background:#f0f5f5; color:#39565d; font-size:20px; cursor:pointer; }
.routes-popover-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 27px; }
.routes-popover-groups section { min-width:0; }
.routes-popover-groups h3 { margin:0 0 8px; color:#2a67bc; font-size:13px; }
.routes-popover-groups section div { display:flex; flex-wrap:wrap; gap:5px 10px; }
.routes-popover-groups a { color:#38575b; font-size:13px; line-height:1.7; text-decoration:none; }
.routes-popover-groups a:hover { color:#266ad8; text-decoration:underline; }
.routes-region-card { grid-area:map; position:relative; display:flex; flex-direction:column; align-self:stretch; padding:18px 18px 16px; background:linear-gradient(140deg,#fbfcfa,#eef7fb); }
.routes-region-heading { display:flex; justify-content:space-between; align-items:start; gap:7px; }
.routes-region-heading span { color:#78938f; font-size:10px; font-weight:800; letter-spacing:.14em; }
.routes-region-heading h2 { margin:5px 0 0; color:#1b3d3b; font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-size:21px; }
.routes-region-heading > a { color:#4a85d0; font-size:10px; text-align:right; text-decoration:none; }
.routes-region-map { flex:1 1 0; min-height:0; height:0; width:100%; margin:7px auto 0; text-align:center; }
.routes-region-map svg { display:block; width:auto; height:100%; max-width:100%; margin:auto; }
.routes-region-map .map-province { cursor:pointer; transition:opacity .15s; }
.routes-region-map .map-province path { stroke:#fff; stroke-width:1.8; transition:fill .15s,filter .15s; }
.routes-region-map .region-north path { fill:#7898df; }
.routes-region-map .region-northeast path { fill:#80b9ab; }
.routes-region-map .region-central path { fill:#e2c071; }
.routes-region-map .region-east path { fill:#79bfd5; }
.routes-region-map .region-west path { fill:#a3b38a; }
.routes-region-map .region-south path { fill:#a8a4dc; }
.routes-region-map .map-province.is-hovered path,.routes-region-map .map-province:hover path { fill:#367be7; filter:drop-shadow(0 2px 3px #1e4e8a55); }
.routes-region-map .map-province:focus-visible { outline:none; }
.routes-region-map .map-province:focus-visible path { stroke:#133e6b; stroke-width:3; }
.routes-region-card[data-active-region] .map-province:not(.is-active-region) { opacity:.45; }
.routes-region-tooltip { position:absolute; z-index:2; left:50%; bottom:76px; transform:translateX(-50%); padding:6px 10px; border-radius:5px; background:#183b43; color:#fff; font-size:11px; white-space:nowrap; pointer-events:none; }
.routes-region-tooltip[hidden] { display:none; }
.routes-region-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.routes-region-legend a { display:flex; align-items:center; gap:5px; min-width:0; padding:5px 4px; border-radius:5px; color:#4b6668; font-size:11px; text-decoration:none; }
.routes-region-legend a:hover,.routes-region-legend a.is-active { background:#e7efff; color:#225bc1; }
.routes-region-legend i { flex:none; width:8px; height:8px; border-radius:50%; background:#7898df; }
.routes-region-legend .region-northeast i { background:#80b9ab; }.routes-region-legend .region-central i { background:#e2c071; }.routes-region-legend .region-east i { background:#79bfd5; }.routes-region-legend .region-west i { background:#a3b38a; }.routes-region-legend .region-south i { background:#a8a4dc; }
.routes-region-legend small { margin-left:auto; color:#789296; font-size:10px; white-space:nowrap; }
.routes-ad-carousel { grid-area:ad; position:relative; overflow:hidden; width:100%; min-width:0; height:clamp(150px,15vw,190px); border-radius:10px; background:#244950; }
.container > .routes-ad-carousel { margin:20px 0; }
.routes-ad-slide { position:absolute; inset:0; }
.routes-ad-slide[hidden] { display:none; }
.routes-ad-slide > img,.routes-ad-shade { position:absolute; inset:0; width:100%; height:100%; }
.routes-ad-slide > img { object-fit:cover; object-position:center 52%; }
.routes-ad-shade { background:linear-gradient(90deg,#0f2337d9,#1b2c47a8 45%,#193c4d27); }
.routes-ad-content { position:absolute; z-index:1; top:50%; left:7%; width:min(70%,670px); transform:translateY(-50%); color:#fff; }
.routes-ad-content > span { color:#f3dcaa; font-size:11px; font-weight:800; letter-spacing:.14em; }
.routes-ad-content h2 { margin:6px 0 5px; font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-size:clamp(23px,2.6vw,36px); line-height:1.25; }
.routes-ad-content p { margin:0 0 11px; color:#e4f0ee; font-size:13px; }
.routes-ad-content a { display:inline-block; color:#ffdb9c; font-size:13px; font-weight:800; text-decoration:none; }
.routes-ad-content a:hover { text-decoration:underline; }
.routes-ad-arrow { position:absolute; z-index:3; top:50%; width:38px; height:38px; border:1px solid #ffffff99; border-radius:50%; background:#102b35a6; color:#fff; font:inherit; font-size:20px; transform:translateY(-50%); cursor:pointer; }
.routes-ad-prev { left:13px; }.routes-ad-next { right:13px; }
.routes-ad-dots { position:absolute; z-index:3; right:20px; bottom:12px; display:flex; gap:6px; }
.routes-ad-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#ffffff88; cursor:pointer; }
.routes-ad-dots button[aria-current="true"] { width:20px; border-radius:5px; background:#fff; }
.routes-results { padding-top:40px; scroll-margin-top:85px; }
.routes-results-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:19px; }
.routes-results-heading > div > span { display:block; color:#6d9295; font-size:11px; font-weight:800; letter-spacing:.15em; }
.routes-results-heading h2 { display:inline-block; margin:5px 13px 0 0; color:#1a3837; font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-size:34px; }
.routes-results-heading small { color:#688483; font-size:13px; }
.routes-results-heading select { min-height:43px; padding:0 34px 0 13px; border:1px solid #dce5e4; border-radius:6px; background:#fff; color:#3d5c5d; font:inherit; font-size:13px; }
.routes-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.routes-card { display:flex; flex-direction:column; overflow:hidden; min-width:0; border:1px solid #e5e9e8; border-radius:9px; background:#fff; text-decoration:none; transition:transform .18s,box-shadow .18s; }
.routes-card:hover { transform:translateY(-3px); box-shadow:0 11px 23px #20464517; }
.routes-card-photo { position:relative; display:block; aspect-ratio:1.7; overflow:hidden; background:#26586b; }
.routes-card-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }.routes-card:hover .routes-card-photo img { transform:scale(1.035); }
.routes-card-placeholder { display:grid; place-items:center; height:100%; color:#fff; font-size:18px; }
.routes-card-duration { position:absolute; top:12px; left:12px; padding:7px 10px; border-radius:5px; background:#fff; color:#2c5060; font-size:12px; font-weight:800; }
.routes-card-body { display:flex; flex:1; flex-direction:column; align-items:start; min-height:195px; padding:17px; }
.routes-card-body > strong { color:#1c3938; font-size:19px; line-height:1.35; }
.routes-card-summary { margin:8px 0 12px; color:#697d80; font-size:13px; line-height:1.6; }
.routes-card-province { color:#3e6e92; font-size:12px; font-weight:700; }
.routes-card-body .demo-label { margin-top:9px; }
.routes-card-cta { margin-top:auto; padding-top:16px; color:#236cca; font-size:13px; font-weight:800; }
.routes-empty { padding:34px; border:1px dashed #b7ccc8; border-radius:8px; background:#f0f7f5; }.routes-empty strong { font-size:18px; }.routes-empty p { color:#6e8784; }.routes-empty a { color:#236cca; font-weight:700; }
.routes-load-more { display:flex; flex-direction:column; align-items:center; gap:7px; padding:30px 0 0; }.routes-load-more p { margin:0; color:#698181; font-size:13px; }.routes-load-more a { padding:10px 24px; border:1px solid #aac2dc; border-radius:6px; color:#2369b9; font-size:14px; font-weight:800; text-decoration:none; }
@media (max-width:1050px) { .routes-explore { grid-template-columns:minmax(0,1fr) 280px; }.routes-filter-row { grid-template-columns:1fr; gap:8px; }.routes-filter-row h2 { margin:0; }.routes-region-heading { display:block; }.routes-region-heading > a { display:block; margin-top:6px; text-align:left; } }
@media (max-width:790px) { .routes-explore { grid-template-columns:1fr; grid-template-areas:"filters" "map" "ad"; }.routes-region-card { display:grid; grid-template-columns:1fr 180px; gap:8px 15px; }.routes-region-heading { grid-column:1; }.routes-region-map { grid-column:2; grid-row:1/3; height:195px; }.routes-region-legend { grid-column:1; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:end; }.routes-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.routes-ad-carousel { height:190px; } }
@media (max-width:560px) { .routes-hero { min-height:340px; }.routes-hero > img { object-position:55% center; }.routes-hero-content { padding-top:38px; padding-bottom:45px; }.routes-hero h1 { max-width:340px; font-size:37px; }.routes-hero p { font-size:14px; }.routes-hero p br { display:none; }.routes-page { padding-top:16px; }.routes-filter-card { padding:8px 13px; }.routes-filter-row { padding:14px 0; }.routes-filter-options a,.routes-more-toggle { min-height:40px; padding:0 11px; font-size:12px; }.routes-destination-popover { position:fixed; inset:10% 12px auto; max-height:76vh; padding:16px; }.routes-popover-groups { grid-template-columns:1fr; }.routes-region-card { display:block; }.routes-region-map { height:245px; }.routes-region-legend { margin-top:8px; }.routes-ad-carousel { aspect-ratio:auto; height:210px; }.routes-ad-content { left:12%; width:76%; }.routes-ad-content h2 { font-size:24px; }.routes-ad-content p { font-size:12px; }.routes-ad-arrow { width:28px; height:28px; font-size:16px; }.routes-ad-prev { left:5px; }.routes-ad-next { right:5px; }.routes-results { padding-top:32px; }.routes-results-heading { align-items:start; flex-direction:column; }.routes-results-heading h2 { font-size:28px; }.routes-card-grid { grid-template-columns:1fr; }.routes-card-body { min-height:175px; } }
@media (prefers-reduced-motion:reduce) { .routes-card,.routes-card-photo img { transition:none; } }
