/* Photographic editorial headers for the remaining main guide hubs.
   Loaded only on the named routes; detail pages and dedicated magazines retain
   their own headers. Photos are existing site illustrations, not venue records. */
html:has(link[rel="canonical"][href$="/moving-to-shenzhen/"]) { --editorial-photo: url("/assets/responsive/guides-apartment-640.webp"); }
html:has(link[rel="canonical"][href$="/visas/"]) { --editorial-photo: url("/assets/responsive/living-visa-640.webp"); }
html:has(link[rel="canonical"][href$="/transport/"]) { --editorial-photo: url("/assets/responsive/living-metro-640.webp"); }
html:has(link[rel="canonical"][href$="/healthcare/"]) { --editorial-photo: url("/assets/responsive/guides-clinic-640.webp"); }
html:has(link[rel="canonical"][href$="/taxes/"]) { --editorial-photo: url("/assets/responsive/working-office-640.webp"); }
html:has(link[rel="canonical"][href$="/hotels/"]) { --editorial-photo: url("/assets/responsive/guides-apartment-640.webp"); }
html:has(link[rel="canonical"][href$="/articles/"]),
html:has(link[rel="canonical"][href$="/newsletter/"]) { --editorial-photo: url("/assets/responsive/home-sunset-1280.webp"); }

@media screen and (forced-colors: none) {
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) {
    color: #fff;
    background: linear-gradient(90deg,rgba(4,23,43,.96),rgba(4,23,43,.82) 44%,rgba(4,23,43,.28)),var(--editorial-photo) center / cover;
    padding: clamp(28px,4vw,48px);
    border: 0;
    border-radius: 6px;
    min-height: 310px;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.articles-hero,.nw-hero) {
    border-radius: 0;
    padding-inline: max(4.5vw,calc((100% - 1320px)/2));
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.articles-hero-inner,.nw-hero-inner,.page-hero .home-section-heading) {
    width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero .home-section-heading,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) .label { align-self: flex-start; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .articles-hero-inner { row-gap: 24px; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) h1 {
    font: 700 clamp(36px,4.6vw,64px)/1.04 Georgia,serif;
    color: #fff; letter-spacing: -.035em; text-wrap: balance; margin: 12px 0 18px; max-width: 21ch;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) h1 em {
    color: #45c5f4; font-style: normal;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) :is(p,.crumb,.label,.nw-dek,.nw-eyebrow,.articles-eyebrow,.md-eyebrow) {
    color: #f3f8ff; text-shadow: none;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero .home-section-heading,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) > p:not(.label,.crumb,.verified),
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.articles-hero-deck,.nw-dek,.md-hero-copy > p:not(.md-eyebrow,.md-context-links)) {
    font: 16px/1.65 Arial,sans-serif; max-width: 58ch; margin: 0;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) :is(.crumb,.label,.articles-eyebrow,.nw-eyebrow,.md-eyebrow) {
    font: 11px/1.6 Arial,sans-serif; letter-spacing: .12em; margin: 0 0 8px;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) .crumb {
    letter-spacing: 0; opacity: .93;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) a {
    color: #fff; text-decoration-color: #9bdfff; text-underline-offset: 3px;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) .verified {
    background: rgba(4,23,43,.75); color: #fff; border: 1px solid rgba(221,239,255,.38);
    margin: 18px 0 0; max-width: 100%; font: 11px/1.6 Arial,sans-serif; padding: 7px 11px;
    text-transform: none; letter-spacing: 0; border-radius: 4px;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) .verified::before { background: #74e3b3; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .md-hero { grid-template-columns: minmax(0,1fr); gap: 24px; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .md-hero-copy { max-width: 720px; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .md-hero-copy .md-context-links { font: 13px/1.7 Arial,sans-serif; margin-top: 16px; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .md-scoreboard { max-width: 680px; width: 100%; background: #f1f8ff; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .md-score :is(strong,span) { color: #132542; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .articles-hero-aside {
    background: rgba(4,23,43,.82); padding: 22px; border: 1px solid rgba(221,239,255,.3); border-radius: 5px;
  }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .articles-hero-aside :is(p,dt,dd) { color: #f3f8ff; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .articles-stats { border-color: rgba(221,239,255,.3); }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .nw-hero-five { color: #fff; opacity: .75; }
  html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .nw-hero-five small { color: #fff; }

  @media (max-width: 600px) {
    html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) {
      min-height: 0; padding: 26px 20px; background-image: linear-gradient(90deg,rgba(4,23,43,.94),rgba(4,23,43,.73)),var(--editorial-photo);
    }
    html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page :is(.page-hero,.md-hero,.articles-hero,.nw-hero,.home-buy[aria-labelledby="hotels-title"] > .home-section-heading) h1 {
      font-size: clamp(31px,8.7vw,44px); text-wrap: auto;
    }
    html:has(link[href*="/assets/editorial-heroes.css"]) main.site-magazine-page .articles-hero-aside { padding: 18px; }
  }
}