/* ============================================================
   HeartEase — Destination hub (jingdezhen-tours.html, …)
   Loaded AFTER services.css (chrome, svcd__* sections, FAQ, CTA).
   Only the hub-specific dh-* blocks live here.
   ============================================================ */

.dh-cover .svcd__cover-zh { font-size: 20px; letter-spacing: 0.06em; }
.dh-cover .svcd__cover-lead { max-width: 520px; }
.dh-stage { padding-top: 72px; }
.dh-stage .hh-eyebrow .hh-cn { white-space: nowrap; }
.dh-more { display: flex; justify-content: center; margin-top: 36px; }

/* ---- highlights ---- */
.dh-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.dh-spot { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dh-spot__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-navy); }
.dh-spot__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1400ms var(--ease-out); }
.dh-spot:hover .dh-spot__photo { transform: scale(1.05); }
.dh-spot__media--plain { display: flex; align-items: center; justify-content: center; background: var(--brand-navy) url('/assets/pattern-meridians.svg') center / 200px; background-blend-mode: soft-light; }
.dh-spot__media--plain span { font-family: var(--font-serif-cn); font-weight: 900; font-size: 56px; color: rgba(247,242,233,0.22); letter-spacing: 0.1em; }
.dh-spot__body { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.dh-spot__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--brand-red); font-weight: 700; }
.dh-spot__name { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--brand-navy); margin: 0; }
.dh-spot:hover .dh-spot__name { color: var(--brand-red); }
.dh-spot__cn { font-family: var(--font-serif-cn); font-weight: 600; font-size: 13px; color: var(--ink-mute); }
.dh-spot__note { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 4px 0 0; }
.dh-spot__go { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-navy); }
.dh-spot__go svg { width: 13px; height: 13px; transition: transform 300ms var(--ease-emph); }
.dh-spot:hover .dh-spot__go svg { transform: translateX(4px); }

/* ---- itineraries ---- */
.dh-tours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.dh-tours > .dh-tour:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; background: #fff; border: 1px solid var(--rule); }
.dh-tours > .dh-tour:first-child .dh-tour__media { aspect-ratio: auto; min-height: 380px; height: 100%; }
.dh-tours > .dh-tour:first-child .dh-tour__body { padding: 44px 48px; gap: 12px; }
.dh-tours > .dh-tour:first-child .dh-tour__title { font-size: 36px; }
.dh-tour { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dh-tour__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-navy); }
.dh-tour__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1400ms var(--ease-out); }
.dh-tour:hover .dh-tour__photo { transform: scale(1.05); }
.dh-tour__flag { position: absolute; top: 14px; left: 14px; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; background: var(--brand-gold); color: var(--brand-navy-ink); }
.dh-tour__days { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,242,233,0.95); background: rgba(2,29,66,0.62); border: 1px solid rgba(247,242,233,0.3); padding: 5px 9px; }
.dh-tour__body { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.dh-tour__eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-red); }
.dh-tour__title { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; color: var(--brand-navy); margin: 0; text-wrap: balance; }
.dh-tour:hover .dh-tour__title { color: var(--brand-red); }
.dh-tour__zh { font-family: var(--font-serif-cn); font-weight: 600; font-size: 13.5px; color: var(--ink-mute); }
.dh-tour__cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-navy); }
.dh-tour__cta svg { width: 13px; height: 13px; transition: transform 300ms var(--ease-emph); }
.dh-tour:hover .dh-tour__cta svg { transform: translateX(4px); }

/* ---- access ---- */
.dh-access { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-top: 2px solid var(--brand-navy); }
.dh-access__col { padding: 32px 40px 8px 0; }
.dh-access__col + .dh-access__col { padding: 32px 0 8px 40px; border-left: 1px solid var(--rule); }
.dh-access__h { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-navy); margin: 0 0 18px; }
.dh-access__h svg { width: 16px; height: 16px; color: var(--brand-red); }
.dh-access__list { margin: 0; }
.dh-access__row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dh-access__row:last-child { border-bottom: none; }
.dh-access__row dt { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--brand-navy); line-height: 1.25; }
.dh-access__row dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.dh-access__when { list-style: none; margin: 0; padding: 0; }
.dh-access__when li { position: relative; padding: 0 0 16px 22px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.dh-access__when li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--brand-gold); }
.dh-access__when strong { color: var(--brand-navy); font-weight: 700; }

/* ---- guides ---- */
.dh-arts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.dh-art { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dh-art__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--brand-navy); }
.dh-art__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1400ms var(--ease-out); }
.dh-art:hover .dh-art__photo { transform: scale(1.05); }
.dh-art__body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.dh-art__cat { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-red); }
.dh-art__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--brand-navy); margin: 0; }
.dh-art:hover .dh-art__title { color: var(--brand-red); }
.dh-art__dek { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dh-art__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-navy); }
.dh-art__go svg { width: 13px; height: 13px; }

/* ---- CTA extras ---- */
.hh-btn--onnavy { color: #fff; border-color: rgba(247,242,233,0.5); }
.hh-btn--onnavy:hover { background: #fff; color: var(--brand-navy); border-color: #fff; }
.hh-cn--latin { font-family: var(--font-sans); letter-spacing: 0.12em; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .dh-spots, .dh-tours { grid-template-columns: repeat(2, 1fr); }
  .dh-arts { grid-template-columns: repeat(2, 1fr); }
  .dh-tours > .dh-tour:first-child { grid-template-columns: 1fr; }
  .dh-tours > .dh-tour:first-child .dh-tour__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .dh-tours > .dh-tour:first-child .dh-tour__body { padding: 28px 28px 32px; }
  .dh-access { grid-template-columns: 1fr; }
  .dh-access__col + .dh-access__col { padding: 32px 0 8px; border-left: none; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .dh-spots, .dh-tours, .dh-arts { grid-template-columns: 1fr; gap: 32px; }
  .dh-access__row { grid-template-columns: 1fr; gap: 6px; }
  .dh-tours > .dh-tour:first-child .dh-tour__title { font-size: 28px; }
  .dh-stage { padding-top: 56px; }
}