/* ============================================================
   LIZARD 官网 · 浅色内容页样式（设计规范 v2 · 剧场感版 · 改3）
   改3：红色"元素级大胆"——大编号/粗竖线/红标题/红描边标签，
        不用大色块底色（用户红线）。
        保留改2：文字 400 字重 + 加深、金色花环水印。
   ============================================================ */

:root {
  --green-deep:  #034e4a;
  --green-darker:#022e2b;
  --gold:        #d89527;
  --gold-light:  #e8b840;
  --burgundy:    #750908;
  --warm-white:  #f6f4ea;
  --ink:         #2d2d2d;
  --gray-cool:   #4a4a4a;
  --gray-border: #e8e5db;
  --font-heading:'Source Han Sans SC','Noto Sans SC','思源黑体','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:   'Source Han Sans SC','Noto Sans SC','思源黑体','PingFang SC','Microsoft YaHei',sans-serif;
  --font-serif:  Georgia,'Songti SC','Noto Serif SC',serif;
}

body {
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}
h1, h2 { font-weight: 300; }
h3, h4 { font-weight: 400; }

/* ── 页头 ────────────────────────────────────────────────── */
.page-header {
  padding: 2.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-header .container { position: relative; z-index: 1; }
.page-kicker {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);      /* 改3：红色描边胶囊，更出挑 */
  padding: 0.35rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.page-header h1 {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 200;
  letter-spacing: 0.04em;
}
.page-header h1 .en {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-cool);
  margin-top: 0.6rem;
}
.page-lead {
  max-width: 560px;
  margin-top: 1.8rem;
  color: var(--gray-cool);
  font-size: 1.05rem;
  font-weight: 400;
}

/* 金色花环水印：三环 + 八颗装饰点 */
.ring-mark {
  position: absolute;
  right: 3%;
  top: calc(var(--nav-height) + 2rem);
  width: 260px;
  height: 260px;
  opacity: 0.4;
  pointer-events: none;
}

/* ── section 标题 ────────────────────────────────────────── */
.section { padding: 4.5rem 0; }
.section-alt { background: #ffffff; }
.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 3rem;
}
.section-title .en {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray-cool);
  margin-top: 0.5rem;
}
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 1rem auto 0;
}

/* ── 乐器卡片 ────────────────────────────────────────────── */
.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.instrument-card {
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 2rem 1.8rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.instrument-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.instrument-card .ic-tag {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 400;
  margin-bottom: 0.8rem;
}
.instrument-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.instrument-card p { font-size: 0.9rem; color: var(--gray-cool); font-weight: 400; margin: 0; }

/* ── 活动板块（改3：白底，红色元素级大胆，非色块） ────────── */
.section-red { background: #ffffff; }
.event-list { display: flex; flex-direction: column; gap: 1.25rem; }
.event-item {
  display: flex;
  gap: 1.8rem;
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 2rem 2.2rem;
  border-left: 5px solid var(--burgundy);   /* 改3：加粗红竖线 */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.event-num {
  font-family: var(--font-serif);
  font-size: 3rem;                          /* 改3：超大红色编号 */
  line-height: 1;
  color: var(--burgundy);
  font-weight: 400;
  flex-shrink: 0;
}
.event-body h3 { color: var(--burgundy); font-size: 1.2rem; font-weight: 400; margin-bottom: 0.3rem; }
.event-time {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--burgundy);
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.event-body p { font-size: 0.95rem; color: var(--gray-cool); font-weight: 400; margin: 0; }

/* ── 学校 / 案例列表 ────────────────────────────────────── */
.school-list, .case-list {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
}
.school-list li, .case-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-border);
  font-size: 0.98rem;
  color: var(--gray-cool);
  font-weight: 400;
}
.school-list li:last-child, .case-list li:last-child { border-bottom: none; }
.school-list strong, .case-list strong { color: var(--ink); font-weight: 500; }
.school-list .year {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-left: 0.6rem;
}

/* ── 文字区 ──────────────────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { color: var(--gray-cool); font-weight: 400; margin-bottom: 1.2rem; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose .num {
  color: var(--burgundy);
  font-size: 1.35em;
  font-weight: 600;
  font-family: var(--font-serif);
}

/* ── 胶囊按钮 ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.8rem 2.4rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  transition: all 0.3s;
}
.btn:hover { background: var(--gold); color: #ffffff; }
.btn-solid { background: var(--gold); color: #ffffff; border-color: var(--gold); }
.btn-solid:hover { background: var(--gold-light); }

/* ════════════════════════════════════════════════════════════
   全站框架 · 浅色改造（v2 补充）
   style.css 里这几处仍用旧深色，此处覆盖为浅色：
   导航栏 / 首页模块卡 / 页脚 / hero 副标题
   ════════════════════════════════════════════════════════════ */

/* ── 导航栏：浅色毛玻璃 ── */
.nav {
  background: rgba(246, 244, 234, 0.9);
  border-bottom: 1px solid var(--gray-border);
}
.nav-logo span { color: var(--ink); }
.nav-links a { color: var(--ink); }
.nav-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-toggle span { background: var(--ink); }

/* ── 首页模块卡：白底 · 圆角 · 细阴影 ── */
.module-grid { gap: 1.5rem; }
.module-card {
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.module-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.module-card h3 { color: var(--green-deep); }
.module-card p { color: var(--gray-cool); }
.module-card .card-link { color: var(--gold); }

/* ── 页脚：深绿锚点 · 浅字 ── */
.footer {
  background: var(--green-darker);
  border-top: 1px solid var(--gray-border);
}
.footer p { color: rgba(246, 244, 234, 0.6); }

/* ── hero 副标题：深绿底上的浅字 ── */
.hero-subtitle { color: rgba(246, 244, 234, 0.75); }

/* ── 移动端：浅色全屏菜单 ── */
@media (max-width: 768px) {
  /* ⚠️ 关键修复（2026-09-11）：.nav 的 backdrop-filter 会让子元素 .nav-links 的
     position:fixed 相对 .nav（仅 nav 高度）定位 → 全屏菜单塌成一条、导航项散落、首项被遮。
     移动端禁用毛玻璃即可恢复"相对视口"的全屏抽屉。 */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links { background: var(--warm-white); }

  /* 导航 logo 缩小：nav 高 64px 而原 logo 高 62px，手机上几乎顶满会与内容打架 */
  .nav-logo img { height: 42px; }
  /* 装饰 logo（品牌亮点，必须保留）：手机端改为文档流内居中，显示在大标题下方。
     原右上角绝对定位会与标题左右打架；若需放到标题「上方」，把本段 CSS 的逻辑位置保持，
     并调整 HTML 中 img.bg-mark 的位置即可。 */
  .bg-mark {
    position: static;
    display: block;
    width: 132px;
    height: auto;
    margin: 1.6rem auto 0;
    opacity: 0.95;
    right: auto;
    top: auto;
  }
}

/* ── 数据墙（品牌故事统计卡） ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.stat-card {
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 1.8rem 1.2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--burgundy);
}
.stat-label {
  color: var(--gray-cool);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ── 五阶成长卡片（学术体系） ── */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.stage-card {
  background: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 1.6rem 1.2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.stage-code {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.stage-name { color: var(--ink); font-size: 1rem; margin-top: 0.4rem; }
.stage-meta { color: var(--gray-cool); font-size: 0.82rem; margin-top: 0.3rem; }

/* ── 内容页文字色修复（覆盖 style.css 的深色残留） ── */
.page-header h1 { color: var(--ink); }
.content-page .prose h3 { color: var(--green-deep); margin: 1.5rem 0 0.8rem; }

/* ── 首页「探索 LIZARD 中国」区：去掉深绿底 ── */
.modules { background: transparent; }

/* ── 页脚联系方式（联系我们下移至页脚） ── */
.footer-contact {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(246, 244, 234, 0.15);
}
.footer-contact p { color: rgba(246, 244, 234, 0.85); }
.footer-contact .fc-name {
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* ═══ 全站导航统一（与首页一致）：绿色 logo + 绿色字 ═══ */
.nav-logo img { height: 62px; width: auto; display: block; }
.nav-links a { color: var(--green-deep); }
.nav-links a:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }
.nav-links a.active { color: var(--green-deep); border-bottom-color: var(--green-deep); }
.nav-toggle span { background: var(--green-deep); }

/* ═══ 全站页脚统一：米白底 · 墨绿字 · 二维码行 ═══ */
.footer { background: var(--warm-white); border-top: 1px solid var(--gray-border); }
.footer p { color: var(--ink); font-weight: 600; }
.footer .footer-name { color: var(--green-deep); font-weight: 700; font-size: 1.25rem; }
.footer .footer-en { letter-spacing: 0.14em; }
.footer .footer-since { font-weight: 400; }
.footer .footer-contact { border-top-color: rgba(45,45,45,0.2); }
.footer .footer-contact p { color: var(--ink); font-weight: 600; }
.footer .footer-contact .fc-name { color: var(--green-deep); font-weight: 700; }
.footer-qr-row { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.qr-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.footer-qr { width: 140px; height: 140px; display: block; object-fit: cover; border: 2px solid rgba(45,45,45,0.25); border-radius: 8px; }
.qr-label { font-size: 0.78rem; color: var(--ink); font-weight: 600; }
.qr-circle { border-radius: 50%; }
.qr-lg { width: 140px; height: 140px; }