/* ==========================================================================
   伏羲智库机构主页 —— 样式
   取值对齐数聚 PC 端「聚号主页」：
     shuju_client/lib/business/personal_center/personal_center_detail/
       personal_center_detail_pc.dart
       widgets/personal_center_detail_head_pc.dart
       sub_pages/member_list/personal_detail_member_list.dart
       ../../common/widgets/water_fall/shuju_common_water_fall_item.dart
       ../../app/theme/app_theme.dart
   注意：数聚 PC 端存在两套 .pw 缩放（base_struct 的 1:1 与仓库内 num_ext 的 ×0.7），
   本文件统一按其 PC 端「最终像素」写死，不再做二次缩放。
   ========================================================================== */

/* ---------- 字体：数聚使用普惠体 ---------- */
@font-face {
  font-family: 'PuHuiTi';
  src: url('../assets/fonts/puhui-mini.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PuHuiTi';
  src: url('../assets/fonts/puhui-bold.ttf') format('truetype');
  font-weight: 500 700;
  font-display: swap;
}

/* ---------- 设计变量（亮色 = 数聚默认主题） ---------- */
:root {
  --page-bg: #F6F8FA;             /* pageBgColor */
  --card-bg: #FFFFFF;             /* cardBgColor */
  --title-1: #1A1818;             /* firstLevelTitleColor */
  --title-2: rgba(26, 24, 24, .6);/* secondLevelTitleColor */
  --title-3: rgba(26, 24, 24, .4);/* thirdLevelTitleColor */
  --c-white: #242424;             /* cWhite（亮色下其实是深灰，数聚的命名陷阱） */
  --theme: #7659D1;               /* themeColor / tabSelectTextColor */
  --tab-select: #7659D1;
  --tab-unselect: rgba(26, 24, 24, .4);
  --line: rgba(26, 24, 24, .1);   /* cardLineColor */
  --member-bg: rgba(36, 36, 36, .05);
  --member-border: rgba(36, 36, 36, .05);
  --verified: #5FB69D;
  --hero-bg: url('../assets/img/hero-bg-light.webp');
  --placeholder-bg: rgba(26, 24, 24, .04);
}

[data-theme='dark'] {
  --page-bg: #191919;
  --card-bg: rgba(255, 255, 255, .05);
  --title-1: #FFFFFF;
  --title-2: rgba(255, 255, 255, .6);
  --title-3: rgba(255, 255, 255, .4);
  --c-white: #FFFFFF;
  --tab-select: #FFFFFF;
  --tab-unselect: rgba(255, 255, 255, .4);
  --line: rgba(255, 255, 255, .1);
  --member-bg: rgba(255, 255, 255, .05);
  --member-border: rgba(255, 255, 255, .05);
  --hero-bg: url('../assets/img/hero-bg-dark.webp');
  --placeholder-bg: rgba(255, 255, 255, .04);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--title-1);
}

body {
  font-family: 'PuHuiTi', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ==========================================================================
   顶部导航条

   基础参数取自伏羲智库官网（www.fuxiinstitution.org.cn）的 .site-header / .site-nav：
     header 高 80px、吸顶；nav 最大宽 1440px、左右内边距 64px（窄屏 20px）
     CN/EN 字号 14、字重 700、字距 .7px、颜色 #660016

   视觉强化（方案 6，见 docs/nav-variants.html）：
     原版底 #f9f9fbe6 与页面底 #F6F8FA 对比度仅 1.011:1、下边线 1.142:1，
     低于肉眼分辨阈值，导致导航条「不像一条条」。这里四件事一起做：
       1) 底色改纯白 + 品牌色细分隔线    → 底色 1.065:1、边线 1.337:1
       2) 顶部 4px 品牌色渐变条          → 13.32:1，一眼可见的「官方感」
       3) 品牌色淡投影（不用黑，避免发灰）→ 滚动时与内容分层
       4) logo 46→52px、CN/EN 改胶囊按钮 → 内容更有分量，右侧不再单薄
   ========================================================================== */

/* 顶部品牌色条：位于吸顶导航之上，随页面滚走，不占吸顶高度
   实测对纯白导航底：左端 13.32:1、中段 9.96:1、右端 7.34:1（现状整体仅 1.011:1） */
.brand-bar {
  height: 4px;
  background: linear-gradient(90deg, #660016, #861B2A 55%, #A81B2E);
}

/* 深色模式下原品牌红对 #191919 只有 1.32~2.40:1，太弱；
   换用提亮后的渐变，实测 2.40 / 3.38 / 4.57:1 */
[data-theme='dark'] .brand-bar {
  background: linear-gradient(90deg, #A81B2E, #C4394D 55%, #D9556A);
}

.site-header {
  height: 80px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(102, 0, 22, .14);
  box-shadow: 0 1px 2px rgba(26, 24, 24, .03), 0 6px 20px rgba(102, 0, 22, .07);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 1440px;
  height: 80px;
  margin: 0 auto;
  padding: 0 64px;
  gap: 24px;
}

.site-logo {
  display: block;
  flex-shrink: 0;
  width: 214px;                 /* 191 → 214（高 46 → 52），占条高 57.5% → 65% */
  height: 52px;
}

.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CN/EN：由纯文字改为胶囊按钮，右侧不再是一个孤零零的字符 */
.lang-toggle {
  flex-shrink: 0;
  padding: 7px 15px;
  border: 1px solid rgba(102, 0, 22, .22);
  border-radius: 999px;
  background: none;
  font-family: 'Inter', 'PuHuiTi', 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .7px;
  color: #660016;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s;
}

.lang-toggle:hover {
  background: #660016;
  border-color: #660016;
  color: #FFFFFF;
}

/* 深色模式：品牌色系整体提亮，投影改用黑色（深底上红色投影不可见） */
[data-theme='dark'] .site-header {
  /* 原为 #191919：与页面底完全同色（1.000:1），深色下没有「条」的感觉；
     抬到 #212121 后有 1.092:1 的色阶差，配合边线 1.460:1 形成浮起的面 */
  background: #212121;
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
}

[data-theme='dark'] .site-logo img { filter: brightness(1.08); }

[data-theme='dark'] .lang-toggle {
  color: #E7A9B4;
  border-color: rgba(231, 169, 180, .30);
}

[data-theme='dark'] .lang-toggle:hover {
  background: #E7A9B4;
  border-color: #E7A9B4;
  color: #191919;
}

/* ==========================================================================
   Hero —— 头图 + 头像 + 名称 + 数岛标识 + 认证 + 简介
   数聚：背景图 BoxFit.fill（拉伸铺满），内容左右各留 10% 视口宽度
   ========================================================================== */
.hero {
  background-image: var(--hero-bg);
  background-size: 100% 100%;   /* 对齐 BoxFit.fill */
  background-repeat: no-repeat;
  padding-bottom: 28px;         /* 40.pw × 0.7 */
}

.hero__inner {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 28px;
}

/* hero 标题
   原版是 20px / 细体（FontWeight.lerp(w300,w400,.5)），和正文几乎没差别，不像标题。
   基础类只管排版与颜色，字号字重交给下面的预设；默认预设见 config.heroTitleStyle。 */
.hero__name {
  margin: 0;
  color: var(--title-1);
  line-height: 1.22;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 长机构名（如"中央网信办…研究基地（伏羲智库）"）允许折两行 */
  -webkit-box-orient: vertical;
}

/* 预设 bold：粗黑体，稳重通用（默认） */
.hero__name--bold {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .04em;
}

/* 预设 serif：衬线，偏文气/学术，智库气质更强 */
.hero__name--serif {
  font-family: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif CJK SC',
               'Noto Serif SC', 'SimSun', serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .06em;
}

/* 预设 wide：大字距细体，接近刊头排法 */
.hero__name--wide {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .2em;
  margin-right: -.2em;          /* 抵掉最后一个字后的字距，保持左对齐视觉 */
}

/* 可选装饰：标题下的品牌色短线（给 hero__name 同时加 --rule 类启用） */
.hero__name--rule { padding-bottom: 14px; position: relative; }

.hero__name--rule::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #660016, #A81B2E);
}

[data-theme='dark'] .hero__name--rule::after {
  background: linear-gradient(90deg, #C4394D, #D9556A);
}

/* 简介：完整展示（不截断、无展开按钮）
   做成带品牌色装饰的卡片，避免一大段文字直接飘在渐变底上显得像草稿 */
.hero__intro-wrap {
  position: relative;
  margin-top: 16px;
  padding: 20px 26px 20px 24px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(102, 0, 22, .10);
  border-radius: 10px;
  overflow: hidden;
}

/* 左侧品牌色竖条：与导航条顶部品牌条呼应，作为视觉锚点 */
.hero__intro-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #660016, #861B2A 55%, #A81B2E);
}

.hero__intro {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--title-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 深色模式：半透明白底在深底上会发灰，改用极淡白叠加 */
[data-theme='dark'] .hero__intro-wrap {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .10);
}

[data-theme='dark'] .hero__intro-wrap::before {
  background: linear-gradient(180deg, #A81B2E, #C4394D 55%, #D9556A);
}

/* ==========================================================================
   内容区 —— 左留白 10% + 内容卡 80% + 右留白 10%
   ========================================================================== */
.body {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
}

.body__gutter { width: 10%; flex: none; }

.card {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 0 16.8px 24px;       /* horizontal 24.pw × 0.7 */
}

/* ==========================================================================
   tab 滑动栏（数聚用 isScrollable 的 TabBar，无下划线指示器）
   ========================================================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: 24px;                    /* labelPadding right 24 */
  padding: 14px 2px 10px;       /* top 20.pw×0.7；底 10.h */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;              /* PlatformUtil.isPC ? 16.pw : 14.w */
  font-weight: 400;
  color: var(--tab-unselect);
  white-space: nowrap;
  transition: color .15s;
}

.tab[aria-selected='true'] {
  color: var(--tab-select);
  font-weight: 500;
}

.tab:hover { color: var(--tab-select); }

/* ==========================================================================
   卡片网格（数聚 PC 端 3 列等宽；封面 4:3 + 角标 + 标题）
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 10px;               /* 竖向 10 + 文字间距，横向 10 */
  padding-top: 6px;
}

.item { min-width: 0; }

/* 可点击卡片（跳数聚网页端详情页）：整卡是 <a>，需要重置链接样式并给悬停反馈 */
.item--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.item--link .item__cover {
  transition: transform .22s ease, box-shadow .22s ease;
}

.item--link:hover .item__cover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(102, 0, 22, .16);
}

.item--link .item__title { transition: color .18s ease; }

.item--link:hover .item__title { color: #660016; }

.item--link:focus-visible {
  outline: 2px solid #660016;
  outline-offset: 3px;
  border-radius: 8px;
}

[data-theme='dark'] .item--link:hover .item__title { color: #E7A9B4; }

[data-theme='dark'] .item--link:hover .item__cover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.item__cover {
  aspect-ratio: 4 / 3;
  border-radius: 8.4px;         /* 12.pw × 0.7 */
  overflow: hidden;
  background: var(--placeholder-bg);
}

.item__cover img { width: 100%; height: 100%; object-fit: cover; }

.item__title {
  margin: 11.2px 0 0;           /* 16.pw × 0.7 */
  font-size: 18.2px;            /* 26.pw × 0.7 */
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 角标（内容类型标签） */
.chip {
  display: inline-block;
  margin-right: 2.1px;          /* 3.pw × 0.7 */
  padding: 2.8px 5.6px;         /* v 4.pw×0.7 / h 8.pw×0.7 */
  border-radius: 4.2px;         /* 6.pw × 0.7 */
  font-size: 12.6px;            /* 18.pw × 0.7 */
  font-weight: 500;
  line-height: 1.2;
  vertical-align: 2px;
}

.item__date {
  margin: 8.4px 0 0;            /* 12.pw × 0.7 */
  font-size: 14px;
  color: var(--title-3);
}

/* ==========================================================================
   合作伙伴成员卡（数聚成员列表）
   ========================================================================== */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0 2px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--title-3);
  transition: color .15s, border-color .15s, background-color .15s;
}

.pill.is-active {
  color: var(--tab-select);
  border-color: var(--theme);
  background: rgba(118, 89, 209, .1);
}

.pill__count { font-size: 12px; opacity: .7; }

.grid--members {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 20px;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;            /* 400.pw（成员卡固定高度） */
  padding: 50px 24px 16px;
  border-radius: 6px;
  background: var(--member-bg);
  border: 1px solid var(--member-border);
}

.member__avatar-wrap { position: relative; width: 100px; height: 100px; flex: none; }

.member__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--placeholder-bg);
}

.member__name {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--c-white);
  text-align: center;
  opacity: .9;
}

.member__job {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-white);
  opacity: .4;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   状态：加载 / 空 / 错误
   ========================================================================== */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  text-align: center;
}

.state--empty .state__img { width: 250px; height: 250px; opacity: .9; }

.state__text { margin: 0; font-size: 13px; color: var(--title-3); }

.state--error { align-items: flex-start; text-align: left; }

.state__title { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--title-1); }

.state__detail {
  margin: 0 0 12px;
  max-width: 100%;
  padding: 12px;
  border-radius: 6px;
  background: var(--member-bg);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--title-2);
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.state__hint { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--title-3); }
.state__hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--member-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.spinner {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border: 2px solid var(--line);
  border-top-color: var(--theme);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.spinner--sm { width: 16px; height: 16px; margin: 0; border-width: 1.5px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* 加载更多 */
.more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0 8px;
  font-size: 13px;
  color: var(--title-3);
}

.more__end { font-size: 12.5px; color: var(--title-3); opacity: .8; }

.sentinel { height: 1px; }

/* ==========================================================================
   页脚
   ========================================================================== */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px 32px;
  font-size: 12.5px;
  color: var(--title-3);
}

.footer__sep { opacity: .5; }

/* ==========================================================================
   响应式：窄屏退化为 2 列、左右留白收窄（数聚移动端为 2 列）
   ========================================================================== */
@media (max-width: 900px) {
  .site-nav { padding: 0 20px; gap: 14px; }
  .site-logo { width: 158px; height: 38px; }
  .lang-toggle { padding: 6px 12px; font-size: 13px; }
  .hero__inner { padding-left: 16px; padding-right: 16px; }
  .body__gutter { width: 0; }
  .card { border-radius: 8px; padding: 0 12px 20px; margin: 0 8px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .member { min-height: 0; padding: 24px 12px 16px; }
  .member__avatar-wrap, .member__avatar { width: 64px; height: 64px; }
  .hero__name--bold { font-size: 24px; }
  .hero__name--serif { font-size: 26px; }
  .hero__name--wide { font-size: 21px; }
  .hero__intro { font-size: 14.5px; line-height: 1.8; }
  .hero__intro-wrap { padding: 16px 16px 16px 18px; border-radius: 8px; }
  .hero__inner { padding-top: 20px; }
  .item__title { font-size: 15px; }
  .tab { font-size: 14px; }
  .tabs { gap: 16px; }
  .item__cover { border-radius: 8px; }
}