/* ============================================================
   YSU SECURITY DEPARTMENT - SECONDARY PAGES RESPONSIVE
   File: css/subpage-responsive.css
   Covers: Low-res office PCs (1366/1280), iPad/Tablets, and Mobile
   Pure CSS Adaptation - Zero HTML Modifications
   ============================================================ */

/* ── 1. 低分辨率办公电脑 / 笔记本屏幕 (1025px - 1440px, 如 1366x768, 1280x800) ── */
@media (max-width: 1440px) {
  .subpage-hero {
    height: 38vh;
    min-height: 270px;
    max-height: 400px;
    padding-top: 90px;
  }

  .subpage-header-title {
    font-size: 1.95rem;
  }

  .subpage-body {
    padding: 40px 0 65px 0;
  }

  .subpage-grid {
    grid-template-columns: 260px 1fr;
    gap: 32px;
  }

  .subpage-content {
    padding: 34px 30px;
  }

  .sidebar-parent-label {
    padding: 11px 16px;
    font-size: 1rem;
  }

  .sidebar-menu-item a {
    padding: 9px 14px;
    font-size: 0.95rem;
  }
}

/* ── 2. 平板横屏 / 紧凑型办公屏幕 (769px - 1024px, 如 iPad Pro / iPad 横屏) ── */
@media (max-width: 1024px) {
  .subpage-hero {
    height: auto;
    min-height: 230px;
    padding-top: 95px;
  }

  .subpage-hero-header-text {
    padding-bottom: 14px;
  }

  .subpage-header-title {
    font-size: 1.75rem;
  }

  .subpage-header-title-badge {
    height: 30px;
  }

  .subpage-header-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .breadcrumb-nav {
    padding: 7px 14px;
    font-size: 0.8125rem;
    gap: 6px;
  }

  .subpage-body {
    padding: 32px 0 60px 0;
  }

  .subpage-grid {
    grid-template-columns: 230px 1fr;
    gap: 24px;
  }

  .subpage-sidebar {
    top: 95px;
    padding: 20px 15px;
    border-radius: 14px;
  }

  .sidebar-title {
    font-size: 1.1rem;
    margin-bottom: 14px;
  }

  .sidebar-parent-label {
    padding: 10px 13px;
    font-size: 0.9375rem;
  }

  .sidebar-menu-item a {
    padding: 9px 12px;
    font-size: 0.875rem;
  }

  .sidebar-sub-item a {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  .sidebar-contact-card {
    margin-top: 20px;
    padding: 16px 14px;
  }

  .sidebar-contact-card-title {
    font-size: 0.95rem;
  }

  .sidebar-contact-card-phone {
    font-size: 1.15rem;
  }

  .subpage-content {
    padding: 26px 22px;
    border-radius: 14px;
  }

  .duties-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .org-branches {
    grid-template-columns: repeat(2, 1fr);
  }

  .boda-common-row {
    gap: 14px;
    padding: 13px 10px;
  }

  .common-row-title {
    font-size: 1rem;
  }

  .article-thumb-wrapper {
    width: 190px;
    min-width: 190px;
    height: 130px;
  }
}

/* ── 3. 平板竖屏 / 移动设备主流断点 (<= 768px, 手机、小平板 iPad Mini) ── */
@media (max-width: 768px) {
  /* 当前位置与 Hero 区域在手机端上下整洁对齐，彻底消除挤压变形 */
  .subpage-hero {
    height: auto !important;
    min-height: 180px !important;
    padding: 85px 0 0 0 !important;
  }

  .subpage-hero-bg-element {
    display: none !important;
  }

  .subpage-hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  .subpage-hero-header-text {
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  .subpage-header-title {
    font-size: 1.45rem !important;
    gap: 10px !important;
    line-height: 1.25 !important;
  }

  .subpage-header-title-badge {
    width: 4px !important;
    height: 24px !important;
  }

  .subpage-header-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
  }

  /* 面包屑导航（当前位置）：移动端横向占满或自然滑动，底边紧贴 Banner 底部 */
  .breadcrumb-nav {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 14px !important;
    font-size: 0.8125rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    background: rgba(15, 23, 42, 0.7) !important;
  }

  /* 页面主网格：单列自上而下对齐，间距优化 */
  /* 全局防撑爆隔离，确保任何宽元素绝不撑破手机屏幕 */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
  }

  .subpage-body {
    padding: 20px 0 45px 0 !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .subpage-body .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* 页面主网格：移动端改为 Flex 单列自上而下，彻底阻断 Grid 的内在宽度撑破 */
  .subpage-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 16px !important;
  }

  /* 侧面导航：在移动端变为顶部整洁手风琴导航卡片，严格限制最大宽度 */
  .subpage-sidebar {
    position: static !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(31, 41, 106, 0.12) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .sidebar-title {
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .sidebar-menu,
  .subpage-sidebar ul:not(.sidebar-submenu) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: visible !important;
    white-space: normal !important;
    padding-bottom: 0 !important;
  }

  .sidebar-menu-item,
  .subpage-sidebar ul:not(.sidebar-submenu) > li {
    width: 100% !important;
  }

  .sidebar-menu-item a {
    padding: 11px 14px !important;
    font-size: 0.9375rem !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .sidebar-parent-label {
    padding: 11px 14px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
  }

  .sidebar-submenu {
    margin: 4px 0 4px 10px !important;
    padding: 4px 0 4px 10px !important;
  }

  .sidebar-sub-item a {
    padding: 9px 12px !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  /* 侧边联系卡片：移动端转为横向极简警务通联条 */
  .sidebar-contact-card {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .sidebar-contact-card-title {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .sidebar-contact-card-phone {
    font-size: 1.1rem !important;
    margin-bottom: 0 !important;
  }

  .sidebar-contact-card-sub {
    width: 100% !important;
    font-size: 0.75rem !important;
    margin-top: 2px !important;
    opacity: 0.85 !important;
  }

  /* 主内容区域对齐优化与严格防撑爆隔离 */
  .subpage-content {
    padding: 20px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .content-section {
    margin-bottom: 28px !important;
  }

  .section-head-title {
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
  }

  /* 机构与科室对齐 */
  .duty-card {
    padding: 18px !important;
    border-radius: 12px !important;
  }

  .duty-card-title {
    font-size: 1.05rem !important;
  }

  .duty-card-desc {
    font-size: 0.875rem !important;
  }

  .emergency-banner-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .dept-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 16px !important;
  }

  .dept-body {
    padding: 16px !important;
  }

  /* 文章正文页 (detail.html) 移动端优化 */
  .detail-header {
    padding-bottom: 16px !important;
    margin-bottom: 18px !important;
  }

  .detail-title {
    font-size: 1.3rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .detail-meta {
    justify-content: flex-start !important;
    gap: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  .detail-print-btn {
    display: none !important;
  }

  .detail-body,
  .boda-page-content,
  .boda-article-detail,
  .boda-article-detail .v_news_content,
  .boda-article-detail [id^="vsb_content"] {
    font-size: 0.95rem !important;
    line-height: 1.85 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .boda-article-detail {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .detail-body p,
  .boda-page-content p,
  .boda-article-detail p,
  .boda-article-detail .v_news_content p,
  .boda-article-detail [id^="vsb_content"] p {
    margin-bottom: 14px !important;
  }

  .boda-page-content h1,
  .boda-article-detail h1,
  .boda-page-content h2,
  .boda-article-detail h2 {
    font-size: 1.2rem !important;
    margin: 22px 0 12px 0 !important;
    padding-left: 10px !important;
    border-left-width: 3px !important;
  }

  .boda-page-content h3,
  .boda-article-detail h3 {
    font-size: 1.05rem !important;
    margin: 18px 0 10px 0 !important;
  }

  /* 表格在移动端自适应防撑爆：外层支持平滑横向滚动，单元格支持自然换行 */
  .table-responsive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 16px 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .boda-page-content table,
  .detail-body table,
  .official-doc-content table,
  .boda-article-detail table,
  .boda-article-detail .v_news_content table,
  .boda-article-detail [id^="vsb_content"] table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    border-collapse: collapse !important;
  }

  .boda-page-content table th,
  .boda-page-content table td,
  .boda-article-detail table th,
  .boda-article-detail table td,
  .boda-article-detail .v_news_content table th,
  .boda-article-detail .v_news_content table td,
  .boda-article-detail [id^="vsb_content"] table th,
  .boda-article-detail [id^="vsb_content"] table td {
    padding: 10px 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
  }

  /* 第一列（机构设置/科室名称等短标题）紧凑居中，其余长文本列自然折行充满 */
  .boda-page-content table th:first-child,
  .boda-page-content table td:first-child,
  .boda-article-detail table th:first-child,
  .boda-article-detail table td:first-child,
  .boda-article-detail .v_news_content table th:first-child,
  .boda-article-detail .v_news_content table td:first-child,
  .boda-article-detail [id^="vsb_content"] table th:first-child,
  .boda-article-detail [id^="vsb_content"] table td:first-child {
    white-space: nowrap !important;
    width: 1% !important;
    text-align: center !important;
    font-weight: 700 !important;
  }

  /* 正文附件卡片自适应 */
  .detail-attachment-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
  }

  .detail-attachment-box .attachment-download-btn,
  .detail-attachment-box a {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
  }

  /* 办事指南公文格式自适应 */
  .official-doc-content {
    font-size: 0.95rem !important;
    line-height: 1.9 !important;
  }

  .signature-row {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .official-attachment-item {
    flex-wrap: wrap !important;
    word-break: break-all !important;
    font-size: 0.9rem !important;
  }
}

/* ── 4. 手机常用宽度深入对齐 (<= 640px) ── */
@media (max-width: 640px) {
  /* 通用列表项自适应：由水平两端挤压转为纵向优雅对齐 */
  .boda-common-list {
    padding: 4px 6px !important;
    border-radius: 10px !important;
  }

  .boda-common-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px 6px !important;
  }

  .common-row-left {
    width: 100% !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .common-row-bullet {
    margin-top: 6px !important;
  }

  .common-row-title {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .common-row-date {
    font-size: 0.775rem !important;
    color: #94a3b8 !important;
    padding-left: 14px !important;
    align-self: flex-start !important;
  }

  /* 通知列表卡片自适应 */
  .boda-notice-card {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .article-date-box {
    flex-direction: row !important;
    width: 100% !important;
    min-width: auto !important;
    padding: 6px 12px !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .article-day {
    font-size: 1.35rem !important;
  }

  .article-month {
    margin-top: 0 !important;
    font-size: 0.8rem !important;
  }

  /* 密集通知列表自适应 */
  .boda-notice-dense-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .notice-dense-left {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .notice-dense-title {
    white-space: normal !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  .notice-dense-link {
    display: none !important;
  }

  /* 致敬校园守护者卡片矩阵自适应 */
  .boda-photo-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .photo-card-imgbox {
    height: 180px !important;
  }

  .photo-card-body {
    padding: 14px 16px !important;
  }

  .photo-card-title {
    font-size: 1rem !important;
  }

  .photo-card-desc {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }

  /* 图文列表卡片自适应 */
  .boda-article-card-thumb {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .article-thumb-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    height: 170px !important;
  }

  .article-title {
    font-size: 1.05rem !important;
  }

  .article-summary {
    font-size: 0.85rem !important;
  }

  /* 分页器在小屏幕自然换行，按钮微调防溢出 */
  .boda-pagination {
    gap: 4px !important;
    margin-top: 24px !important;
    flex-wrap: wrap !important;
  }

  .boda-pagination a,
  .boda-pagination span {
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
  }
}

/* ── 5. 超小屏手机极限适配 (<= 480px, 如 iPhone SE, 360px-414px 设备) ── */
@media (max-width: 480px) {
  .subpage-hero {
    min-height: 170px !important;
  }

  .subpage-header-title {
    font-size: 1.3rem !important;
  }

  .breadcrumb-nav {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }

  .subpage-content {
    padding: 16px 12px !important;
  }

  .subpage-sidebar {
    padding: 14px 10px !important;
  }

  .sidebar-parent-label {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }

  .sidebar-menu-item a {
    padding: 10px 12px !important;
    font-size: 0.875rem !important;
  }

  .detail-title {
    font-size: 1.2rem !important;
  }

  .detail-meta {
    font-size: 0.75rem !important;
    gap: 6px 10px !important;
  }

  .duty-card {
    padding: 14px !important;
  }

  .org-branches {
    grid-template-columns: 1fr !important;
  }
}