/* ============================================================
   星悦医疗 · 基础样式（base.css）
   reset + 版式 + 容器 + 按钮 + 区块骨架 + 通栏满铺秩序
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--bg);color:var(--text-body);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--text);margin:0;font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-title)}
h1,h2,h3{text-wrap:balance}          /* 标题断行更均衡，避免末行只剩一两个字 */
p{margin:0}
a{color:inherit}
img{display:block}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}

/* ---- 键盘可达性：统一可见焦点环 ---- */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.page-hero :focus-visible,.band :focus-visible,.mission :focus-visible{outline-color:#fff}

/* ---- 通栏满铺容器 ---- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--pad-x-wide)}

/* ---- 区块 ---- */
.section{padding:var(--section-y) 0}
.section--gray{background:var(--surface-alt)}
.section--tint{background:var(--primary-tint)}

/* ---- 区块头（统一：左标题+副文，右文字链，底细线） ---- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:36px;
  padding-bottom:24px;margin-bottom:clamp(34px,4vw,56px);border-bottom:1px solid var(--border);
}
.section-head h2{font-size:var(--fs-h2);margin-bottom:12px}
.section-head p{color:var(--text-muted);font-size:var(--fs-body);max-width:560px}
.section-head--center{flex-direction:column;align-items:center;text-align:center}
.section-head--center p{margin:0 auto}
.head-note{
  flex:0 0 auto;font-size:var(--fs-small);font-weight:600;color:var(--primary);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;transition:gap var(--dur-fast) ease;
}
.head-note:hover{gap:14px}
.head-note svg{width:16px;height:16px}

/* ---- 眉标 ---- */
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);color:var(--primary)}

/* ---- 按钮 ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 30px;background:var(--primary);color:#fff;border:0;border-radius:var(--radius);
  font-size:var(--fs-body);font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;
  font-family:inherit;transition:background var(--dur-fast) ease,transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.btn:hover{background:var(--primary-ink);transform:translateY(-2px);box-shadow:var(--shadow-btn)}
.btn svg{width:16px;height:16px}
.btn--ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn--ghost:hover{background:var(--primary);color:#fff}
.btn--light{background:#fff;color:var(--primary)}
.btn--light:hover{background:var(--primary-tint);color:var(--primary-ink)}

/* ---- 文字链 ---- */
.link-arrow{
  font-size:var(--fs-small);font-weight:600;color:var(--primary);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:gap var(--dur-fast) ease;
}
.link-arrow:hover{gap:14px}
.link-arrow svg{width:15px;height:15px}

/* ---- 图片媒体块 ---- */
.media{position:relative;overflow:hidden;background:var(--surface-alt);min-height:340px}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--wide{min-height:0;aspect-ratio:16/10}
.media--16x9{min-height:0;aspect-ratio:16/9}
.media--4x3{min-height:0;aspect-ratio:4/3}

/* ---- 滚动揭示（仅脚本可用时启用；脚本被拦截时图片与文字照常显示） ---- */
html.js .media{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-slow) var(--ease-out)}
html.js .media.is-in{clip-path:inset(0 0 0 0)}
html.js .media img{transform:scale(1.08);transition:transform 1.5s var(--ease-out)}
html.js .media.is-in img{transform:scale(1)}
html.js .media.is-in:hover img{transform:scale(1.045);transition:transform .8s ease}
html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--dur-mid) ease,transform .95s var(--ease-out)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---- 降低动态效果偏好：全部内容直接显示 ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .media{clip-path:none}
  html.js .media img{transform:none;transition:none}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- 面包屑页头（内页首屏） ---- */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 76px),
    linear-gradient(148deg,var(--primary-ink) 0%,#0B4E60 54%,var(--primary) 100%);
}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,55,68,.16),rgba(10,68,83,.42))}
.page-hero-inner{position:relative;z-index:2;padding:clamp(70px,9vw,120px) 0 clamp(50px,6vw,80px)}
.page-hero h1{color:#fff;font-size:clamp(28px,3.6vw,44px);margin-bottom:16px}
.page-hero p{color:rgba(255,255,255,.82);max-width:640px;font-size:var(--fs-lead)}
.page-hero .eyebrow{color:rgba(255,255,255,.8)}   /* 深底上改用浅色，原为深青导致几乎不可见 */
.crumb{display:flex;gap:10px;align-items:center;font-size:var(--fs-xs);color:rgba(255,255,255,.6);letter-spacing:.06em;margin-bottom:20px}
.crumb a{text-decoration:none;transition:color var(--dur-fast) ease}
.crumb a:hover{color:#fff}
.crumb span{color:rgba(255,255,255,.4)}

/* ---- 响应式 ---- */
@media (max-width:768px){
  body{font-size:14.5px}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px}
  .media{min-height:260px}
}