/* ============================================================
 * 协同软件官网 — 多级下拉导航 (浅色版本)
 * 6 大一级栏目 + 悬停展开二级 + 部分三级
 * VI 风格：白底 + 协同橙 + 柔影
 * ============================================================ */

/* ===== 一级导航布局 ===== */
.nav__primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav__item {
  position: relative;
  list-style: none;
}

.nav__item--has-dropdown {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  padding: var(--space-3) var(--space-4);
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-brand-primary);
  border-radius: 2px;
  transition: width var(--duration-base) var(--ease-out);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-brand-primary);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 60%;
}

.nav__caret {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.55;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav__item--has-dropdown:hover .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--color-brand-primary);
}

/* ===== 二级下拉面板（VI 风格：白底 + 柔影 + 边框） ===== */
.nav__dropdown {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 720px;
  max-width: 960px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--space-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
  z-index: 100;
  pointer-events: none;
}

.nav__item--has-dropdown:hover > .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* 桥（保持 hover） */
.nav__item--has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  display: block;
}

/* ===== 两列下拉面板（训练营专用，2026-09-22） =====
 * 默认 .nav__dropdown 是 3 列网格 + min-width:720px；
 * 训练营只有 2 组，沿用默认会在右侧留出一整列空白。
 * 这里收敛为 2 列，并把整体宽度收到贴合内容的尺寸。
 *
 * ⚠️ 必须写在 .nav__dropdown 之「后」：两者特异度相同 (0,1,0)，
 *    靠书写顺序取胜；放在前面会被 base 的 gap / min-width 覆盖
 *    （实测 column-gap 仍是 40px、width 仍是 720px）。
 */
.nav__dropdown--2col {
  /* 与场景中心同款：左栏承载多组、右栏承载一组（2026-10-21 李伟伟改）
   * 宽度按内容自适应：max-content + 列宽 minmax，不作为固定宽度 */
  grid-template-columns: max-content max-content;
  min-width: 0;
  width: max-content;
  max-width: 820px;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6) var(--space-6);
}
/* 右栏分隔（左栏 → 右栏之间的竖线），与场景中心一致 */
.nav__dropdown--2col > .nav__dropdown-col:last-child {
  border-left: 1px solid var(--color-border-soft);
  padding-left: var(--space-6);
}

/* 条目行距与组间距（2026-10-21 李伟伟：行距调整到视觉舒服的高度） */
.nav__dropdown--2col .nav__dropdown-third li {
  margin-bottom: 4px;
}
.nav__dropdown--2col .nav__dropdown-third a {
  padding: 9px 10px;
}
/* 同栏内后续组标题（如「AI工作坊」）与上一组拉开距离 */
.nav__dropdown--2col .nav__dropdown-col > .nav__dropdown-group-title:not(:first-child) {
  margin-top: var(--space-5);
}

/* 两列面板的条目：不换行，保证 max-content 量到真实文字宽度 */
.nav__dropdown--2col .nav__dropdown-third a {
  white-space: nowrap;
}

/* 两列面板的组标题下留白略收 */
.nav__dropdown--2col .nav__dropdown-group-title {
  margin-bottom: var(--space-2);
}

/* ===== 二级分组（左侧标题，浅色配色） ===== */
.nav__dropdown-col {
  min-width: 0;
  text-align: left;
}

.nav__dropdown-group-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-cn-loose);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
  cursor: default;
  text-align: left;
}

.nav__dropdown-group-title a {
  color: inherit;
  text-decoration: none;
}

.nav__dropdown-group-title a:hover {
  color: var(--color-brand-primary-deep);
}

/* ===== 三级列表 ===== */
.nav__dropdown-third {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__dropdown-third li {
  margin-bottom: 2px;
}

.nav__dropdown-third a {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: all var(--duration-fast) var(--ease-out);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
}

.nav__dropdown-third a:hover {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  transform: translateX(2px);
}

/* 二级无三级时的简洁样式 */
.nav__dropdown-col:only-child {
  grid-column: span 2;
  text-align: center;
}

/* ===== 资源中心 / 训练营 / 关于协同：扁平二级 ===== */
.nav__dropdown-col--flat .nav__dropdown-third {
  display: flex;
  flex-direction: column;
}

.nav__dropdown-col--flat .nav__dropdown-third a {
  font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3);
}

/* ===== 联系方式信息块（关于协同 → 联系方式下拉） ===== */
.nav__dropdown-col--info {
  min-width: 320px;
}

.nav__info {
  padding: var(--space-2);
}

.nav__info-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.nav__info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.nav__info-list dt {
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--fw-medium);
}

.nav__info-list dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.nav__info-list dd a {
  color: var(--color-text-primary);
}

.nav__info-list dd a:hover {
  color: var(--color-brand-primary);
}

.nav__info-qrs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.nav__info-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--duration-fast);
  min-width: 80px;
}

.nav__info-qr:hover {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
}

.nav__info-qr-icon {
  font-size: 24px;
  opacity: 0.65;
}

.nav__info-qr-label {
  font-weight: var(--fw-medium);
}

.nav__info-more {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-brand-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================
 * 跨列底行（场景中心专用）
 * 三大分类子栏目下方一条分割线 + 两列内容
 * 李伟伟 2026-09-22 钦定：智能体场景共创中心 / 数字执业平台
 * ============================================================ */
.nav__dropdown-row {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

/* 行内直接放链接，不分组、不加列标题 */
.nav__dropdown-row a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  padding: 6px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}

.nav__dropdown-row a:hover {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  transform: translateX(2px);
}

/* ============================================================
 * 场景中心 · 两列分组布局（2026-09-22 李伟伟钦定）
 * 左列：涉税场景（含 Tag）/ 数据要素场景（含 Tag）
 * 右列：运营平台
 * ============================================================ */

/* 面板改为两列：左列承载两组，右列承载一组
 * ⚠️ 2026-09-22：左列第 2 条「房地产项目全生命周期管理 [房地产税收征管与合规]」
 *    实测 scrollWidth=315 > clientWidth=300（minmax 下限），文字溢出被裁。
 *    把左列下限从 300 提到 340、把上限从 1.35fr 提到 1.45fr，
 *    min-width 700→720、max-width 720→800→820 给整张面板留出富余。*/
.nav__dropdown--scenes {
  /* 两列（2026-10-26 李伟伟定）：左列纵向堆叠「涉税场景 → 数据要素场景」，
     右列单独放「运营平台」。数据要素场景条目少，跟在涉税场景下面更连贯。 */
  grid-template-columns: minmax(340px, 1.55fr) minmax(190px, 0.85fr) !important;
  min-width: 700px;
  max-width: 820px;
}

/* 左列内部：两组纵向堆叠 + 一条分割线 */
.nav__dropdown-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nav__dropdown-stack > .nav__dropdown-col + .nav__dropdown-col {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

/* 右列分隔（左列 → 右列之间的竖线） */
.nav__dropdown--scenes > .nav__dropdown-col:last-child {
  border-left: 1px solid var(--color-border-soft);
  padding-left: var(--space-6);
}

/* ===== 条目右侧的标签 ===== */
.nav__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--color-text-tertiary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  vertical-align: middle;
}

/* 带标签的条目：确保文字与标签不换行挤压 */
.nav__dropdown-third a .nav__tag {
  transition: all var(--duration-fast) var(--ease-out);
}

.nav__dropdown-third a:hover .nav__tag {
  color: var(--color-brand-primary);
  background: var(--color-brand-primary-soft);
  border-color: var(--color-border-brand);
}

/* ===== 外跳链接图标 ===== */
.nav__ext-icon {
  display: inline-block;
  font-size: 10px;
  margin-left: 3px;
  opacity: 0.65;
  color: var(--color-brand-primary);
  vertical-align: middle;
}

/* ===== 移动端 ===== */
@media (max-width: 1024px) {
  .nav__primary {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    /* 收起态必须「自身高度 + top 偏移」一起移出，写 -110% 只移自身高度：
       抽屉高 471px 时 -110% = -518px，而 top 只给了 72px，
       底部仍会露出 25px，正好盖住导航品牌区的下半部分。 */
    transform: translateY(calc(-100% - 80px));
    transition: transform var(--duration-base) var(--ease-out);
    gap: var(--space-3);
    align-items: stretch;
    justify-content: flex-start;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }

  .nav.is-open .nav__primary {
    transform: translateY(0);
  }

  .nav__item--has-dropdown {
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: var(--space-3);
  }

  .nav__item--has-dropdown:last-child {
    border-bottom: none;
  }

  .nav__link {
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
  }

  /* 移动端用点击展开 */
  .nav__dropdown {
    position: static;
    /* ⚠️ 必须 !important：上面的 :hover / :focus-within 规则特异度更高
       ((0,3,0) > (0,1,0))，会继续套用 translateX(-50%)，
       导致 position:static 下整个面板被左移半个宽度、内容被裁到屏幕外。
       实测未加 !important 时 transform = matrix(1,0,0,1,-171,0)。 */
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: var(--space-3) var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: none;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    display: none;
  }

  .nav__item--has-dropdown.is-expanded > .nav__dropdown {
    display: grid;
  }

  /* 移动端 caret 旋转 */
  .nav__item--has-dropdown.is-expanded .nav__caret {
    transform: rotate(180deg);
  }

  .nav__dropdown-col--flat .nav__dropdown-third {
    flex-direction: column;
  }

  /* 跨列底行：移动端换行显示 */
  .nav__dropdown-row {
    grid-column: auto;
    gap: var(--space-4);
  }

  /* 两列面板：移动端收成单列、宽度撑满 */
  .nav__dropdown--2col {
    grid-template-columns: 1fr;
    width: auto;
    min-width: 0;
    max-width: 100%;
    gap: var(--space-4) 0;
    padding: var(--space-5) var(--space-5);
  }
  .nav__dropdown--2col > .nav__dropdown-col:last-child {
    border-left: none;
    padding-left: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
  }
  
  .nav__dropdown--2col .nav__dropdown-third a {
    white-space: normal;
  }

  /* 场景面板：移动端收成单列、左列标签允许换行 */
  .nav__dropdown--scenes {
    grid-template-columns: 1fr !important;  /* !important 压过上方 (0,2,0) 变体的写法 */
    min-width: 0;
    max-width: 100%;
  }
  .nav__dropdown--scenes > .nav__dropdown-col:last-child {
    border-left: none;
    padding-left: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
  }
  .nav__dropdown--scenes .nav__dropdown-third a {
    white-space: normal;   /* 移动端允许标签换到第二行，不再溢出 */
  }
}

/* ============================================================
 * 资源中心搜索区 · 浅色 VI 风格
 * ============================================================ */
.resource-hero {
  background: var(--color-bg-soft);
  background-image: var(--gradient-radial-brand);
  padding: var(--space-7) 20px var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--color-border-soft);
  position: relative;
  overflow: hidden;
}

/* resource-hero 内部居中容器：与下方内容左右边界统一 */
.resource-hero__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* 顶部装饰线（金色脉搏改为品牌橙脉搏） */
.resource-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 105, 20, 0) 10%,
    rgba(255, 105, 20, 0.6) 50%,
    rgba(248, 154, 15, 0.4) 70%,
    transparent 100%
  );
}

.resource-hero__search {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  display: flex;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.resource-hero__search:hover {
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-md);
}

.resource-hero__search:focus-within {
  border-color: var(--color-brand-primary);
  background: var(--color-bg-card);
  box-shadow: 0 0 0 3px var(--color-brand-primary-soft), var(--shadow-md);
}

/* 放大镜图标 */
.resource-hero__search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-brand-primary);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity var(--duration-base);
}

.resource-hero__search:focus-within .resource-hero__search-icon {
  opacity: 1;
}

.resource-hero__search-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* 输入框：加 input 元素选择器抬高特异性（0,2,1），
   否则 base.css 的 input[type="search"]（0,1,1）会把 50px 左距压回 16px，
   placeholder 顶进放大镜图标（2026-10-28 修复资源中心搜索框错位） */
input.resource-hero__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 20px 16px 50px;
  color: var(--color-text-primary);
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  letter-spacing: 0.02em;
}

input.resource-hero__search-input::placeholder {
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/* 提交按钮（金色渐变改为品牌橙渐变） */
.resource-hero__search-btn {
  background: var(--gradient-brand);
  border: 0;
  color: var(--color-text-inverse);
  padding: 0 28px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--duration-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.resource-hero__search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s;
}

.resource-hero__search-btn:hover {
  background: var(--color-brand-primary-deep);
  box-shadow: var(--shadow-brand);
}

.resource-hero__search-btn:hover::before {
  left: 100%;
}

.resource-hero__search-btn:active {
  transform: scale(0.98);
}

/* 清空按钮 × */
.resource-hero__clear {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-tertiary);
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all var(--duration-base);
  z-index: 2;
}

.resource-hero__clear:hover {
  background: var(--color-brand-primary-soft);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  transform: translateY(-50%) rotate(90deg);
}

.resource-hero__clear[hidden] {
  display: none;
}

/* 搜索结果计数 */
.resource-hero__result {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.resource-hero__result strong {
  color: var(--color-brand-primary);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
}

/* 热门标签 */
.resource-hero__tags {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.resource-hero__tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-base);
  box-shadow: var(--shadow-xs);
}

.resource-hero__tag:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}

.resource-hero__tag:active {
  transform: scale(0.96);
}

/* 移动端 */
@media (max-width: 600px) {
  .resource-hero {
    padding: var(--space-6) 16px var(--space-3);
  }
  input.resource-hero__search-input {
    padding: 14px 16px 14px 44px;
    font-size: var(--fs-sm);
  }
  .resource-hero__search-btn {
    padding: 0 18px;
    font-size: var(--fs-sm);
  }
  .resource-hero__clear {
    right: 80px;
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
  .resource-hero__tags {
    gap: 6px;
  }
  .resource-hero__tag {
    padding: 3px 10px;
    font-size: var(--fs-xs);
  }
}