/**
 * 公共页面布局样式 - 统一页面留白和容器样式
 * 与 header 和 footer 保持一致的 max-width 和 padding
 */

/* 通用页面容器 - 与 header/footer 对齐 */
.page-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* baseDiv 统一样式 - 兼容现有代码 */
.baseDiv {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 8rem;
  box-sizing: border-box;
}

/* 针对使用 Bootstrap .row 的 baseDiv，完全移除 Bootstrap 负margin干扰，使用原生统一留白 */
.row.baseDiv {
  /* 完全移除 Bootstrap .row 的 margin: 0 -15px 影响，使用统一的 margin 设置 */
  margin: 0 auto !important;
  /* 统一使用 8rem 留白 */
  padding: 0 8rem !important;
  /* 限制最大宽度 */
  max-width: 1200px !important;
  /* 覆盖 header.css 中 .baseDiv 的 width 限制 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 内容区域容器 - 用于带边框的内容块 */
.content-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2rem 8rem; /* 统一左右padding为8rem */
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto 30px auto;
}

/* 面包屑容器 */
.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8rem;
  box-sizing: border-box;
}

/* 响应式：大平板和小笔记本 */
@media (max-width: 992px) {
  .page-container,
  .baseDiv,
  .breadcrumb-container {
    padding: 0 2.5rem;
  }

  .content-container {
    padding: 2rem 2.5rem;
  }
}

/* 响应式：平板 */
@media (max-width: 768px) {
  .page-container,
  .baseDiv,
  .breadcrumb-container {
    padding: 0 1.5rem;
  }

  .content-container {
    padding: 2rem 1.5rem;
  }
}

/* 响应式：手机 */
@media (max-width: 500px) {
  .page-container,
  .baseDiv,
  .breadcrumb-container {
    padding: 0 1rem;
  }

  .content-container {
    border-radius: 0;
    padding: 1.5rem 1rem;
    box-shadow: none;
  }
}