/* Lingshu final hero adjustment. Load AFTER site.css, widgets.css and story.css. */
/* The approved local SVG must exist at /lingshu-static/assets/brand/mark.svg. */
.site-nav .nav-brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  clip-path: none;
  background: transparent url('/lingshu-static/assets/brand/mark.svg') center / contain no-repeat;
}

/* The bar has FIVE children: four tabs and one hint. */
#hero > .service-tabs {
  width: 100%;
  max-width: var(--ls-page-max,1600px);
  margin-inline: auto;
  padding-inline: var(--ls-page-gutter,48px);
  grid-template-columns: repeat(4,minmax(0,1fr)) max-content;
  align-items: stretch;
  border-top: 1px solid var(--ls-line,#40494b);
}
#hero > .service-tabs > .service-tab {
  min-width: 0;
  min-height: 68px;
  gap: 10px;
  padding: 16px clamp(16px,1.8vw,28px);
  white-space: nowrap;
  font-size: 14px;
  border-right: 1px solid var(--ls-line,#40494b);
}
#hero > .service-tabs > .service-tab:first-child { padding-left: 0; }
#hero > .service-tabs > .service-tab:nth-of-type(4) { border-right: 0; }
#hero > .service-tabs > .service-tab[aria-selected=true]::after {
  left: clamp(16px,1.8vw,28px);
  right: clamp(16px,1.8vw,28px);
}
#hero > .service-tabs > .service-tab:first-child[aria-selected=true]::after { left: 0; }
#hero > .service-tabs > .scroll-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 68px;
  padding: 16px 0 16px 28px;
  border-left: 1px solid var(--ls-line,#40494b);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .12em;
}

@media (min-width:1024px) {
  #hero.hero {
    height: auto;
    min-height: clamp(800px,94svh,880px);
    max-height: none;
    padding-top: var(--ls-nav-height,72px);
    grid-template-rows: minmax(min-content,1fr) auto;
  }
  #hero > .hero-stage {
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
    align-items: start;
    gap: var(--ls-grid-gap,24px);
    padding-top: clamp(68px,8svh,88px);
    padding-bottom: 24px;
  }
  #hero .hero-copy {
    align-self: start;
    justify-content: flex-start;
    min-width: 0;
    padding-top: 0;
    margin-top: 0;
    transform: none;
  }
  #hero .hero-eyebrow { margin-bottom: 20px; }
  #hero .hero-desc { max-width: 34em; margin-bottom: 32px; }
  #hero .hero-canvas-wrap {
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    height: clamp(450px,70svh,630px);
    min-height: 0;
    aspect-ratio: auto;
    margin-top: -22px;
    overflow: visible;
  }
  #hero .hero-canvas,
  #hero .hero-fallback { width: 100%; height: 100%; }
  #hero .hero-fallback { object-fit: contain; }
  #hero .hero-layers { right: 0; gap: 18px; }
  #hero .hero-drag-hint { bottom: 20px; }
}

/* Short desktop / browser zoom: natural document height instead of a clipped fixed screen. */
@media (min-width:1024px) and (max-height:740px) {
  #hero.hero { min-height: 100svh; height: auto; }
  #hero > .hero-stage { padding-top: 34px; padding-bottom: 24px; }
  #hero .hero-canvas-wrap { height: clamp(360px,70svh,500px); margin-top: -16px; }
  #hero .hero-eyebrow { margin-bottom: 16px; }
  #hero .hero-title { font-size: clamp(64px,7.2vw,104px); margin-bottom: 18px; }
  #hero .hero-desc { margin-bottom: 24px; }
}

/* Tablet retains the two-column stage and a single row of four service choices. */
@media (min-width:768px) and (max-width:1023px) {
  #hero.hero { min-height: 0; height: auto; }
  #hero > .hero-stage { padding-top: 48px; padding-bottom: 35px; align-items: start; }
  #hero .hero-copy { min-width: 0; }
  #hero .hero-canvas-wrap { max-width: 100%; }
  #hero .hero-layers { right: 0; gap: 12px; }
  #hero > .service-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #hero > .service-tabs > .scroll-hint { display: none; }
  #hero > .service-tabs > .service-tab { min-height: 64px; padding-inline: 16px; font-size: 13px; gap: 8px; }
  #hero > .service-tabs > .service-tab:first-child { padding-left: 0; }
}

/* Mobile order stays in the DOM: title + actions -> model -> four business buttons. */
@media (max-width:767px) {
  #hero.hero { height: auto; min-height: 0; max-height: none; grid-template-rows: auto auto; }
  #hero > .hero-stage {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 28px;
  }
  #hero .hero-copy { min-width: 0; padding: 0; margin: 0; transform: none; }
  #hero .hero-eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 18px; }
  #hero .hero-desc { margin-bottom: 24px; }
  #hero .hero-actions { gap: 10px; }
  #hero .hero-actions > a { min-height: 44px; }
  #hero .hero-canvas-wrap {
    width: 100%;
    max-width: 100%;
    height: clamp(280px,80vw,430px);
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    touch-action: pan-y;
  }
  #hero .hero-layers {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
  }
  #hero .hero-layer-btn { min-height: 44px; padding: 6px 8px; font-size: 10px; gap: 7px; }
  #hero .hero-drag-hint { bottom: 61px; font-size: 10px; white-space: nowrap; }
  #hero > .service-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #hero > .service-tabs > .service-tab {
    min-height: 58px;
    padding: 14px 12px;
    font-size: 13px;
    gap: 9px;
    border-bottom: 1px solid var(--ls-line,#40494b);
  }
  #hero > .service-tabs > .service-tab:nth-of-type(odd) { padding-left: 0; }
  #hero > .service-tabs > .service-tab:nth-of-type(even) { border-right: 0; }
  #hero > .service-tabs > .service-tab:nth-of-type(n+3) { border-bottom: 0; }
  #hero > .service-tabs > .service-tab[aria-selected=true]::after { left: 12px; right: 12px; }
  #hero > .service-tabs > .service-tab:nth-of-type(odd)[aria-selected=true]::after { left: 0; }
  #hero > .service-tabs > .scroll-hint { display: none; }
}

/* Keep Chinese service names together at narrow widths. */
#hero .hero-desc span { display: inline-block; white-space: nowrap; }
#hero .hero-desc span + span::before { content: " · "; white-space: pre; }
@media (max-width:767px) {
  #hero .hero-desc span { display: block; }
  #hero .hero-desc span + span::before { content: none; }
}

/* Selecting a layer reveals its actual structure and a visible explanation. */
#hero .hero-layer-btn[aria-pressed=true]{background:var(--ls-lime);border-color:var(--ls-lime);color:var(--ls-ink);box-shadow:0 0 24px #d6ff4d18}
#hero .hero-layer-btn[aria-pressed=true]::before{color:var(--ls-ink)}
#hero .hero-focus-card{position:absolute;left:20px;right:110px;bottom:8px;z-index:3;max-width:420px;padding:18px 20px;background:rgba(16,24,27,.94);border:1px solid #64763b;border-left:3px solid var(--ls-lime);border-radius:6px;backdrop-filter:blur(14px);color:#f1f4ec;box-shadow:0 14px 40px #0004;pointer-events:auto}
#hero .hero-focus-card[hidden]{display:none}
#hero .hero-focus-code{display:block;color:#bed48b;font:9px/1.5 var(--ls-font-mono);letter-spacing:.14em;margin-bottom:7px}
#hero .hero-focus-title{display:block;font-size:20px;line-height:1.4;letter-spacing:-.03em}
#hero #hero-focus-description{font-size:12px;line-height:1.8;color:#bfcbc8;margin:8px 0 11px;max-width:34em}
#hero .hero-focus-reset{display:inline-flex;align-items:center;min-height:32px;border:0;border-bottom:1px solid #8b9f64;background:transparent;color:var(--ls-lime);padding:3px 0;font-size:12px}
#hero .hero-canvas-wrap[data-active-layer]:not([data-active-layer=overview]) .hero-drag-hint{visibility:hidden}
@media(min-width:768px) and (max-width:1023px){#hero .hero-focus-card{left:0;right:80px;padding:13px 14px;bottom:-10px}#hero .hero-focus-title{font-size:17px}#hero #hero-focus-description{font-size:11px}}
@media(max-width:767px){
 #hero .hero-canvas-wrap[data-active-layer]:not([data-active-layer=overview]){margin-bottom:151px}
 #hero .hero-focus-card{left:0;right:0;bottom:-145px;max-width:none;min-height:132px;padding:13px 15px}
 #hero .hero-focus-code{font-size:8px;margin-bottom:4px}
 #hero .hero-focus-title{font-size:17px}
 #hero #hero-focus-description{font-size:11px;margin:6px 0}
 #hero .hero-focus-reset{min-height:36px;font-size:11px}
}

/* Keep the explanation beside the object; the selected geometry remains unobstructed. */
#hero .hero-copy{grid-column:1;grid-row:1}
#hero .hero-canvas-wrap{grid-column:2;grid-row:1 / span 2}
#hero .hero-stage > .hero-focus-card{position:static;inset:auto;grid-column:1;grid-row:2;align-self:start;max-width:420px;margin:0;min-width:0;width:100%;padding:16px 18px}
@media(max-width:767px){
 #hero .hero-copy,#hero .hero-canvas-wrap,#hero .hero-stage > .hero-focus-card{grid-column:1;grid-row:auto}
 #hero .hero-canvas-wrap[data-active-layer]:not([data-active-layer=overview]){margin-bottom:0}
 #hero .hero-stage > .hero-focus-card{max-width:none;min-height:0;padding:14px 16px}
}