/* ==============================================================================
   /portal/assets/css/portal.nav.grid.css  ← 双栏菜单，全屏阿里云 4 列卡片（Grid 专用）
============================================================================== */

/* ============================
   左侧区域（固定宽度 + 独立滚动）
   ============================ */
#portal-mega-panel-grid .grid-left {
  width: 240px;
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  padding: 20px 25px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  /*max-height: calc(100vh - var(--portal-nav-height) - 20px);这个高度控制改为#portal-mega-panel-grid.open {控制*/
}

/* ------------一级标题（左栏顶部）------------- */
#portal-mega-panel-grid .grid-l1-title {
  font-size: 22px;
  font-weight: 550;
  padding-top: 0;
  padding-bottom: 13px;
  padding-left: 16px;
  padding-right: 16px;
  color: #111827;
  letter-spacing: 1.2px;
}

/* 左侧栏一级菜单小字描述 */
#portal-mega-panel-grid .grid-l1-desc {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  letter-spacing: 1.0px;
  line-height: 1.45;

  margin-top: 13px;
  padding: 2px 16px;

  display: block;
}

/* ----------------二级菜单（左侧栏）-------------------- */
#portal-mega-panel-grid .grid-l2-item {
  margin: 0 -25px;
  padding: 10px 30px;
  letter-spacing: 1.2px;
  line-height: 1.45;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* hover：背景变浅蓝，文字保持原色 */
#portal-mega-panel-grid .grid-l2-item:hover {
  background: #eef2ff;
}

/* active：阿里云同款蓝色 + 半粗 */
#portal-mega-panel-grid .grid-l2-item.active {
  background: #e0e7ff;
  color: #1d4ed8;
  font-weight: 500;
}

/* ================================
   右侧栏二级菜单（无三级时）
   ================================ */
#portal-mega-panel-grid .grid-l2-link {
  font-size: 14px;
  color: #374151;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 130px;
  width: 275px;

  padding-top: 20px;
  padding-left: 20px;
  padding-right: 14px;
  padding-bottom: 6px;

  overflow: hidden;
  border-radius: 6px;
  background: transparent;
}

#portal-mega-panel-grid .grid-l2-link:hover {
  background: #f3f4f6;
}

/* 右侧栏二级标题风格 */
#portal-mega-panel-grid .grid-l2-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.45;
  color: var(--portal-text-main);
}

/* 二级描述 */
#portal-mega-panel-grid .grid-l2-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.0px;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 4px;
}

/* ================================
   右侧栏三级菜单
   ================================ */
#portal-mega-panel-grid .grid-l3-link {
  font-size: 14px;
  color: #374151;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 130px;
  width: 275px;

  padding-top: 16px;
  padding-left: 18px;
  padding-right: 10px;
  padding-bottom: 4px;

  overflow: hidden;
  border-radius: 6px;
  background: transparent;
}

#portal-mega-panel-grid .grid-l3-link:hover {
  background: #f3f4f6;
}

/* 右侧栏三级标题风格 */
#portal-mega-panel-grid .grid-l3-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.45;
  color: var(--portal-text-main);
}

/* 右侧栏三级描述 */
#portal-mega-panel-grid .grid-l3-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.0px;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 4px;
}

/* =============================================
   三级菜单列表（右侧栏）- 默认隐藏- 激活时显示
   ============================================ */
#portal-mega-panel-grid .grid-l3-list {
  display: none;
  flex-direction: column;
  gap: 2px;
}

#portal-mega-panel-grid .grid-l3-list.active {
  display: flex;
}

/* ===================================================
   四级卡片（Grid 版）
   ================================================== */
#portal-mega-panel-grid .grid-l4-link {
  font-size: 14px;
  color: #374151;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 130px;
  width: 275px;

  padding-top: 16px;
  padding-left: 18px;
  padding-right: 10px;
  padding-bottom: 4px;

  overflow: hidden;
  border-radius: 6px;
  background: transparent;
}

#portal-mega-panel-grid .grid-l4-link:hover {
  background: #f3f4f6;
}

#portal-mega-panel-grid .grid-l4-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.45;
  color: var(--portal-text-main);
}

#portal-mega-panel-grid .grid-l4-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.0px;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 4px;
}

/* 通用 hover 动效（L2 / L3 / L4） */
#portal-mega-panel-grid .grid-l2-link,
#portal-mega-panel-grid .grid-l3-link,
#portal-mega-panel-grid .grid-l4-link {
  transition:
    padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.15s ease;
}

#portal-mega-panel-grid .grid-l2-link:hover,
#portal-mega-panel-grid .grid-l3-link:hover,
#portal-mega-panel-grid .grid-l4-link:hover {
  padding-left: 6px;
  background: #f3f4f6;
}

/* 标题 hover 变蓝，小字保持灰色 */
#portal-mega-panel-grid .grid-right .grid-l2-link:hover .grid-l2-title,
#portal-mega-panel-grid .grid-right .grid-l3-link:hover .grid-l3-title,
#portal-mega-panel-grid .grid-right .grid-l4-link:hover .grid-l4-title {
  color: var(--portal-primary);
}

/* ============================================
   PC 全屏 Mega Panel（Grid 独立 DOM）
   ============================================ */
#portal-mega-panel-grid {
  position: absolute;
  top: 100%;
  left: 0;

  width: 100vw;
  max-width: 100vw;
  background: #fff;

  display: flex;
  flex-direction: row;

  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease-out;

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* 打开状态（JS 控制高度） */
#portal-mega-panel-grid.open {
  opacity: 1;
  pointer-events: auto;
  min-height: 320px;   /* ⭐ 打开时的最小高度 */
   /* ⭐ max-height到达这个高度就会触发上下滑动的效果，这只是一个上限值，并不是动作，撑开这个动作JS代码实现 */
  max-height: calc(100vh - var(--portal-nav-height) - 200px);  /* ⭐ 如果想要撑开面板更高，减的这个值就设小一些 */
  overflow: hidden;
}

/* ============================
  阿里云四列样式版的话
  overflow-y: auto;
  overflow-x: hidden;
  要换成  overflow: hidden;
  否则双栏菜单不弹。所以统一都写
  overflow: hidden;
============================ */

/* ================================================
   PC 全屏 Mega Panel - 右侧四列布局（阿里云风格）
   =============================================== */
#portal-mega-panel-grid .grid-right {
  flex: 1;
  padding: 25px 24px;
  box-sizing: border-box;

  display: grid;
  /* 固定最多 4 列：你可以改成 repeat(4, minmax(0, 1fr)) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;

  align-content: flex-start;

  background: #ffffff;
  overflow-y: auto;
  /*max-height: calc(100vh - var(--portal-nav-height) - 20px);这个高度控制改为#portal-mega-panel-grid.open {控制*/
}

/* 只让当前激活的三级菜单参与 grid */
#portal-mega-panel-grid .grid-right .grid-l3-list.active {
  display: contents;
}

/* 未激活的三级菜单继续隐藏 */
#portal-mega-panel-grid .grid-right .grid-l3-list {
  display: none;
}

/* 右上角关闭按钮（X） */
#portal-mega-panel-grid .grid-close-btn {
  position: absolute;
  top: 3px;
  right: 35px;

  font-size: 30px;
  font-weight: 600;

  color: #6b7280;
  cursor: pointer;

  z-index: 9999;
  transition: color 0.15s ease;
}

#portal-mega-panel-grid .grid-close-btn:hover {
  color: #111827;
}

/* 有 / 无三级菜单时的左右宽度差异（可选） */
#portal-mega-panel-grid .mega-menu-grid.no-l3 .grid-left {
  width: 160px;
}

#portal-mega-panel-grid .mega-menu-grid.no-l3 .grid-right {
  padding-left: 0;
}

#portal-mega-panel-grid .mega-menu-grid.has-l3 .grid-left {
  width: 200px;
}

#portal-mega-panel-grid .mega-menu-grid.has-l3 .grid-right {
  padding-left: 0;
}

/* ============================
   Grid Panel 滚动条美化（局部）
   ============================ */
#portal-mega-panel-grid::-webkit-scrollbar,
#portal-mega-panel-grid *::-webkit-scrollbar {
  width: 6px;
}

#portal-mega-panel-grid::-webkit-scrollbar-thumb,
#portal-mega-panel-grid *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

#portal-mega-panel-grid::-webkit-scrollbar-track,
#portal-mega-panel-grid *::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox */
#portal-mega-panel-grid,
#portal-mega-panel-grid * {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}

/* =================================================================
   Mega Menu 标题统一为导航栏风格（Grid 专用）
   =============================================================== */
/* 左侧栏二级标题（左侧菜单） */
#portal-mega-panel-grid .grid-left .grid-l2-item {
  font-size: 16px;
  font-weight: 400;
}

/* 右侧栏二级标题（无三级菜单时） */
#portal-mega-panel-grid .grid-right .grid-l2-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--portal-text-main);
}

/* 右侧栏三级标题（普通三级卡片用） */
#portal-mega-panel-grid .grid-right .grid-l3-link .grid-l3-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--portal-text-main);
}

/* 四级菜单模式下的三级分组标题 */
#portal-mega-panel-grid .grid-right .grid-l3-block > .grid-l3-title {
  font-size: 18px;
  font-weight: 550;
  color: #111827;

  margin-top: 8px;
  margin-bottom: 12px;
  margin-left: 4px;

  padding: 0;
}

/* 隐藏渲染器里的模板结构，只让 Panel 显示 */
.portal-nav-item-grid > .mega-menu-grid {
  display: none;
}