/* ==========================================================================
   湖北省科学技术馆官网 · 移动端 / 小程序 web-view 适配样式表
   页面：/webart/WebArtIdx/111/（科普热搜栏目页，兼容同模板栏目页 123/124/125/126）
   --------------------------------------------------------------------------
   使用方式（对接说明）：
   1. 将本文件放到站点 /static/web/css/mobile-adapt.css；
   2. 在页面模板 </head> 之前、所有原有样式之后追加一行：
        <link rel="stylesheet" href="/static/web/css/mobile-adapt.css">
   3. 【可选】如果页面嵌入小程序 web-view，希望隐藏站点头部导航 / 页脚，
      只需给 <body> 追加 class="embed"，例如：
        <body class="embed">
      不加该 class 时，页面为完整响应式版式（PC 端不受任何影响，
      本文件全部规则都包裹在媒体查询内，仅在窄屏生效）。
   --------------------------------------------------------------------------
   问题清单（依据 2026-11 对线上页面的实测）：
   · 375px 视口下页面实际横向宽度 625px，整体横向溢出约 250px；
     根源：.kepuresoujsimg{min-width:500px} 与 .kepuresouspan ul{width:600px}
   · 栏目简介文字被挤压为约 78px 宽的细条，几乎不可读；
   · 顶部信息栏（访问人数/登录/语言）溢出屏幕右侧；
   · logo 行内样式 width:350px + margin-left:38px，窄屏下右侧被裁切；
   · 主导航 li 固定宽度换行后被 .navcl 固定高度裁切，下拉菜单在触屏上不可用；
   · 文章列表缩略图 215px 固定宽，挤压标题；标题单行截断；
   · 分页条在窄屏下换行错乱；页脚二维码 120px 固定宽溢出。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) 基础防溢出（仅窄屏生效）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  html, body { overflow-x: hidden; }
  img { max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; }

  /* 内容面板：去掉为 PC 准备的 500px 最小高度 */
  .b_baise.padding { min-height: 0 !important; }
}

/* --------------------------------------------------------------------------
   1) 顶部信息栏：访问人数 / 登录注册 / 中英文切换
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body > div[style*="f0f0f0"] { font-size: 12px; }
  body > div[style*="f0f0f0"] .layui-container {
    display: block;
    line-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
  }
  /* 右侧悬浮块改为整行排列，避免溢出 */
  body > div[style*="f0f0f0"] .pull-right {
    float: none !important;
    display: block;
    text-align: left;
  }
  /* 语言切换的内联 float:right 取消 */
  body > div[style*="f0f0f0"] span[style*="float:right"] {
    float: none !important;
    margin-left: 0 !important;
  }
  body > div[style*="f0f0f0"] .user-login { margin-right: 12px; }
}

/* --------------------------------------------------------------------------
   2) 站点头部：logo / 搜索框 / 主导航
      （logo 的 width:350px、margin-left:38px 是行内样式，需 !important 覆盖）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .nav {
    height: auto !important;
    padding-bottom: 12px;
    box-sizing: border-box;
  }
  .navN { width: 100% !important; padding: 0 12px; box-sizing: border-box; }
  .navL {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    text-align: center;
  }
  .navL img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 12px auto 0 !important;
    display: block;
  }
  .navR {
    width: 100% !important;
    float: none !important;
    padding-top: 10px !important;
    margin-bottom: 0 !important;
  }
  .sousuoinput { width: 100% !important; margin-left: 0 !important; padding: 0 !important; }
  .sousuoinput .layui-input { height: 36px; padding-right: 70px; }
  .sousuoinput .layui-btn { height: 36px; line-height: 36px; padding: 0 16px; }

  /* 主导航：改为换行平铺的宫格式入口
     注意：layui 的 .layui-nav 是 display:flex，float/width 对其子项无效，
     必须用 flex-basis 控制每项宽度 */
  .navcl {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 4px 0;
  }
  .navcl .layui-nav {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .navcl .layui-nav .layui-nav-item {
    flex: 0 0 25% !important;
    width: 25% !important;
    height: auto !important;
    line-height: 1.4 !important;
    float: none !important;
    text-align: center;
    box-sizing: border-box;
  }
  .navcl .layui-nav .layui-nav-item a {
    font-size: 13px !important;
    padding: 9px 0 !important;
    line-height: 1.4 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 触屏环境没有 hover， layui 的悬停下拉不可用：直接收起，避免残影遮挡 */
  .navcl .layui-nav-child { display: none !important; }
  /* 清除 layui 导航项自带的右侧分隔小箭头（触屏无意义） */
  .navcl .layui-nav-more { display: none !important; }
}

/* 320px 级小屏：主导航改为每行 3 项，防止文字挤压 */
@media screen and (max-width: 360px) {
  .navcl .layui-nav .layui-nav-item { flex-basis: 33.33% !important; width: 33.33% !important; }

  /* 子栏目胶囊改为 2×2 网格，长按钮名（如"湖北院士知多少"）不再挤压截断 */
  .kepuresouspan ul { flex-wrap: wrap !important; }
  .kepuresouspan ul li { flex: 1 1 50% !important; }
  .kepuresouspan ul li:first-child { border-radius: 15px 0 0 0; }
  .kepuresouspan ul li:nth-child(2) { border-radius: 0 15px 0 0; }
  .kepuresouspan ul li:nth-child(3) { border-radius: 0 0 0 15px; }
  .kepuresouspan ul li:last-child { border-radius: 0 0 15px 0; }

  /* 栏目简介图与列表缩略图再收紧一档 */
  .kepuresoujsimg { height: 150px !important; }
  .kepuresouzymlistimg { width: 96px !important; height: 64px !important; flex-basis: 96px !important; }
  .kepuresouzymlistimg { margin-left: 8px; }
}

/* --------------------------------------------------------------------------
   3) 栏目介绍区（科普热搜简介：左图右文）
      修复点：min-width:500px 导致的横向溢出、文字被挤成细条
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .kepuresouzymjs {
    flex-direction: column;
    padding-bottom: 15px;
  }
  .kepuresoujsimg {
    min-width: 0 !important;
    width: 100% !important;
    height: 180px !important;
  }
  .kepuresoujstxt { padding-left: 0 !important; padding-top: 12px; }
  .kepuresoujstxt h3 {
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 20px !important;
    margin-bottom: 8px;
  }
  /* 简介文字在移动端放开固定高度，完整展示 */
  .kepuresoujstxtp { height: auto !important; }
  .kepuresoujstxtp p { font-size: 14px !important; line-height: 180% !important; }
  /* 兼容 hqwj 变体页（相同模板的其他栏目） */
  .kepuresouzymjs.hqwj .kepuresoujstxt { padding-right: 0 !important; }
  .kepuresouzymjs.hqwj .kepuresoujstxtp { height: auto !important; }
}

/* --------------------------------------------------------------------------
   4) 子栏目切换胶囊（科普热搜 / 湖北院士知多少 / 童趣玩科学 / 科普联创）
      修复点：ul 固定 600px 溢出屏幕
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .kepuresouspan { margin: 20px 0 !important; }
  .kepuresouspan ul {
    width: 100% !important;
    display: flex !important;
    margin: 0 !important;
  }
  .kepuresouspan ul li {
    float: none !important;
    flex: 1 1 25%;
    min-width: 0;
    height: auto !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .kepuresouspan ul li a {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 6px 2px;
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   5) 文章列表：标题 + 缩略图
      修复点：215px 固定宽缩略图挤压标题、标题单行截断
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .kepuresouzymlistitm {
    margin-bottom: 15px !important;
    padding-bottom: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .kepuresouzymlisttxt {
    flex: 1 1 auto !important;
    min-width: 0;            /* 允许标题在 flex 内正常换行省略 */
  }
  .kepuresouzymlisttxt h3 {
    height: auto !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 标题最多两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  .kepuresouzymlisttxt h3 a { font-size: 15px !important; word-break: break-word; }
  .kepuresouzymlisttxt p {
    height: auto !important;
    margin-top: 4px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kepuresouzymlistimg {
    width: 110px !important;
    height: 74px !important;
    flex: 0 0 110px;
    margin-left: 10px;
  }
  .kepuresoullxx { margin-top: 6px !important; }
  .kepuresoullxx span { margin-right: 14px !important; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   6) 分页条
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .kepuresouzymlist .padding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    box-sizing: border-box;
  }
  .kepuresouzymlist .padding .pull-left { float: none !important; padding-top: 0 !important; margin-right: 0 !important; }
  .endless_page_link, .endless_page_current { line-height: 28px; }
}

/* --------------------------------------------------------------------------
   7) 馆内服务四宫格（交通路线/服务设施/租借服务/失物招领）
      原有断点已做 50% 两列，此处补齐细节
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .cgfuwu ul li span em { font-size: 16px !important; height: 40px !important; line-height: 40px !important; margin-top: 16px !important; }
  .cgfuwu ul li span i { font-size: 12px; }
}

/* 附带修复：原站在 1101–1300px 区间 .cgfuwu ul 固定 1300px 导致的桌面端横向溢出 */
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .cgfuwu ul { width: 100% !important; box-sizing: border-box; padding: 0 10px; }
  .cgfuwu ul li { width: 23% !important; margin: 0 1% !important; box-sizing: border-box; }
  .cgfuwu ul li img { width: 100% !important; height: 120px !important; object-fit: cover; }
}

/* --------------------------------------------------------------------------
   8) 页脚：二维码 / 友情链接 / 备案信息
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .footer { padding: 20px 0 !important; line-height: 22px !important; }
  .footerN { width: 100% !important; padding: 0 12px; box-sizing: border-box; }
  .footerewm ul li img { width: 70px !important; height: 70px !important; }
  .footerewm ul li span { font-size: 12px; }
  .youqinglianjie { height: auto !important; line-height: 24px !important; padding: 6px 10px; font-size: 12px; }
  /* 备案信息表格改为纵向堆叠 */
  .footer table, .footer tbody, .footer tr, .footer td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
  }
  .footer td { padding: 4px 0; }
  .footer td img { max-width: 120px; height: auto; }
  .footer p { font-size: 12px; word-break: break-all; }
}

/* ==========================================================================
   9) 小程序 web-view 内嵌模式（可选）
      用法：<body class="embed">
      隐藏站点级头部/导航/页脚，仅保留栏目内容，适配小程序自带导航栏
   ========================================================================== */
@media screen and (max-width: 768px) {
  body.embed > div[style*="f0f0f0"],   /* 顶部访问人数/登录栏 */
  body.embed .nav,                     /* logo + 搜索 + 主导航 */
  body.embed .cgfuwu,                  /* 馆内服务四宫格 */
  body.embed .footer {                 /* 页脚 */
    display: none !important;
  }
  /* 内嵌时左右留白更紧凑 */
  body.embed .layui-container { padding-left: 10px; padding-right: 10px; }
  body.embed .b_baise.padding { padding: 10px !important; }
}