/* =======================================================
 *  ICIME 2025 移动端适配样式
 *  功能：确保所有内容在移动设备上不超出屏幕宽度
 *  适用：平板 (≤768px) 和手机 (≤576px)
 * =====================================================*/

/* =======================================================
 * 平板及以下设备 (≤768px)
 * =====================================================*/
@media only screen and (max-width: 768px) {

  /* 1. 基本排版 ------------------------------------------------*/
  body { 
    padding-top: 60px; /* 原来 80px，移动端减小顶部空间 */
  }

  h1 { font-size: 1.75rem; }    /* 约 28px */
  h2 { font-size: 1.5rem; }     /* 约 24px */
  h3 { font-size: 1.25rem; }    /* 约 20px */
  h4, h5 { font-size: 1rem; }   /* 约 16px */
  h6 { font-size: 0.9rem; }

  p, li, td, th {
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 文本换行优化 */
  p, div, span, li, td, th, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  /* 2. 容器和布局 ----------------------------------------------*/
  .container {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden; /* 防止内容横向溢出 */
  }
  
  /* 防止任何元素溢出屏幕 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* 但图片、视频、iframe需要保持宽度自适应 */
  img, video, iframe, table {
    max-width: 100%;
  }

  /* Bootstrap 2 栅格系统：所有列在移动端堆叠显示 */
  .row-fluid [class*="span"] {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: block;
  }

  /* 3. 图片和媒体 ----------------------------------------------*/
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Logo 适配 */
  header #logo {
    width: 160px !important;      /* 220 → 160 */
    height: 60px !important;      /* 80 → 60 */
    background-size: contain !important;
    background-position: center !important;
  }

  /* 4. 导航栏 --------------------------------------------------*/
  header.navbar .navbar-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  header.navbar .nav {
    margin-top: 10px;
  }

  header.navbar .nav > li > a {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  /* 折叠按钮 */
  .btn-navbar {
    padding: 12px 15px;
    margin-top: 10px;
    margin-right: 5px;
  }

  /* 展开的导航菜单 */
  .nav-collapse.collapse.in {
    width: 100%;
    overflow: visible;
  }

  .nav-collapse .nav > li {
    float: none;
    display: block;
  }

  .nav-collapse .nav > li > a {
    display: block;
    border-top: 1px solid #f0f0f0;
  }

  /* 下拉菜单 */
  .dropdown-menu {
    position: static !important;
    float: none;
    width: auto;
    margin: 0;
    box-shadow: none;
    border: none;
    background: #f9f9f9;
  }

  .dropdown-menu li a {
    padding-left: 30px !important;
  }

  /* 5. 表格 ----------------------------------------------------*/
  table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  }

  table td, table th {
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.85rem;
    padding: 8px 5px;
    /* 强制换行，避免表格撑宽 */
    white-space: normal;
  }

  /* 确保表格内容不会太宽 */
  table td {
    min-width: 80px;
    max-width: 300px; /* 限制最大宽度 */
  }
  
  /* 表格内的链接也要能换行 */
  table a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* 6. 按钮 ----------------------------------------------------*/
  .btn {
    padding: 10px 16px;
    font-size: 0.9rem;
    white-space: normal; /* 允许按钮文字换行 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
  }
  
  /* 按钮内的文本也要能正常换行 */
  .btn a {
    white-space: normal;
    word-wrap: break-word;
  }

  .btn-large, .btn.btn-large {
    width: 100%;
    margin-bottom: 10px;
  }

  .btn.btn-transparent {
    border-width: 2px;
  }

  /* 7. 轮播 Slider -----------------------------------------------*/
  #slide-show {
    min-height: 300px;
  }

  .sl-slider-wrapper {
    height: auto !important;
    min-height: 300px;
  }

  #slide-show .sl-slide-inner {
    padding: 20px 10px;
  }

  #slide-show h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  #slide-show h3, #slide-show h4 {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* 轮播图片居中显示，不再右浮动 */
  #slide-show img.pull-right {
    float: none !important;
    margin: 0 auto 15px !important;
    display: block !important;
    max-width: 80% !important;
  }

  /* 轮播导航箭头 */
  .nav-arrows {
    display: none; /* 移动端隐藏左右箭头，节省空间 */
  }

  /* 8. 表单 ----------------------------------------------------*/
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100%;
    min-height: 45px;
    font-size: 1rem;
  }

  textarea {
    min-height: 120px;
  }

  /* 9. 区块和内容 ----------------------------------------------*/
  body > section {
    padding: 30px 0;
  }

  .gap {
    margin-bottom: 30px;
  }

  .big-gap {
    margin-bottom: 50px;
  }

  /* Services 区块的图标和内容 */
  .media .pull-left {
    float: none !important;
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }

  .media-body {
    margin-left: 0 !important;
  }

  /* 10. 底部信息 -----------------------------------------------*/
  #bottom,
  #footer {
    text-align: center;
  }

  #bottom .span3,
  #bottom .span4 {
    margin-bottom: 30px;
  }

  #footer .cp {
    margin-top: 10px;
    text-align: center;
  }

  ul.social {
    margin-top: 15px;
    text-align: center;
  }

  /* 11. 侧边栏小部件 -------------------------------------------*/
  .widget {
    margin-bottom: 20px;
  }

  /* 12. 文件链接和下载 -----------------------------------------*/
  /* 超链接换行优化 - 防止长URL溢出 */
  a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    /* 对于特别长的URL，允许在任何字符处断行 */
    overflow-wrap: anywhere;
  }
  
  /* 邮箱和URL链接特殊处理 */
  a[href^="mailto:"],
  a[href^="http://"],
  a[href^="https://"] {
    word-break: break-all; /* 长URL可以在任何位置断行 */
    overflow-wrap: anywhere;
  }
  
  /* 导航菜单链接不换行，避免影响美观 */
  .nav a,
  .navbar a,
  .dropdown-menu a {
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
  }

  /* 13. 特殊元素 -----------------------------------------------*/
  /* 重要日期表格 */
  .main-info table {
    font-size: 0.85rem;
  }

  .main-info table td {
    padding: 8px 5px;
  }

  /* 学校logo区域 */
  .center.gap img {
    max-width: 100%;
    height: auto !important;
    margin: 5px;
  }
  
  /* 标题区域文本换行 */
  .center h2, .center h3, .center h4 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 主要信息区域文本 */
  .main-info p, .main-info h3, .main-info h4 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* 媒体对象中的文本 */
  .media-heading, .media-body p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 防止代码或预格式化文本溢出 */
  pre, code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
  }

  /* 视频播放器 */
  video[width] {
    width: 100% !important;
  }

  /* 14. 画廊/相册 ----------------------------------------------*/
  ul.gallery.col-4 li {
    width: 50%; /* 4列改为2列 */
  }

  ul.gallery.col-3 li {
    width: 50%; /* 3列改为2列 */
  }

  ul.gallery.col-2 li {
    width: 100%; /* 2列改为1列 */
  }
}

/* =======================================================
 * 手机设备 (≤576px)
 * =====================================================*/
@media only screen and (max-width: 576px) {

  /* 1. 进一步缩小字体 -----------------------------------------*/
  body {
    font-size: 14px;
  }

  h1 { font-size: 1.5rem; }     /* 约 24px */
  h2 { font-size: 1.25rem; }    /* 约 20px */
  h3 { font-size: 1.1rem; }     /* 约 18px */
  h4, h5 { font-size: 0.95rem; }

  /* 2. 减少间距 -----------------------------------------------*/
  body > section {
    padding: 20px 0;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .gap {
    margin-bottom: 20px;
  }

  /* 3. 轮播 ---------------------------------------------------*/
  #slide-show {
    min-height: 250px;
  }

  #slide-show h2 {
    font-size: 1.25rem;
  }

  #slide-show h3, #slide-show h4 {
    font-size: 1rem;
  }

  #slide-show img.pull-right {
    max-width: 90% !important;
  }

  /* 4. 表格 ---------------------------------------------------*/
  table td, table th {
    font-size: 0.8rem;
    padding: 6px 4px;
  }

  /* 5. Logo ---------------------------------------------------*/
  header #logo {
    width: 140px !important;
    height: 50px !important;
  }

  /* 6. 按钮 ---------------------------------------------------*/
  .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  /* 7. 导航 ---------------------------------------------------*/
  header.navbar .nav > li > a {
    padding: 10px 15px;
    font-size: 0.85rem;
  }

  /* 8. 图标 ---------------------------------------------------*/
  .icon-medium {
    font-size: 16px;
    padding: 8px;
  }

  /* 9. 画廊/相册 - 全部单列显示 --------------------------------*/
  ul.gallery li {
    width: 100% !important;
  }

  /* 10. 社交媒体图标 ------------------------------------------*/
  ul.social > li > a {
    font-size: 20px;
  }

  /* 11. 视频 --------------------------------------------------*/
  video[width] {
    width: 100% !important;
    max-height: 250px;
  }

  /* 12. 底部版权信息 ------------------------------------------*/
  #footer .row-fluid > div {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* =======================================================
 * 横屏模式优化 (Landscape)
 * =====================================================*/
@media only screen and (max-width: 768px) and (orientation: landscape) {
  
  /* 轮播高度调整 */
  #slide-show {
    min-height: 200px;
  }

  .sl-slider-wrapper {
    min-height: 200px;
  }

  /* 导航不要占太多高度 */
  body {
    padding-top: 50px;
  }

  header #logo {
    height: 50px !important;
  }
}

/* =======================================================
 * 打印样式优化
 * =====================================================*/
@media print {
  
  header.navbar,
  #footer,
  .nav-arrows,
  ul.social {
    display: none;
  }

  body {
    padding-top: 0;
  }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}