@charset "utf-8";
/* ============================================================
   米折 · 手机端响应式适配层
   ------------------------------------------------------------
   背景：本站 PC 走「换数据不换皮」，皮肤是原站 1120px 固定宽体系
   （.wraper / .header-wrap / .nav-box .header = 1120px，
     .col-ab 810 主栏 + .col-c 270 侧栏，col-635/270/170 都是 float 定宽）。
   站方要求「PC 全部自动适配手机端，不做独立手机版」，
   故本文件用媒体查询把这些定宽结构在窄屏下改写成流式，
   HTML 结构一律不动 —— 这是本文件的唯一职责。

   加载位置：必须在所有皮肤 CSS 之后（见 index/common/header.html），
   否则会被原站同名规则压掉。
   断点：<=767px 手机；768-1023px 平板（仅做收窄，不做重排）。
   ============================================================ */

/* ===================== A. 全局兜底（手机） ===================== */
@media (max-width: 767px) {
  /* 1. 防横向溢出：任何超宽元素都不允许把整页撑出滚动条 */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  /* 2. 图片一律自适应：原站大量尺寸写死的 img 在窄屏会溢出 */
  img {
    max-width: 100%;
    height: auto;
  }
  /* 3. 固定宽容器改流式（原站 1120px 体系的三个入口） */
  .wraper,
  .header-wrap,
  .nav-box .header,
  .doc {
    width: auto !important;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  /* 4. 栅格：定宽 + 浮动 → 单列块级 */
  .col-ab,
  .col-c,
  .col-635,
  .col-270,
  .col-240,
  .col-170,
  .col-810,
  .col-840 {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
  /* 5. 长串文本换行，避免英文/链接撑破容器 */
  .area, .wraper, .doc, .item, .list, .art-list {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ===================== B. 头部 / 导航（手机） ===================== */
@media (max-width: 767px) {
  /* 头部整体：原站 .header-wrap 是 1120 定宽 + 内部定宽子项，
     窄屏下改成纵向排布，logo 与搜索各占一行 */
  .header-wrap {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* logo 缩小并靠左（背景图形式，等比缩放）。
     必须取消浮动：浮动 logo 会把 .ks-box（display:flex = BFC，不与浮动重叠）
     挤成右侧窄条 —— 实测 375px 下搜索框只剩 195px 宽且偏到 x=155 */
  .header .logo {
    width: 100px !important;
    height: 28px !important;
    background-size: contain !important;
    background-position: left center !important;
    float: none !important;
    display: block;
  }
  /* 搜索区：独占一行，占满宽度 */
  .ks,
  .ks-box {
    width: auto !important;
    float: none !important;
    margin: 8px 0 0 !important;
  }
  .ks-box {
    display: flex;
    align-items: center;
    /* 原生红边是 601px 背景图（no-repeat 不缩放），窄屏会被裁出屏 → 换 CSS 边框 */
    background: none !important;
    border: 2px solid #ee4444;
    border-radius: 20px;
  }
  .ks-input {
    flex: 1;
    width: auto !important;
    min-width: 0;
    height: 32px;
    line-height: 32px;
  }
  /* form 不是 flex 的话 .ks-input 的 flex:1 不生效（输入框只剩 198px） */
  .ks-box form {
    display: flex !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0;
  }
  .ks-q {
    width: 100% !important;
    height: 32px;
    font-size: 14px; /* 小于 16px 时 iOS 会自动放大页面，故这里给足 */
  }
  .ks-submit {
    flex: 0 0 auto;
    width: 60px !important;
    height: 32px;
    line-height: 32px;
  }
  /* 热词提示 / PC 专属文案在手机上隐藏 */
  .ks-info,
  .bl-box,
  .enter-zq,
  .ts {
    display: none !important;
  }
  /* 主导航：定宽 538px → 可横向滚动的条（不换行，避免顶栏过高） */
  .nav-wrap {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important; /* header-lock 的 207px 偏移会把导航推出屏 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .nav-wrap::-webkit-scrollbar {
    display: none;
  }
  .nav-wrap a {
    float: none !important;
    /* header-lock 的 .nav-box .nav-wrap .item{display:block;text-align:center}
       特异性更高，会把链接拍成全宽块级竖排 → 必须 !important 顶回 */
    display: inline-block !important;
    text-align: left !important;
    margin-right: 16px !important;
    font-size: 14px;
  }
  /* 导航行重排（与平板段 D1 同款）：nav-box 是 header-lock 的
     display:flex 容器 —— flex 项内 float 全部失效，user-nav 的
     315px 定宽会把导航挤换行；手机下改回块级堆叠，user-nav 靠右 */
  .nav-box {
    display: block !important;
    height: auto !important;
    min-height: 40px;
    margin-bottom: 0 !important;
  }
  .nav-box .header {
    height: auto !important;
    padding-top: 0;
  }
  .nav-box .nav-wrap .item,
  .nav-box .user-nav .item {
    width: auto !important; /* header-lock 的 90px 定宽在窄屏放不下 */
  }
  .user-nav {
    width: auto !important;
    float: right !important;
    /* 三项定宽合计约 285px > 可用宽度时最后一个会被裁掉 → 允许换行 */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* fix-nav-box 是主头部包裹层（内含 .header），不能隐藏；
     窄屏下让它保持常规文档流高度即可 */
  .fix-nav-box {
    height: auto !important;
    min-height: 0;
  }
}

/* ===================== C. 首页（手机） ===================== */
@media (max-width: 767px) {
  /* 首页主体容器 */
  .main-box,
  .area-cate,
  .area-2 {
    width: auto !important;
    max-width: 100%;
  }
  /* 首屏左栏（分类 + 焦点区）：单列 */
  .slideContent-area,
  .change-foucs,
  .big-slide {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
  }
  /* 轮播图：原站写死 635 宽，窄屏自适应且按比例显示（不再裁切压扁） */
  .change-foucs img,
  .big-slide img {
    width: 100% !important;
    height: auto !important;
  }
  /* 右栏用户区：改常规块，不再 270 定宽 */
  .user-box {
    width: auto !important;
    max-width: 100%;
    margin-top: 10px;
  }
  /* 图片列表：改两列网格（原站是定宽 float 多列） */
  .pics-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: auto !important;
  }
  .pics-list li,
  .pics-list .item {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  /* Tab 条也可横向滚动 */
  .tabs,
  .area-2 .tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===================== D. 平板（768-1023px） =====================
   说明：原设计「仅收窄，不重排」在真机（1366 物理宽 + 125% 系统缩放
   = 视口约 872px）下会散架：头部内部是 1120 体系的定宽浮动
   （.nav-wrap 600px + margin-left 207px、.user-nav 315px、.ks 601px），
   收窄容器后总宽 800px+ 装不下，.user-nav 被挤换行并溢出
   .nav-box 固定 40px 高度，漂浮盖在正文上（视觉即「导航悬浮透明」）；
   首页主区 .col-635 + .col-270 = 905px 同样超宽，中部大片留白。
   故本段必须对头部和主栅格做与手机段同款的重排。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .wraper,
  .header-wrap,
  .nav-box .header,
  .doc {
    width: auto !important;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .col-ab {
    width: auto !important;
    max-width: 100%;
  }
  .col-c {
    display: none; /* 平板侧栏空间不足，隐藏次要右栏 */
  }
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- D1. 头部重排（消除 user-nav 溢出漂浮） ---- */
  /* 包裹层放高：内容换行后不再溢出盖住正文 */
  .fix-nav-box {
    height: auto !important;
    min-height: 0;
  }
  .header {
    height: auto !important;
    padding-bottom: 8px;
  }
  /* 搜索区：放弃 601px 定宽，占满 logo 右侧剩余空间 */
  .ks,
  .ks-box {
    width: auto !important;
    max-width: 100%;
  }
  /* 原生红边是 601px 背景图，宽度放开后右端会缺口 → 换 CSS 边框 */
  .ks-box {
    background: none !important;
    border: 2px solid #ee4444;
    border-radius: 20px;
  }
  .fix-nav-box .ks-input .ks-q {
    width: auto !important;
    max-width: 100%;
  }
  .ks-input .ks-submit {
    right: 0;
  }
  /* 热词行改为文档流排在搜索框下方（绝对定位 bottom:-2px 会叠在输入框上） */
  .ks {
    height: auto !important;
    min-height: 0;
    padding-bottom: 24px;
  }
  .ks-info {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100%;
    padding-top: 4px;
    overflow: hidden;
  }
  .bl-box,
  .enter-zq {
    display: none !important;
  }
  /* 导航行：去掉 207px 偏移与 600px 定宽，user-nav 收窄靠右 */
  .nav-box {
    height: auto !important;
    min-height: 40px;
    margin-bottom: 0 !important; /* header-lock 的 200px 下边距在此宽度会推出大片空白 */
  }
  .nav-box .header {
    height: auto !important;
    padding-top: 0;
  }
  .nav-wrap {
    width: auto !important;
    margin-left: 0 !important;
    float: left !important;
  }
  .user-nav {
    width: auto !important;
    float: right !important;
  }

  /* ---- D2. 首页主区重排（消除中部大片空白） ---- */
  /* 防横向溢出兜底（与手机段 A 同款） */
  html, body { overflow-x: hidden; }
  /* 用户区（col-270）平板下隐藏，与 .col-c 同策略 */
  .col-270 { display: none !important; }
  /* 轮播列放开定宽；分类栏保持 215px 浮动，轮播占剩余宽度 */
  .col-635,
  .col-840 {
    width: auto !important;
    max-width: 100%;
  }
  .slideContent-area {
    width: 215px !important;
    float: left !important;
  }
  .change-foucs {
    float: right !important;
    width: calc(100% - 230px) !important;
    max-width: 100%;
    height: auto !important;
  }
  /* 轮播内层仍是 635×395 定宽高 + .pics 99999px 跑马灯结构，
     收窄后 li 被撑成 99999px 宽（图被裁成纯色）且引发横向滚动 →
     平板下退化为「只显示第一帧、按比例缩放」的静态 Banner */
  .big-slide .focus-slide {
    width: 100% !important;
    height: auto !important;
  }
  .big-slide .slide-pic .pics {
    width: auto !important;
  }
  .big-slide .slide-pic .pics li {
    float: none !important;
    display: none;
    width: auto !important;
    height: auto !important;
  }
  .big-slide .slide-pic .pics li:first-child {
    display: block;
  }
  .big-slide .slide-pic .pics li img,
  .big-slide img {
    width: 100% !important;
    height: auto !important;
  }
}