/* ============================================================
   通辽博德蒙医医院 · 子页面共享样式 (shared.css)
   视觉风格：深绿(#0B2618 系) + 金色(#D4AF37) 高端医疗风
   字体：Noto Serif SC / Noto Sans SC
   适用：about.html / therapy.html / departments.html / experts.html
   修改此文件可全局生效，子页面自身只写少量独有样式
   ============================================================ */

/* ===== 全局重置与变量 ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --green-900:#0B2618;--green-800:#1B4332;--green-700:#2D6A4F;
  --green-600:#40916C;--green-500:#52B788;--gold:#D4AF37;
  --gold-light:#F5E6C8;--cream:#FBF8F1;--black:#0a0a0a;
  --text:#FFFFFF;--text-light:rgba(255,255,255,0.8);
  --radius:16px;--shadow:0 8px 32px rgba(0,0,0,0.4);
}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  background:#0B2618;color:#FFFFFF;overflow-x:hidden;min-height:100vh;
  background-image:url(data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 30 L30 55 L5 30 Z' fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23C9A84C' stroke-width='0.3' opacity='0.06'/%3E%3C/svg%3E);
}
h1,h2,h3,.page-hero h1,.section-header h2{
  font-family:'Noto Serif SC','Noto Sans SC','PingFang SC','Microsoft YaHei',serif;
}

/* ===== 滚动进度条 ===== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,#D4AF37,#F5E6C8,#D4AF37);
  background-size:200% auto;animation:goldShimmer 2s linear infinite;
  z-index:10001;transition:width 0.15s ease;width:0%;
}

/* ===== 导航 ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:10000;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(212,175,55,0.25);
  transition:all 0.4s;box-shadow:0 2px 20px rgba(0,0,0,0.08);
}
.nav.scrolled{background:rgba(255,255,255,1);box-shadow:0 4px 30px rgba(0,0,0,0.1)}
.nav-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:32px;width:auto;object-fit:contain}
.logo-text{font-size:14px;font-weight:800;color:#D4AF37;letter-spacing:1px}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center}
.nav-links a{color:rgba(11,38,24,0.85);text-decoration:none;font-size:13px;padding:8px 14px;border-radius:20px;transition:all 0.3s;font-weight:500;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{background:rgba(212,175,55,0.15);color:#0B2618}
.nav-tel{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(11,38,24,0.8);font-weight:600;white-space:nowrap}
.mobile-toggle{display:none;background:none;border:none;font-size:24px;color:#0B2618;cursor:pointer}
@media(max-width:900px){
  .mobile-toggle{display:block}
  .nav-links{display:none;flex-direction:column;position:absolute;top:56px;left:0;right:0;background:rgba(255,255,255,0.98);padding:16px;border-top:1px solid rgba(212,175,55,0.2)}
  .nav-links.open{display:flex}
}

/* ===== 页面标题区 (page-hero) 纯渐变背景，不加载视频/大图 ===== */
.page-hero{
  position:relative;padding:140px 24px 70px;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,#0B2618 0%,#1B4332 45%,#0B2618 100%);
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background-image:url(data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L72 40 L40 72 L8 40 Z' fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.07'/%3E%3C/svg%3E);
  opacity:0.8;pointer-events:none;
}
.page-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.page-hero .en{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:rgba(212,175,55,0.6);margin-bottom:14px}
.page-hero h1{font-size:46px;font-weight:900;line-height:1.2;margin-bottom:18px;letter-spacing:2px;
  background:linear-gradient(90deg,#D4AF37 0%,#F5E6C8 25%,#FFFFFF 50%,#F5E6C8 75%,#D4AF37 100%);
  background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:goldTextShimmer 4s linear infinite;
}
.page-hero p{font-size:17px;color:rgba(255,255,255,0.85);max-width:680px;margin:0 auto;line-height:1.8}
.page-hero .gold-line{margin-top:28px}
@media(max-width:768px){
  .page-hero{padding:110px 18px 50px}
  .page-hero h1{font-size:30px}
  .page-hero p{font-size:14px}
}

/* ===== 通用段落 ===== */
.section{padding:80px 30px;max-width:1300px;margin:0 auto}
.section-header{text-align:center;margin-bottom:56px}
.section-header .en{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:rgba(212,175,55,0.5);margin-bottom:8px}
.section-header h2{font-size:40px;font-weight:900;background:linear-gradient(90deg,#D4AF37 0%,#F5E6C8 25%,#FFFFFF 50%,#F5E6C8 75%,#D4AF37 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:goldTextShimmer 4s linear infinite;margin-bottom:16px;letter-spacing:3px;font-family:'Noto Serif SC','PingFang SC','Microsoft YaHei',serif;text-shadow:0 0 40px rgba(212,175,55,0.4)}
.gold-line{width:80px;height:3px;background:linear-gradient(90deg,#D4AF37,#F5E6C8,#D4AF37);margin:0 auto 36px;border-radius:2px}

/* ===== 滚动揭示动画 (默认可见；JS 触发淡入上移作为增强，JS 失效时内容仍可见) ===== */
.reveal{opacity:1;transform:none}
.reveal.visible{animation:revealUp 0.8s cubic-bezier(0.16,1,0.3,1) both}
@keyframes revealUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.reveal-d1{animation-delay:.1s}.reveal-d2{animation-delay:.2s}
.reveal-d3{animation-delay:.3s}.reveal-d4{animation-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .reveal.visible{animation:none}
}

/* ===== 按钮 ===== */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#C9A84C,#F5E6C8,#D4AF37,#F5E6C8);color:#0B2618;
  background-size:300% 300%;
  padding:15px 38px;border-radius:30px;text-decoration:none;font-weight:700;
  font-size:16px;transition:all 0.4s;border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(212,175,55,0.3),inset 0 1px 0 rgba(255,255,255,0.3);
  position:relative;overflow:hidden;animation:btnShimmer 4s ease infinite;
  letter-spacing:1px;font-family:'Noto Sans SC',sans-serif;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 35px rgba(212,175,55,0.6)}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;color:#D4AF37;
  padding:15px 38px;border-radius:30px;text-decoration:none;font-weight:600;
  font-size:16px;transition:all 0.4s;cursor:pointer;position:relative;overflow:hidden;
  border:2px solid transparent;
  background-image:linear-gradient(#0B2618,#0B2618),linear-gradient(135deg,#C9A84C,#F5E6C8,#D4AF37);
  background-origin:border-box;background-clip:padding-box,border-box;
  letter-spacing:1px;font-family:'Noto Sans SC',sans-serif;
}
.btn-outline:hover{background-image:linear-gradient(rgba(212,175,55,0.08),rgba(212,175,55,0.08)),linear-gradient(135deg,#C9A84C,#F5E6C8,#D4AF37);color:#F5E6C8;box-shadow:0 8px 35px rgba(212,175,55,0.25);transform:translateY(-3px)}

/* ===== 卡片光效 ===== */
.card-glow{position:relative;overflow:hidden}
.card-glow::after{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(212,175,55,0.08) 0%,transparent 60%);
  opacity:0;transition:opacity 0.5s;pointer-events:none;z-index:0;
}
.card-glow:hover::after{opacity:1}
.card-glow > *{position:relative;z-index:1}

/* ===== 文本动画/渐变 ===== */
@keyframes goldTextShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes goldShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes btnShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== 医院概况 (About) 通用块 ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-img{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.about-img img{width:100%;display:block;transition:transform 0.8s}
.about-img:hover img{transform:scale(1.05)}
.about-badge{
  position:absolute;bottom:20px;right:20px;
  background:linear-gradient(135deg,#D4AF37,#F5E6C8);color:#0B2618;
  padding:10px 20px;border-radius:20px;font-size:13px;font-weight:700;
  box-shadow:0 4px 20px rgba(212,175,55,0.4);
}
.about-text h3{font-size:26px;font-weight:800;color:#D4AF37;margin-bottom:16px}
.about-text p{font-size:15px;line-height:2;color:rgba(255,255,255,0.8);margin-bottom:16px}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.about-feat{
  background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.2);
  border-radius:14px;padding:18px;text-align:center;transition:all 0.4s;
}
.about-feat:hover{background:rgba(212,175,55,0.1);border-color:#D4AF37;transform:translateY(-4px)}
.about-feat .fi{font-size:28px;margin-bottom:8px;display:block}
.about-feat h4{font-size:15px;font-weight:700;color:#D4AF37;margin-bottom:4px}
.about-feat p{font-size:12px;color:rgba(255,255,255,0.95);margin:0}
.info-list{list-style:none;margin-top:8px}
.info-list li{padding:12px 0;font-size:15px;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(212,175,55,0.12);display:flex;gap:12px;align-items:flex-start}
.info-list li i{color:#D4AF37;margin-top:4px;flex-shrink:0}
.info-list li strong{color:#D4AF37;font-weight:600;min-width:96px;display:inline-block}

/* ===== 资质/设备 卡片 ===== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.2);
  border-radius:18px;padding:32px 24px;text-align:center;transition:all 0.5s;
  position:relative;overflow:hidden;
}
.feature-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#D4AF37,#F5E6C8);transform:scaleX(0);transition:transform 0.5s;transform-origin:left}
.feature-card:hover::after{transform:scaleX(1)}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,0.5);box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.feature-card .fi{font-size:42px;margin-bottom:14px;display:block;color:#D4AF37}
.feature-card h4{font-size:19px;font-weight:700;color:#D4AF37;margin-bottom:10px}
.feature-card p{font-size:13px;color:rgba(255,255,255,0.8);line-height:1.8}

/* ===== 交通指引 ===== */
.traffic-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.traffic-card{background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.2);border-radius:20px;padding:32px}
.traffic-card h3{font-size:20px;font-weight:800;color:#D4AF37;margin-bottom:18px}
.traffic-item{display:flex;gap:14px;margin-bottom:16px}
.traffic-item i{font-size:20px;color:#D4AF37;margin-top:2px;flex-shrink:0}
.traffic-item .label{font-size:13px;color:#D4AF37;font-weight:600;margin-bottom:4px}
.traffic-item .value{font-size:14px;color:rgba(255,255,255,0.8);line-height:1.6}

/* ===== 特色疗法 (Therapy) ===== */
.therapy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.therapy-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.2);
  border-radius:20px;padding:40px 28px;text-align:center;transition:all 0.5s;
  position:relative;overflow:hidden;cursor:default;
}
.therapy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#D4AF37,#F5E6C8);transform:scaleX(0);transition:transform 0.5s;transform-origin:left}
.therapy-card:hover::before{transform:scaleX(1)}
.therapy-card:hover{transform:translateY(-10px);box-shadow:0 25px 60px rgba(0,0,0,0.5);border-color:rgba(212,175,55,0.5)}
.therapy-card i{font-size:52px;margin-bottom:20px;display:block;color:#D4AF37;transition:transform 0.5s;animation:float 3s ease-in-out infinite}
.therapy-card:hover i{transform:scale(1.15)}
.therapy-card h3{font-size:22px;font-weight:700;color:#D4AF37;margin-bottom:12px}
.therapy-card p{font-size:14px;color:rgba(255,255,255,0.8);line-height:1.8}
.therapy-tag{display:inline-block;margin-top:16px;padding:6px 18px;background:rgba(212,175,55,0.12);border-radius:20px;font-size:13px;color:#D4AF37;border:1px solid rgba(212,175,55,0.2)}

/* ===== 科室介绍 (Departments) ===== */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dept-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.15);
  border-radius:16px;padding:30px 22px;text-align:center;transition:all 0.5s;
  cursor:default;position:relative;overflow:hidden;
}
.dept-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#D4AF37,#F5E6C8);transform:scaleX(0);transition:transform 0.5s;transform-origin:left}
.dept-card:hover::after{transform:scaleX(1)}
.dept-card:hover{transform:translateY(-8px);border-color:rgba(212,175,55,0.4);box-shadow:0 15px 40px rgba(0,0,0,0.4)}
.dept-card .di{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px;transition:all 0.5s;color:#0B2618}
.dept-card:hover .di{transform:scale(1.1) rotate(-5deg)}
.dept-card h4{font-size:17px;font-weight:700;color:#D4AF37;margin-bottom:8px}
.dept-card p{font-size:13px;color:rgba(255,255,255,0.95);line-height:1.7}
.dept-detail{font-size:13px;color:rgba(255,255,255,0.8);line-height:1.8;margin-top:14px;text-align:left;display:none}
.dept-card.open .dept-detail{display:block}
.dept-toggle{display:inline-flex;align-items:center;gap:6px;color:#D4AF37;font-size:13px;margin-top:14px;cursor:pointer;transition:all 0.3s}
.dept-card.open .dept-toggle{display:none}

/* ===== 医护团队 (Experts) ===== */
.expert-group-title{font-size:22px;font-weight:800;color:#D4AF37;margin:40px 0 22px;padding-bottom:12px;border-bottom:2px solid rgba(212,175,55,0.2);display:flex;align-items:center;gap:10px}
.expert-group-title .num{font-size:14px;background:rgba(212,175,55,0.15);color:#D4AF37;border-radius:50%;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.expert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.expert-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(212,175,55,0.15);
  border-radius:16px;padding:20px;text-align:center;transition:all 0.5s;cursor:default;
  position:relative;overflow:hidden;
}
.expert-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#D4AF37,#F5E6C8);transform:scaleX(0);transition:transform 0.5s;transform-origin:left}
.expert-card:hover::after{transform:scaleX(1)}
.expert-card:hover{transform:translateY(-8px);border-color:rgba(212,175,55,0.4);box-shadow:0 15px 40px rgba(0,0,0,0.4)}
.expert-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;margin-bottom:12px;transition:transform 0.5s}
.expert-card.full-img img{aspect-ratio:auto;height:auto;object-fit:contain}
.expert-card:hover img{transform:scale(1.05)}
.expert-card h4{font-size:15px;font-weight:700;color:#D4AF37;margin-bottom:4px}
.expert-card .title{font-size:12px;color:rgba(255,255,255,0.95)}
.expert-card .desc{font-size:11px;color:rgba(255,255,255,0.9);margin-top:6px;line-height:1.5}

/* ===== 页脚 (Footer) ===== */
.footer{background:linear-gradient(180deg,#050f09,#0B2618);border-top:1px solid rgba(212,175,55,0.2);padding:60px 30px 30px;margin-top:40px}
.footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:40px;margin-bottom:40px}
.footer-brand p{font-size:14px;line-height:1.8;color:rgba(255,255,255,0.95);margin:16px 0}
.footer h4{color:#D4AF37;font-size:16px;margin-bottom:16px;font-weight:600}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:14px;transition:color 0.3s}
.footer-links a:hover{color:#D4AF37}
.footer-contact{font-size:14px;line-height:2;color:rgba(255,255,255,0.95)}
.footer-contact .fc-item{display:flex;gap:10px;margin-bottom:12px}
.footer-contact i{color:#D4AF37;margin-top:4px;flex-shrink:0}
.footer-bottom{max-width:1300px;margin:0 auto;padding-top:20px;border-top:1px solid rgba(212,175,55,0.1);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,0.85);flex-wrap:wrap;gap:8px}
.footer-bottom a{color:rgba(255,255,255,0.9);text-decoration:none}
.footer-bottom a:hover{color:#D4AF37}

/* ===== 返回顶部 ===== */
.back-top{
  position:fixed;bottom:30px;right:30px;width:48px;height:48px;
  background:linear-gradient(135deg,#D4AF37,#F5E6C8);color:#0B2618;
  border:none;border-radius:50%;cursor:pointer;font-size:18px;
  box-shadow:0 4px 20px rgba(212,175,55,0.4);transition:all 0.3s;
  opacity:0;transform:translateY(20px);z-index:999;display:flex;align-items:center;justify-content:center;
}
.back-top.show{opacity:1!important;transform:none!important;pointer-events:auto!important}
.back-top:hover{transform:translateY(-4px)}

/* ===== 响应式 ===== */
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .therapy-grid{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:repeat(2,1fr)}
  .expert-grid{grid-template-columns:repeat(4,1fr)}
  .traffic-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .section{padding:56px 20px}
  .section-header h2{font-size:28px}
  .feature-grid{grid-template-columns:1fr}
  .therapy-grid{grid-template-columns:1fr}
  .dept-grid{grid-template-columns:1fr 1fr}
  .expert-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .expert-grid{grid-template-columns:repeat(2,1fr)}
  .dept-grid{grid-template-columns:1fr}
  .btn-primary,.btn-outline{min-height:44px;padding:12px 28px;font-size:14px}
  input,textarea,select{min-height:44px;font-size:16px}
}