/*
 * 粤医美 · 首页专属样式
 * 来源：design-reference/homepage-design.html
 */

/* ── Hero ──────────────────────────────────────────── */
.home-hero {
  padding: var(--sp-9) 0 var(--sp-8);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.4;
  pointer-events: none;
}
.home-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.home-hero__id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-bottom: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  letter-spacing: 0.05em;
}
.home-hero__id span::before { content: "// "; opacity: 0.5; }
.home-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
  max-width: 14ch;
  font-feature-settings: 'ss01';
}
.home-hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.home-hero__sub {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-bottom: var(--sp-7);
  max-width: 56ch;
  line-height: 1.55;
}
.home-hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── 数据看板 ────────────────────────────────────────── */
.stats { border-bottom: 1px solid var(--line); background: var(--bg-paper); }
.stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat { padding: var(--sp-6) var(--sp-5); border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-3); display: flex; justify-content: space-between; }
.stat__delta { font-size: 10px; color: var(--positive); font-weight: 500; }
.stat__value { font-family: var(--font-display); font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--sp-2); }
.stat__unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.05em; }
.stat__sub { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-family: var(--font-mono); }

/* ── 首页 section 通用（与 main.css 分开避免冲突）──── */
.home-section {
  padding: var(--sp-9) 0;
  border-bottom: 1px solid var(--line);
}
.home-section__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-7);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--sp-7);
}
.home-section__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.12em; margin-bottom: var(--sp-3); }
.home-section__title { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin-bottom: var(--sp-3); }
.home-section__desc { font-size: var(--fs-md); color: var(--ink-soft); max-width: 56ch; }
.home-section__cta a { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--ink); white-space: nowrap; transition: all 0.15s ease; }
.home-section__cta a:hover { background: var(--ink); color: var(--bg); }
.home-section__body { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }

/* ── 城市入口 ────────────────────────────────────────── */
.cities { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.city {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5);
  background: var(--bg-paper);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.city:hover { background: var(--ink); color: var(--bg); }
.city:hover .city__name  { color: var(--bg); }
.city:hover .city__count { color: var(--accent); }
.city:hover .city__sub   { color: rgba(255,255,255,0.6); }
.city:hover .city__arrow { color: var(--accent); }
.city--inactive { background: var(--bg-alt); pointer-events: none; }
.city--inactive .city__name { color: var(--ink-mute); }
.city__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-5); }
.city__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; }
.city__pinyin { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); letter-spacing: 0.1em; }
.city__bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.city__count-wrap { display: flex; align-items: baseline; gap: var(--sp-2); }
.city__count { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; transition: color 0.15s ease; }
.city__unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); }
.city__sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); letter-spacing: 0.05em; }
.city__arrow { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--ink-mute); }
.city__badge { position: absolute; top: var(--sp-3); right: var(--sp-3); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; background: var(--ink-mute); color: var(--bg); padding: 2px 6px; text-transform: uppercase; }

/* ── 排行榜（深色背景） ──────────────────────────────── */
.ranking { background: var(--ink); color: var(--bg); padding: var(--sp-9) 0; border-bottom: 1px solid var(--line); }
.ranking__head { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6) var(--sp-7); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); }
.ranking__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.12em; margin-bottom: var(--sp-3); }
.ranking__title { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: var(--sp-3); }
.ranking__title em { font-style: italic; color: var(--accent); }
.ranking__desc { font-size: var(--fs-md); color: rgba(255,255,255,0.6); max-width: 56ch; }
.ranking__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); text-align: right; }
.ranking__meta strong { color: var(--accent); font-weight: 400; }
.ranking__body { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.rank-table-head { display: grid; grid-template-columns: 60px 1fr 160px 200px 100px 60px; padding: var(--sp-3) 0; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.1); gap: var(--sp-4); }
.rank-row { display: grid; grid-template-columns: 60px 1fr 160px 200px 100px 60px; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: center; text-decoration: none; color: var(--bg); transition: all 0.15s ease; }
.rank-row:hover { background: rgba(255,255,255,0.03); padding-left: var(--sp-3); }
.rank-row__num { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; color: rgba(255,255,255,0.4); letter-spacing: -0.02em; }
.rank-row__num--top3 { color: var(--accent); }
.rank-row__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.01em; }
.rank-row__sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: rgba(255,255,255,0.4); margin-top: 2px; letter-spacing: 0.02em; }
.rank-row__district { font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
.rank-row__procedures { font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }
.rank-row__score { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--bg); display: flex; align-items: baseline; gap: 4px; }
.rank-row__grade { font-family: var(--font-display); font-size: var(--fs-md); color: var(--accent); font-weight: 500; }
.rank-row__arrow { text-align: right; font-family: var(--font-mono); color: rgba(255,255,255,0.3); }
.rank-row:hover .rank-row__arrow { color: var(--accent); }
.ranking__footer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.4); }
.ranking__footer a { color: var(--accent); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── 方法论卡片 ──────────────────────────────────────── */
.methodology { padding: var(--sp-9) 0; border-bottom: 1px solid var(--line); }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-5); }
.method-card { background: var(--bg-paper); border: 1px solid var(--line); padding: var(--sp-6); position: relative; }
.method-card__num { font-family: var(--font-display); font-size: 80px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--accent); margin-bottom: var(--sp-4); }
.method-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.method-card__desc { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--sp-4); }
.method-card__sources { padding-top: var(--sp-4); border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); letter-spacing: 0.05em; }

/* ── API CTA ─────────────────────────────────────────── */
.api-cta { padding: var(--sp-9) 0; background: var(--ink); color: var(--bg); border-bottom: 1px solid var(--ink); }
.api-cta__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.api-cta__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.12em; margin-bottom: var(--sp-4); }
.api-cta__title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: var(--sp-4); }
.api-cta__desc { font-size: var(--fs-md); color: rgba(255,255,255,0.7); margin-bottom: var(--sp-6); max-width: 50ch; }
.api-cta__buttons { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.api-cta__btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 14px 24px; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all 0.15s ease; }
.api-cta__btn--primary { background: var(--accent); color: var(--bg); }
.api-cta__btn--primary:hover { background: var(--bg); color: var(--ink); }
.api-cta__btn--ghost { background: transparent; color: var(--bg); border: 1px solid rgba(255,255,255,0.3); }
.api-cta__btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.api-code { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); padding: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; color: rgba(255,255,255,0.85); overflow-x: auto; }
.api-code__header { display: flex; justify-content: space-between; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.api-code .k { color: var(--accent); }
.api-code .s { color: #b8c97c; }
.api-code .c { color: rgba(255,255,255,0.4); }
.api-code .n { color: #e4a572; }

/* ── SECTION 05 · FOR AI/RESEARCHERS ───────────────────── */
.ai-block { padding: var(--sp-9) 0; background: var(--bg-alt); border-top: 1px solid var(--line); }
.ai-block__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.ai-block__head { margin-bottom: var(--sp-7); }
.ai-block__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.12em; margin-bottom: var(--sp-4); }
.ai-block__title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 var(--sp-4); color: var(--ink); }
.ai-block__title em { font-style: normal; color: var(--accent); }
.ai-block__desc { font-size: var(--fs-md); color: var(--ink-soft); max-width: 70ch; margin: 0; line-height: 1.6; }

.ai-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.ai-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--bg-paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s ease;
  position: relative;
}
.ai-card:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.ai-card__icon {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-4);
}
.ai-card:hover .ai-card__icon { background: var(--accent); color: var(--bg); }
.ai-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.ai-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  flex: 1;
}
.ai-card:hover .ai-card__desc { color: rgba(255,255,255,0.6); }
.ai-card__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.ai-card:hover .ai-card__cta {
  color: var(--bg);
  border-top-color: rgba(255,255,255,0.2);
}

.ai-block__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.ai-block__foot code {
  background: var(--bg-paper);
  padding: 2px 6px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.ai-block__foot a {
  color: var(--accent);
  text-decoration: none;
}
.ai-block__foot a:hover { text-decoration: underline; }

/* ── 响应式 ────────────────────────────────────────── */
/* ── 研究报告区块 ────────────────────────────────────── */
.home-section--research { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.report-cards { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; margin-top: 4px; }
.report-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-paper); border: 1px solid var(--line);
  padding: 24px 28px; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s;
}
.report-card:hover { border-color: var(--ink); }
.report-card--featured { border-color: var(--ink); border-width: 2px; }
.report-card__badge { font-size: 9px; letter-spacing: 0.14em; color: var(--accent); }
.report-card__meta { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); }
.report-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.3; }
.report-card--featured .report-card__title { font-size: 22px; }
.report-card__abstract { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.report-card__stats { display: flex; gap: 16px; font-size: 11px; color: var(--ink-mute); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.report-card__cta { font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }

@media (max-width: 980px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: 1fr; }
  .rank-table-head, .rank-row { grid-template-columns: 60px 1fr 100px 60px; }
  .rank-table-head__procedures, .rank-table-head__district,
  .rank-row__procedures, .rank-row__district { display: none; }
  .api-cta__inner { grid-template-columns: 1fr; }
  .home-section__head { flex-direction: column; align-items: flex-start; }
  .ranking__head { flex-direction: column; align-items: flex-start; }
  .ranking__meta { text-align: left; }
  .ai-block__grid { grid-template-columns: repeat(2, 1fr); }
  .report-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .report-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .stats__inner { grid-template-columns: 1fr; }
  .stat { border-right: none !important; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
  .cities { grid-template-columns: 1fr; }
  .api-cta__buttons { flex-direction: column; align-items: stretch; }
  .ai-block__grid { grid-template-columns: 1fr; }
  .ai-block__foot { flex-direction: column; align-items: flex-start; }
}

/* ── 垂类 Tab 切换 ──────────────────────────────────────────── */
.vertical-tabs {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6) 0;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.vertical-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.vertical-tab:hover { color: var(--ink-soft); }
.vertical-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* Default: show medical aesthetics, hide dental */
#pane-dental { display: none; }
.vert-tabs--dental #pane-yimei  { display: none; }
.vert-tabs--dental #pane-dental { display: block; }
.city--empty { opacity: 0.45; }