.zh { color: var(--bs-secondary-color); font-weight: 400; font-size: .9em; }

.hero {
  position: relative; min-height: 60vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: #fff;
}
.hero { background-image: var(--hero-lg); }
@media (max-width: 991.98px) { .hero { background-image: var(--hero-sm, var(--hero-lg)); } }
@media (min-width: 1600px) { .hero { background-image: var(--hero-xl, var(--hero-lg)); } }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1) 60%); }
.hero > .container { position: relative; padding-bottom: 3rem; }
.hero-sm { min-height: 40vh; }

.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
/* All photos visible at once as small tiles (no hidden scrolling, works the same on phone, iPad and PC).
   Tiles are 3:2 and trimmed to fit; the pop-up shows the whole photo. */
.photo-strip .photo-link, .photo-strip picture { display: block; cursor: zoom-in; }
.photo-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: .5rem; transition: opacity .15s; }
.photo-strip .photo-link:hover img { opacity: .85; }
@media (max-width: 575.98px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }
#photoModalImg { max-height: 85vh; width: auto; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.35);
  color: #fff; font-size: 2.5rem; line-height: 1; width: 3rem; height: 4rem; border-radius: .5rem; }
.photo-prev { left: .5rem; } .photo-next { right: .5rem; }
.photo-nav:hover { background: rgba(0,0,0,.6); }
.block-notes { color: var(--bs-secondary-color); padding-left: 1.1rem; }

.dest-card, .trip-card { color: inherit; transition: transform .15s, box-shadow .15s; }
.dest-card:hover, .trip-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
.dest-card .card-img-top, .trip-card .card-img-top { aspect-ratio: 4 / 3; object-fit: cover; }
.hotel-card .card-img-top { aspect-ratio: 3 / 2; object-fit: cover; }
.img-placeholder { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2f6b4f, #7fb08e); color: rgba(255,255,255,.85); font-size: 2rem; }

.day { border-left: 3px solid var(--bs-success); padding-left: 1.25rem; margin-bottom: 2.5rem; }
.day-label { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-success); font-weight: 600; }
.sticky-side { position: sticky; top: 5rem; }

.dest-menu { max-height: 75vh; overflow-y: auto; }
@media (min-width: 992px) { .dest-menu { columns: 2; min-width: 32rem; } .dest-menu li { break-inside: avoid; } }
.region-title { font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-success); font-weight: 600; margin: 1.5rem 0 .5rem; }

/* Yunnan map (province and zoomed prefecture maps; --s scales dots and text on zoomed maps) */
.ymap { width: 100%; height: auto; display: block; font-family: inherit; }
.ymap-pref { fill: #fff; stroke: #b9c6bd; stroke-width: calc(2px * var(--s, 1)); stroke-linejoin: round; transition: fill .15s; }
.ymap-pref.has-page { fill: #f3f8f4; }
a:hover > .ymap-pref.has-page, a:focus > .ymap-pref.has-page { fill: #dcefe2; }
.ymap-interactive .ymap-pref { fill: #f3f8f4; }
.ymap-sea { fill: #e9eef1; }
.ymap-other { fill: #f4f6f7; }
.ymap-this { fill: #fff; stroke: #7fb08e; stroke-width: calc(4px * var(--s, 1)); }
.ymap-prefs { filter: drop-shadow(0 0 1px rgba(0,0,0,.15)); }
.ymap-pref-label { font-size: calc(19px * var(--s, 1)); fill: #8a979e; letter-spacing: .06em; pointer-events: none; text-transform: uppercase; }
.ymap-route { fill: none; stroke: #198754; stroke-width: calc(5px * var(--s, 1)); stroke-dasharray: 14 9; stroke-linecap: round; stroke-linejoin: round; }
.ymap-place circle { fill: #fff; stroke: #6c757d; stroke-width: 4; }
.ymap-place .ymap-label { font-size: 30px; fill: #495057; paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.ymap-place .ymap-num { font-size: 20px; font-weight: 700; fill: #fff; text-anchor: middle; }
.ymap-place.on circle { fill: #198754; stroke: #198754; transform: scale(1.4); }
.ymap-place.on .ymap-label { fill: #0f5132; font-weight: 700; }
.ymap-place.gate circle { stroke: #198754; stroke-width: 6; }
.ymap-place.gate .ymap-label { fill: #0f5132; }
.ymap-interactive .ymap-place { cursor: pointer; }
.ymap-interactive .ymap-place:hover circle, .ymap-interactive .ymap-place:focus circle { stroke: #198754; }
.ymap-place:focus { outline: none; }
.ymap-north path { fill: #6c757d; }
.ymap-north text { font-size: 24px; fill: #6c757d; font-weight: 700; }
.ymap-zoom .ymap-place.on circle { transform: scale(1.2); }
.ymap-sight circle { fill: #dc3545; stroke: #fff; stroke-width: 3; }
.ymap-sight text { font-size: 16px; font-weight: 700; fill: #fff; text-anchor: middle; }
a:hover .ymap-sight circle { fill: #b02a37; }
.sight-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #dc3545; color: #fff; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.sight-list a { color: inherit; text-decoration: none; }
.sight-list a:hover { color: var(--bs-success); }
[id^="sight-"] { scroll-margin-top: 5rem; }

.step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-success); color: #fff; font-weight: 700; }

/* Homepage photo: taller, show the sky and sun, lighter shading on top */
.hero-home { min-height: 72vh; background-position: center 35%; }
@media (min-width: 1600px) { .hero-home { min-height: 0; height: min(72vh, 900px); } }
.hero-home::before { background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 50%); }
.hero h1, .hero .lead { text-shadow: 0 1px 6px rgba(0,0,0,.5); }

.dest-menu-pref { display: block; text-decoration: none; color: var(--bs-success); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.dest-menu-pref:hover { text-decoration: underline; }
.region-title a { color: inherit; text-decoration: none; }
.region-title a:hover { text-decoration: underline; }
.ymap a, .ymap a text { text-decoration: none; }
.ymap-leader { stroke: #dc3545; stroke-width: calc(2px * var(--s, 1)); }
.ymap-spot { fill: #dc3545; }
.ymap-capital circle { fill: #fff; stroke: #adb5bd; stroke-width: 4; }
.ymap-capital text { font-size: 28px; fill: #868e96; paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.ymap-capital.has-page circle { fill: #198754; stroke: #198754; }
.ymap-capital.has-page text { fill: #0f5132; font-weight: 700; }
a:hover .ymap-capital.has-page circle { fill: #0f5132; }
a:hover .ymap-capital.has-page text { text-decoration: underline; }
/* the destination whose page you are on */
.ymap-place.current circle { fill: #dc3545; stroke: #fff; stroke-width: 4; transform: scale(1.3); }
.ymap-place.current .ymap-halo { fill: rgba(220,53,69,.18); stroke: none; transform: none; animation: ymap-pulse 2s ease-in-out infinite; transform-origin: 0 0; }
.ymap-place.current .ymap-label { fill: #b02a37; font-weight: 700; }
@keyframes ymap-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ymap-place.current .ymap-halo { animation: none; } }
.border-dashed { border-style: dashed !important; }
.dest-menu .dest-group { break-inside: avoid; }
video { max-height: 85vh; background: #000; }   /* an upright video never gets taller than the screen */