/* ===============================================================
 *  wllzhan.com 首页「栏目模块」两排布局修复 (modle-fix.css)
 *  -----------------------------------------------------------------
 *  目标：轮播图下方的 8 个栏目，由原来的「排成一列」改为「4 列 × 2 排」，
 *        页面变得规整、充实、好看。
 *  实现：将 .modle 改为 flex 4 列网格，8 个 .modle_box 每行 4 个、共 2 排。
 *        窄列下去掉大图，改为紧凑的标题 + 文章列表，保证整齐不挤。
 *  用法：上传后建议并入 original style.css 的「栏目模块」段落，
 *        或作为独立样式在 style.css 之后引入。
 *  =============================================================== */

/* ---------- 栏目模块：4 列 × 2 排布局（修复） ---------- */
.modle {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;              /* 行间距 + 列间距 */
  width: 100%;            /* 由 105% 改为 100%，避免横向溢出 */
  overflow: hidden;
}

.modle_box {
  float: none;                       /* 覆盖原 float:left */
  width: calc((100% - 60px) / 4);    /* 4 列布局：减去 3 个 20px gap */
  margin: 0;                         /* 覆盖原 margin-right:40px */
  margin-top: 24px;                  /* 每排顶部间距 */
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f1e8e5;
  border-radius: 6px;
  padding: 12px 14px 10px;            /* 卡片内衬，更规整 */
  transition: box-shadow .2s ease, border-color .2s ease;
}
.modle_box:hover {
  box-shadow: 0 4px 14px rgba(153, 17, 0, .08);
  border-color: #e3c8c2;
}

/* 标题栏：紧凑横条 */
.modle_title {
  width: 100%;
  height: 30px;
  position: relative;
  margin-bottom: 8px;
}
.modle_title i {
  display: none;                     /* 隐藏原有细线，改用渐变底 */
}
.modle_title p {
  width: 100%;
  position: static;
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 10px;
  border-left: 3px solid #cc1f0a;
  background: linear-gradient(90deg, rgba(204,31,10,.06), transparent);
  border-radius: 3px;
}
.modle_title p span {
  display: block;
  border-bottom: 0;                  /* 去掉原下划线 */
  height: 30px;
  line-height: 30px;
  color: #991100;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
}
.modle_title p a {
  display: block;
  margin-left: auto;
  color: #999;
  font-size: 12px;
  line-height: 30px;
  padding-right: 2px;
}
.modle_title p a:hover {
  color: #cc1f0a;
}

/* 隐藏大图（窄列放不下，改为纯列表更整齐） */
.modle_img {
  display: none;
}

/* 文章列表：紧凑行列 */
.modle_wen {
  width: 100%;
  overflow: hidden;
  margin-top: 0;
}
.modle_wen ul {
  margin: 0;
  padding: 0;
}
.modle_wen li {
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px dashed #f3ecea;
  padding: 0 2px;
}
.modle_wen li:last-child {
  border-bottom: 0;
}
.modle_wen li a {
  display: block;
  padding-left: 14px;
  color: #444;
  font-size: 13px;
  background: url("../images/fd.jpg") no-repeat 3px 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modle_wen li a:hover {
  color: #cc1f0a;
}
.modle_wen li span {
  float: right;
  color: #bbb;
  font-size: 11px;
  padding: 0 0 0 6px;
}

/* ---------- 兼容：老浏览器不支持 flex 时退化为 4 列 float ---------- */
@supports not (display: flex) {
  .modle {
    display: block;
    width: 105%;
  }
  .modle_box {
    float: left;
    width: 200px;
    margin: 24px 13px 0 0;
  }
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 1240px) {
  .modle_box {
    width: calc((100% - 40px) / 3);   /* 中屏 3 列 */
  }
}
@media screen and (max-width: 768px) {
  .modle {
    display: block;
    width: 100%;
  }
  .modle_box {
    float: none;
    width: 100%;
    margin: 20px 0 0;
  }
}