/* ============================================================
   星悦医疗 · 公共组件（components.css）
   导航 / 页脚 / 通用卡片 / 发丝线网格 —— 全站复用，保持一致
   ============================================================ */

/* ---------------- 导航 ---------------- */
.site-header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.95);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
}
.site-header.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.header-inner{
  max-width:var(--container-wide);margin:0 auto;padding:0 var(--pad-x-wide);
  height:var(--header-h);display:flex;align-items:center;gap:clamp(18px,3vw,46px);
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo-img{height:38px;width:auto;max-width:64px;object-fit:contain;flex:0 0 auto;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.logo-sub{font-size:10px;color:#93A2A8;letter-spacing:.22em;margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.nav a{
  position:relative;font-size:var(--fs-body);color:#23353C;text-decoration:none;padding:6px 0;
  transition:color .22s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav a:hover{color:var(--primary)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--primary);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.header-tel{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.03em;
}
.header-tel svg{width:16px;height:16px;color:var(--primary)}
.header-tel:hover{color:var(--primary)}
.btn-nav{height:42px;padding:0 22px;font-size:14px}
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--border);background:#fff;border-radius:var(--radius);
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:20px;height:20px}

/* ---------------- 页脚 ---------------- */
.site-footer{background:var(--primary-deep);color:rgba(255,255,255,.72);padding:clamp(50px,6vw,76px) 0 0;font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1.5fr;gap:clamp(26px,3vw,48px)}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.footer-brand img{height:34px;width:auto;max-width:60px;object-fit:contain;flex:0 0 auto;display:block}
/* 页脚为深色底，用白色标记本身即可，不再需要白色底衬 */
.footer-brand strong{color:#fff;font-size:16.5px;letter-spacing:.06em;font-weight:700}
.footer-grid h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:.14em;margin-bottom:20px}
.footer-brand + p{line-height:1.95;color:rgba(255,255,255,.65);max-width:360px}
.footer-links a{
  display:block;padding:6px 0;color:rgba(255,255,255,.72);text-decoration:none;transition:color .22s ease,transform .22s ease;
}
.footer-links a:hover{color:#fff;transform:translateX(4px)}
.footer-contact p{display:flex;gap:11px;align-items:flex-start;padding:6px 0;line-height:1.75}
.footer-contact svg{width:16px;height:16px;color:rgba(255,255,255,.6);flex:0 0 auto;margin-top:6px}
.footer-contact a{text-decoration:none;transition:color .22s ease}
.footer-contact a:hover{color:#fff}
.footer-bottom{
  margin-top:clamp(34px,4vw,54px);border-top:1px solid rgba(255,255,255,.15);
  padding:22px 0;font-size:var(--fs-xs);color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.footer-bottom a{color:rgba(255,255,255,.62);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;transition:color .22s ease}
.footer-bottom a:hover{color:#fff}
/* 品牌栏资质说明 */
.footer-cert{color:rgba(255,255,255,.55) !important;font-size:13px !important;letter-spacing:.04em;margin-top:10px !important;max-width:360px}
/* 医疗器械宣传免责声明：产品与合规要求，需固定展示 */
.footer-disclaimer{
  margin:0 0 26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.45);max-width:1100px;
}

/* ---------------- 发丝线网格（秩序感核心手法） ---------------- */
.hair-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.hair-grid > *{background:var(--surface)}
.hair-grid--2{grid-template-columns:repeat(2,1fr)}
.hair-grid--3{grid-template-columns:repeat(3,1fr)}
.hair-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){
  .hair-grid--3,.hair-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .hair-grid--2,.hair-grid--3,.hair-grid--4{grid-template-columns:1fr}
}

/* ---------------- 通用卡片 ---------------- */
.card{padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px);transition:background .3s ease}
.card:hover{background:#FBFDFE}
.card svg{width:32px;height:32px;color:var(--primary);margin-bottom:18px}
.card h3{font-size:var(--fs-card);margin-bottom:11px;letter-spacing:.04em}
.card p{font-size:14.5px;color:#5A6B73;line-height:1.85}

/* ---------------- 内页通用版式 ---------------- */
.lead-block{max-width:820px}
.lead-block .eyebrow{display:block;margin-bottom:18px}
.lead-block h2{font-size:clamp(23px,2.5vw,32px);margin-bottom:22px}
.lead-block p{font-size:var(--fs-body);line-height:2;color:#55666E}
.lead-block p + p{margin-top:16px}

/* ---------------- 待补充标记（全站复用） ---------------- */
.tbd{
  font-style:normal;font-size:13px;color:#9AA8AE;letter-spacing:.04em;
  border-bottom:1px dashed var(--line);padding-bottom:1px;white-space:nowrap;
}

/* ---------------- 法务页（隐私政策等） ---------------- */
.legal{max-width:820px}
.legal-meta{
  font-size:13px;color:var(--text-muted);letter-spacing:.06em;
  margin-bottom:clamp(24px,3vw,36px);padding-bottom:18px;border-bottom:1px solid var(--border);
}
.legal h2{font-size:var(--fs-card);letter-spacing:.03em;margin:clamp(28px,3.4vw,42px) 0 14px}
.legal p{font-size:14.5px;line-height:2;color:#55666E}
.legal ul{margin:12px 0 0}
.legal li{
  position:relative;padding:0 0 0 18px;margin-bottom:9px;
  font-size:14.5px;line-height:1.95;color:#55666E;
}
.legal li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--primary)}
.legal a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.legal-disclaimer{
  margin-top:clamp(32px,4vw,48px) !important;padding:16px 20px;
  border-left:3px solid var(--primary);background:var(--primary-tint);
  font-size:13.5px !important;line-height:1.95;
}
/* 页脚隐私政策入口 */
.footer-policy{
  display:inline-block;margin-right:14px;color:rgba(255,255,255,.62) !important;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;
}
.footer-policy:hover{color:#fff !important}

/* ---------------- 响应式 ---------------- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .header-inner{height:66px;gap:14px}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 18px;
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-menu);
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--border);font-size:15px}
  .nav a::after{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .header-tel{display:none}
  .logo-img{height:34px;max-width:130px}
  .footer-grid{grid-template-columns:1fr}
}

/* ---------------- 通栏大图带（少字为主，一屏一图） ---------------- */
.band{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#fff;
  min-height:clamp(380px,58vh,600px);background:var(--primary-ink);
}
.band > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
html.js .band > img{transform:scale(1.06);transition:transform 2.2s var(--ease-out)}
html.js .band.is-in > img{transform:scale(1)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,55,68,.3),rgba(9,55,68,.78))}
.band--light::after{background:linear-gradient(180deg,rgba(9,55,68,.08) 35%,rgba(9,55,68,.72))}
.band--light > img{object-position:center 42%}
/* 纯色通栏带：图片全站不重复使用，部分通栏带以暗底 + 发丝线网格承担节奏 */
.band--solid{background:linear-gradient(150deg,var(--primary-ink) 0%,#0B4E60 56%,var(--primary-deep) 100%)}
.band--solid::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 76px);
}
/* 通栏带内的流程条 */
.band-flow{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
  margin-top:clamp(26px,3.2vw,40px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(255,255,255,.2);
}
.band-flow span{font-size:14.5px;font-weight:600;letter-spacing:.14em;color:#fff}
.band-flow svg{width:24px;height:14px;color:rgba(255,255,255,.5)}
.band-inner{
  position:relative;z-index:2;width:100%;max-width:var(--container);
  margin:0 auto;padding:clamp(52px,7vw,96px) var(--pad-x);
}
.band-inner .eyebrow{display:block;color:rgba(255,255,255,.7);margin-bottom:16px}
.band-inner h2{color:#fff;font-size:clamp(24px,3vw,38px);line-height:1.35;max-width:20em;margin-bottom:14px}
.band-inner p{color:rgba(255,255,255,.84);font-size:var(--fs-lead);line-height:1.9;max-width:44em}

/* ---------------- 图片卡网格（迁移后暂未使用的样式已移除） ---------------- */

/* ---------------- 图文对读（左图右文 / 交替） ---------------- */
.shot{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}
.shot + .shot{margin-top:clamp(40px,5vw,72px)}
.shot .media{aspect-ratio:16/10;min-height:0}
.shot--rev .media{order:2}
.shot-text h3{font-size:var(--fs-h3);letter-spacing:.03em;margin-bottom:14px}
.shot-text .lead{font-size:var(--fs-lead);font-weight:600;color:var(--ink);line-height:1.75;margin-bottom:14px}
.shot-text p{font-size:14.5px;line-height:1.95;color:#55666E}

@media (max-width:1024px){
  .shot{grid-template-columns:1fr;gap:26px}
  .shot--rev .media{order:0}
}
@media (max-width:768px){
  .band{min-height:320px}
  .band-inner h2{font-size:22px}
}