/* ==============================================================================
   /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: var(--portal-text-main);     /* 字体颜色来自全局基础变量CSS文件 */
  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;        /* ⭐ 上下 2px、左右 16px，与标题对齐并增加呼吸感 */

    /* ⭐⭐⭐ 多行省略号核心代码 ⭐⭐⭐ */
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 4;      /* ⭐ 最多显示 4 行，可改成 2 或 3 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------二级菜单（左侧栏）-------------------- */
#portal-mega-panel-grid .grid-l2-item {
  margin: 0 -25px;
  padding: 10px 30px;
  letter-spacing: 1.2px;
  line-height: 1.45;
  color: var(--portal-text-main);     /* 字体颜色来自全局基础变量CSS文件 */
  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;
}

/* -----------------------------------------右侧栏相关代码------------------------------------------------ */
/* ========================================
   右侧栏（卡片容器）（L2 / L3 / L4 通用）
   ======================================= */
#portal-mega-panel-grid .grid-l2-link,     /* 二级菜单（无三级时） */
#portal-mega-panel-grid .grid-l3-link,     /* ⭐ 三级菜单 */
#portal-mega-panel-grid .grid-l4-link {    /* ⭐ 四级菜单（Grid 版） */
    font-size: 14px;          /* ⭐ 小字字号（描述用） */
    color: #374151;           /* ⭐ 默认字体颜色（深灰） */
    text-decoration: none;    /* 去掉下划线 */

    display: flex;            /* ⭐ 垂直布局：标题 + 描述 */
    flex-direction: column;
    justify-content: flex-start;

    height: var(--portal-hover-height);
    /* height: 130px;这里先注销，改为上面这个通过数据库后台调整参数可调 */
    width: 275px;     /* 固定 hover 宽度原300px ，无图片菜单为275px*//*对应下面右侧栏按列布局方式时grid-template-columns: repeat(5, minmax(0, 1fr)); 使用*/
	/*width: 100%;      /*对应下面按长方形卡片容器最小宽度和下面设置的列间距布局：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));column-gap: 0px; 时使用*/
 
    /* ⭐ 控制卡片内部文字的上下左右间距--------（如果想要容器内的图片占位与容器没间距，就把这几个数值调为0） */
    padding-top: 16px;        /* 上边距 */
    padding-left: 18px;       /* 左边距（hover 时会左移） */
    padding-right: 10px;      /* 右边距 */
    padding-bottom: 4px;      /* 下边距 */

    overflow: hidden;         /* 超出隐藏 */
    border-radius: 6px;       /* ⭐ 卡片圆角 */
    background: transparent;  /* 默认透明背景 */

}

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

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

/* ===================================================
   右侧栏长方形卡片容器内菜单标题风格
   ================================================== */
/* 右侧栏标题（L2 / L3 / L4 通用） */
#portal-mega-panel-grid .grid-l2-title,
#portal-mega-panel-grid .grid-l3-title,
#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); /* ⭐ 主文本颜色 */
	
	/* ⭐ 超出省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======================================================================
   -------------右侧栏标题 hover 变蓝，小字说明保持灰色------------------
   ===================================================================== */

/* 标题 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);
}

/* ---------⭐ 所有级别（L2 / L3 / L4）的小字说明：保持灰色 ----------*/
#portal-mega-panel-grid .grid-right .grid-l2-desc,       /* 二级菜单（无三级时） */
#portal-mega-panel-grid .grid-right .grid-l3-desc,       /* ⭐ 三级菜单 */
#portal-mega-panel-grid .grid-right .grid-l4-desc {      /* ⭐ 四级菜单 */
    color: #6b7280;
}

/* 小字说明（L2 / L3 / L4 通用） */
#portal-mega-panel-grid .grid-l2-desc,   /* 右侧栏二级菜单 */
#portal-mega-panel-grid .grid-l3-desc,   /* 右侧栏三级菜单 */ 
#portal-mega-panel-grid .grid-l4-desc {  /* 右侧栏四级菜单 */ 
    font-size: 14px;          /* ⭐ 标题字号（与三级一致） */
    font-weight: 400;         /* ⭐ 粗细 */
    letter-spacing: 1px;      /* ⭐ 字间距（让中文更高级） */
    line-height: 1.45;        /* ⭐ 行高（阅读更舒服）1.4 */
    color: #6b7280;           /* ⭐ 字体颜色 */

    margin-top: 6px;         /* ⭐ 标题和小字说明之间的垂直间距” */
    padding-right: 6px;   /* ⭐ 关键：给小字说明留出左右空间 */	

    /* ⭐ 关键：允许自动换行 */
    white-space: normal;
    word-break: break-all;

     /* ⭐⭐⭐ 多行省略号核心代码 ⭐⭐⭐ */
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* ⭐ 最多显示 3 行（你可以改成 2、3、4） */
    -webkit-box-orient: vertical;
    overflow: hidden;   

}

/* ===========================================================================================================
   -------------通用 hover 动态效果（L2 / L3 / L4 全部统一）如果不用动态效果，注释掉这一段即可 ------------- 
   ========================================================================================================= */
   /* ⭐⭐⭐ 通用 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;
}

/* ---------卡片 hover 效果--------- */
#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;
}

/* ============================================
   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;    /* 长方形hover距离上下，左右的距离，原来20；24*/
  box-sizing: border-box;

  /* ⭐ 双栏右侧栏菜单列数+间距 （下面三张布局控制方法，3选1，同时要调整前面长方形卡片容器的width: 多少px;还是100%跟随这里布局设置的容器长方形宽度）*/
  display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));    /*无图片版用这个更好，右侧按列布局：控制最多几列，调这个数字就行 ，但是下面控制列间距的不起效果，因为列间距是根据这里设定的几列和卡片宽度，得出列间距，上面长方形卡片容器用width: 多少px;设置。*/ 
  /*grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));    /* ⭐ 按长方形卡片容器最小宽度和下面设置的列间距布局：得出右侧栏有几列，但是此时上面关于长方形卡片容器用width: 100%;跟随布局 */
  /*grid-template-columns: repeat(4, 275px);           /* ⭐ 一行固定 ？几 列+ 长方形卡片容器宽度（图片版用这个更好）*/
  
  column-gap: 16px;                                   /* ⭐ 控制列与列之间的水平间距 */
  row-gap: 8px;                                      /* ⭐ 控制行与行之间的垂直间距 */

  /* ⭐ 关键修复：禁止 Grid 拉伸行高 */
  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;            /* ⭐ 距离顶部的距离（调这里控制上下位置）原来8px*/
    right: 35px;          /* ⭐ 距离右侧的距离（调这里控制左右位置）原来48px*/

  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);
}

/* ------------------四级菜单模式下的三级分组标题---------------------- */
/* 外层：保持 Grid 行高正常 */
#portal-mega-panel-grid .grid-right .grid-l3-block > .grid-l3-title {
/* ⭐ 永远占满整行（1 = 第一列；-1 = 最后一列；不管你是 4 列、6 列、8 列，它都占满整行）挂网式该这样 */
/* ⭐ grid-column: span 4;实测这个只适合右侧栏四列布局，否则如果设置右侧6列，会导致分组标题前面占4列，第五列才开始四级菜单，导致错位，下面这个写法更稳*/
  grid-column: 1 / -1;   
  margin-top: 8px;
  margin-bottom: 12px;   /*代表分组标题与下面四级卡片之间的外部间距*/---/*调整这个间距值，还需要调整上面这个标题容器内部下间距，和前面卡片容器与顶部间距值*/
  margin-left: 4px;
  padding: 0;
}

/* 内层：真正做省略号 + 限制长度 */
#portal-mega-panel-grid .grid-right .grid-l3-block > .grid-l3-title > .grid-l3-title-text {
  display: inline-block;
  font-size: 18px;
  font-weight: 550;
  color: var(--portal-text-main);     /* 字体颜色来自全局基础变量CSS文件 */
  line-height: 1.45;

  /* 单行省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 限制最大宽度（约等于 15 个中文字符） */
  max-width: 15em;
}

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

/* ============================================================
   ⭐ PC 双栏菜单（Grid 版）左侧栏分割线（深灰色，更明显）
   ============================================================ */

/* 每个二级菜单之间的分割线 */
#portal-mega-panel-grid .grid-left .grid-l2-item {
    border-bottom: 1px solid #d1d5db;   /* ⭐ 深灰色，比 #e5e7eb 更明显 */
}

/* 第一个二级菜单与标题/描述之间的分割线 */
#portal-mega-panel-grid .grid-left .grid-l2-item:first-child {
    border-top: 1px solid #d1d5db;      /* ⭐ 顶部分割线 */
}