/* ============================================
   /portal/assets/css/mobile_mega_menu_img1.css
   手机端——双栏抽屉菜单（阿里云风格 / 挂网式精简版）
============================================ */
@media (max-width: 768px) {

  /* ============================
     ⭐ 抽屉整体容器
     ============================ */
  .portal-mobile-mega {
      display: none;
      background: #fff;
      flex-direction: row;
      height: 100%;
      overflow: hidden;
  }

  body.portal-menu-open .portal-mobile-mega {
      display: flex;
  }

  /* ============================
     ⭐ 左栏（一级 + 二级组）
     ============================ */
  .drawer-img1-l1-column {
      width: 35%;
      background: #f3f4f6;
      border-right: 1px solid #e5e7eb;
      overflow-y: auto;
      padding-bottom: var(--mobile-bottom-nav-height);
      box-sizing: border-box;
  }

  .drawer-img1-l1-item {
      padding: 14px 16px;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: transparent !important;
  }

  .drawer-img1-l1-item.active {
      color: #1d4ed8;
      font-weight: 500;
  }

  .drawer-img1-l1-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280;
      transition: transform 0.2s ease;
  }

  .drawer-img1-l1-item.active .drawer-img1-l1-arrow {
      transform: rotate(180deg);
  }

  .drawer-img1-l1-block.active {
      background: #e0e7ff;
   /*background: var(--mobile-img-placeholder-color, #ff7175);改成下面这个所有一级菜单都统一吃首页颜色*/
  }

  .drawer-img1-l1-group {
      display: none;
      border-top: 1px solid #e5e7eb;
      overflow-y: auto;
  }

  .drawer-img1-l1-group.active {
      display: block;
  }

  .drawer-img1-l2-item-left {
      padding: 12px 16px;
      font-size: 15px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      background: transparent !important;
  }

  .drawer-img1-l2-item-left.active {
      color: #1d4ed8;
      font-weight: 500;
  }

  /* ============================
     ⭐ 右栏（挂网式 L2/L3 网格）
     ============================ */
  .drawer-img1-l2-column {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      padding-bottom: var(--mobile-bottom-nav-height);
      box-sizing: border-box;
  }

  .drawer-img1-panel-title {
      font-size: 16px;
      font-weight: 550;
      color: #111827;
      padding: 4px 0 10px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #e5e7eb;
  }

  /* ============================
     ⭐ 情况 1：只有二级（L2）→ 二级网格
     ============================ */
  .drawer-img1-l2-panel {
      display: none;
  }

  .drawer-img1-l2-panel.active {
      display: block;
  }
  
  .drawer-img1-l2-grid {
      display: grid;
      /*grid-template-columns: repeat(2, minmax(0, 1fr));这种写法会当移动设备屏幕比较宽时，拉宽卡片宽度，因为按列计算宽度的*/
   /*grid-template-columns: repeat(2, 90px);   /* 一行两列，每列固定宽度 */
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));    /* 小屏手机 → 两列；大屏手机 → 自动变成 3 列；卡片宽度最小 90px，不会被拉长 。 */
      gap: 10px 12px;
      margin-top: 8px;
  }

.drawer-img1-l2-grid-item {
    display: block;
    /*padding: 10px 12px;注销改成后面统一写法*/
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
    border-radius: 8px;
    /*border: 1px solid #e5e7eb; 改成下面这种  /* ⭐⭐ 长方形边框线在这里 ⭐⭐ */
 border: none;    /* ⭐⭐ 去掉卡片边框线 ⭐⭐ */

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;

    /* ⭐⭐ 关键：让长文字自动换行 ⭐⭐ */
    word-wrap: break-word;
    overflow-wrap: break-word;
 white-space: normal;   /* ⭐⭐ 强制允许换行（非常关键） */
}

/* ⭐ 卡片高度由后台 hover_height 控制（固定高度，不允许撑开） */
.drawer-img1-l2-grid-item,
.drawer-img1-l3-grid-item {
    height: var(--drawer-hover-height, 130px);   /* 固定高度 */
    overflow: hidden;                            /* 超出内容隐藏 */
 /*overflow-y: auto;     /* 超出内容可以滚动长方形hover，就换成这个 */
}

.drawer-img1-l2-grid-item,
.drawer-img1-l3-grid-item {
    padding: 0px;              /* ⭐ 统一内边距 */
    display: block;             /* ⭐ 保证内部布局正常 */
}

/* ============================
   ⭐ 手机端图片占位（和 PC 端一致）
   ============================ */
.drawer-img1-img-wrap {
    width: 100%;
    height: 78px;              /* 图片占位高度 */
    border-radius: 6px;         /* 圆角 */
    overflow: hidden;           /* 裁剪图片 */
    background: var(--drawer-img1-placeholder-color, #ff7175); /* ⭐ 和电脑端一样，用 CSS 变量兜底 */
    margin-bottom: 4px;         /* 图片与标题之间的间距 */
}

/* ⭐ 标题与卡片边缘的内边距（你想要的） */
.drawer-img1-l2-title,
.drawer-img1-l3-title {
    padding-top: 0px;     /* 标题顶部间距 */
    padding-right: 6px;  /* 标题右侧间距 */
    padding-bottom: 4px;  /* 标题底部间距 */
    padding-left: 6px;   /* 标题左侧间距 */
}

.drawer-img1-img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 保持比例裁剪 */
    display: block;
}

  .drawer-img1-l2-grid-item:hover {
      background: #eff6ff;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
      color: #1d4ed8;
  }

  /* ============================
     ⭐ 情况 2：有三级（L3）→ L2 分组标题 + L3 网格
     ============================ */
  .drawer-img1-l3-panel {
      display: none;
      margin-bottom: 16px;
  }

  .drawer-img1-l3-panel.active {
      display: block;
  }

  .drawer-img1-l3-grid-title {
      font-size: 15px;
      font-weight: 500;
      color: #111827;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e5e7eb;
  }

  .drawer-img1-l3-grid {
      display: grid;
      /*grid-template-columns: repeat(2, minmax(0, 1fr));这种写法会当移动设备屏幕比较宽时，拉宽卡片宽度，因为按列计算宽度的*/
   /*grid-template-columns: repeat(2, 90px);   /* 一行两列，每列固定宽度 */
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));    /* 小屏手机 → 两列；大屏手机 → 自动变成 3 列；卡片宽度最小 90px，不会被拉长 。 */
      gap: 10px 12px;
      margin-top: 4px;
  }

.drawer-img1-l3-grid-item {
    display: block;
    /*padding: 10px 12px;注销改成后面统一写法*/
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
    border-radius: 8px;
 
    /*border: 1px solid #e5e7eb; 改成下面这种  /* ⭐⭐ 长方形边框线在这里 ⭐⭐ */
 border: none;    /* ⭐⭐ 去掉卡片边框线 ⭐⭐ */
 
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;

    /* ⭐⭐ 关键：让长文字自动换行 ⭐⭐ */
    word-wrap: break-word;
    overflow-wrap: break-word;
 white-space: normal;   /* ⭐⭐ 强制允许换行（非常关键） */
}

  .drawer-img1-l3-grid-item:hover {
      background: #eff6ff;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
      color: #1d4ed8;
  }

  .drawer-img1-l3-grid-empty {
      padding: 20px;
      text-align: center;
      color: #9ca3af;
      font-size: 14px;
  }

  /* ============================
     ⭐ 三级 → 四级手风琴（保留原版）
     ============================ */
  .drawer-img1-l3-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
  }

  .drawer-img1-l3-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280;
      transition: transform 0.2s ease;
  }

  .drawer-img1-l3-item.active .drawer-img1-l3-arrow {
      transform: rotate(180deg);
  }

  .drawer-img1-l4-panel {
      display: none;
      padding-left: 16px;
      border-left: 2px solid #e5e7eb;
      margin-bottom: 8px;
  }

  .drawer-img1-l4-link {
      display: block;
      padding: 6px 0;
      font-size: 14px;
      color: #374151;
  }
}