/* ==========================================================================
   layout.css — 容器 / 栅格 / 区块布局（移动优先 + 媒体查询）
   断点：≤767 手机 | 768–1023 平板 | 1024–1199 小桌面 | ≥1200 大屏
   ========================================================================== */

/* 内容容器：设计稿内容区 1400px 居中 */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 常规区块纵向节奏 */
.section {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* 工作动态 + 通知公告：移动端单列 */
.news-notice .notice-col {
  margin-top: 40px;
}

/* 学校站点 + 友情链接：移动端单列 */
.sites-links-row .school-sites {
  margin-top: 40px;
}

/* 页脚：移动端单列居中 */
.footer-main {
  text-align: center;
  padding-top: 16px; /* 移动端：图标+网络中心与 footer 顶部保留 16px 间距 */
  padding-bottom: 16px;
}

.footer-row > div + div {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   平板 768px+
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .footer-main {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   小桌面 1024px+
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* 工作动态 64% + 通知公告 36%，间距 54px（还原设计稿 902/436 比例） */
  .news-notice {
    display: flex;
  }

  .news-notice .news-col {
    flex: 0 0 64.4%;
    max-width: 64.4%;
  }

  .news-notice .notice-col {
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: 54px;
  }

  /* 友情链接 + 学校站点 双列，间距 38px */
  .sites-links-row {
    display: flex;
  }

  .sites-links-row .friend-links {
    flex: 0 0 48.6%;
    max-width: 48.6%;
  }

  .sites-links-row .school-sites {
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: 38px;
  }

  /* 页脚两行排布（行内横向与间距由 module.css .footer-row 控制） */
  .footer-main {
    text-align: left;
  }

  .footer-row > div + div {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   大屏 1200px+：容器固定 1400 内容宽（1440 - 2×20 padding）
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   列表页主体（列表_含二级导航菜单.html）：侧栏 + 内容，移动端单列
   -------------------------------------------------------------------------- */
.page-main {
  padding-bottom: 60px;
}

@media (min-width: 1024px) {
  .page-main {
    padding-bottom: 100px;
  }

  /* 侧栏顶（设计稿 top 383）与面包屑行底（404）垂直重叠 21px，
     水平方向错开（侧栏居左、面包屑贴右）互不遮挡，用负 margin 还原 */
  .page-body {
    display: flex;
    align-items: flex-start;
    margin-top: -21px;
  }

  .page-side {
    flex: 0 0 288px;
    max-width: 288px;
  }

  /* 内容列顶 445 = 侧栏顶 383 + 62；min-width:0 保证标题 ellipsis 生效 */
  .page-content {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 50px;
    padding-top: 62px;
  }
}

/* 平板/手机（≤1023）隐藏左侧栏目导航 */
@media (max-width: 1023px) {
  .page-side {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   内页粘底页脚：内容不足一屏时 footer 仍贴住视口底部
   --------------------------------------------------------------------------
   body 设 min-height:100vh + flex column，.page-main flex:1 撑满剩余高度，
   把 footer 顶到视口底部；内容超出一屏时 body 随文档流自然增高，footer 下移。
   仅 .page-inner 内页启用（非首页模板的 body 都带此类），首页 index.html 不动。
   IE 不支持 flex 时退回文档流顺序（footer 紧跟 main），与现状一致。 */
body.page-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-inner .page-main {
  flex: 1 1 auto;
}