/**
 * Mobile CSS
 * 移动端样式覆盖
 * 适用于屏幕宽度 < 768px
 */

/* ========================================
   Content List Layout - 2 Columns
   内容列表布局 - 2列
   ======================================== */

/* 列表容器 */
.flow-image .article_list,
.resource-section .article_list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0 5px;
}

/* 首页资源卡片 - 2列 */
.flow-image .article_list li,
.resource-section .article_list li {
  float: none !important;
  width: 50% !important;
  padding: 5px !important;
  box-sizing: border-box;
}

/* 分类页资源卡片 */
.archive-list .item,
.resource-list .item {
  width: calc(50% - 10px);
}

/* 首页推荐区域 */
.index-recommend .item {
  width: calc(50% - 8px);
}

/* 热门标签列表 */
.tagslist li {
  width: calc(50% - 10px);
}

/* 卡片图片容器 - 保持284:160比例 (56.34%) */
.resource-section .post_left,
.flow-image .post_left {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-bottom: 56.34% !important; /* 160/284 = 0.5634 */
  overflow: hidden;
}

.resource-section .post_left img,
.flow-image .post_left img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* 视频预览也保持比例 */
.resource-section .post_left video,
.flow-image .post_left video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卡片标题字体调整 - 确保文字不被遮挡 */
.post_right {
  position: relative;
  overflow: visible;
  padding: 5px;
}

.post_right h2 {
  font-size: 12px;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.post_right h2 a {
  font-size: 12px;
  color: #333;
  display: block;
}

/* ========================================
   Header Adjustments
   顶部导航调整
   ======================================== */
.index_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Header内部布局 - 确保垂直居中 */
.header_inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  height: 68px;
  padding: 0 10px;
  overflow: visible !important; /* 覆盖main.css的overflow:hidden */
}

/* 页面顶部留白 - 与固定导航栏高度一致 */
body {
  padding-top: 68px !important;
}

/* Logo显示 - 垂直居中 */
.logo,
h1.logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 68px;
  min-width: 100px; /* 确保logo有足够宽度 */
  float: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.logo a {
  display: flex !important;
  align-items: center;
  height: 100%;
}

.logo img,
.logo .logo-pc {
  display: block !important;
  height: 30px;
  width: auto;
  max-width: 100px;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important; /* 覆盖style.css的margin-bottom: 100px */
}

/* 隐藏logo中的文字span */
.logo span {
  display: none;
}

/* 移动端分类下拉 - 紧跟logo左侧 */
.mobile-category-dropdown {
  display: flex !important;
  align-items: center;
  height: 68px;
  margin-left: 10px; /* 紧跟logo */
  margin-right: auto; /* 把右侧元素推到最右边 */
}

.category-toggle {
  display: flex !important;
  align-items: center;
  height: 44px;
  padding: 0 10px;
}

/* 移动端右侧按钮组 - 靠右对齐 */
.mobile-header-right {
  display: flex !important;
  align-items: center;
  height: 68px;
  gap: 5px;
  margin-left: auto; /* 确保靠右 */
}

.mobile-search-toggle,
.mobile-menu-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
}

/* ========================================
   Main Content Adjustments
   主内容区调整
   ======================================== */
.main {
  margin-top: 15px;
  padding: 0 10px;
  padding-bottom: 20px;
}

.main_inner {
  padding: 0;
}

/* 面包屑导航 */
.header-mbx-nav {
  padding: 10px;
  font-size: 12px;
}

/* ========================================
   Sidebar Hidden
   侧边栏隐藏
   ======================================== */
.main_right {
  display: none;
}

.main_left {
  width: 100%;
  float: none;
}

/* ========================================
   Footer Adjustments
   底部调整
   ======================================== */

/* 隐藏footer菜单 */
.footer_menus {
  display: none !important;
}

/* 底部版权信息 */
.fot {
  padding: 15px 10px;
  text-align: center;
}

.fot .footer_copy {
  font-size: 0; /* 隐藏©符号 */
  line-height: 1.8;
}

/* 让所有span显示并恢复字体大小 */
.fot .footer_copy span {
  font-size: 11px;
  display: inline;
  margin-left: 5px !important;
}

/* 隐藏第一个span（2025年份） */
.fot .footer_copy > span:first-of-type {
  display: none !important;
}

/* ========================================
  Article Page Adjustments
  文章页调整
======================================== */

.article-title h1 {
  font-size: 18px;
  line-height: 1.4;
}

.article-meta {
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.article-meta > span {
  margin-right: 10px;
}

.content_left {
  font-size: 14px;
  line-height: 1.8;
}

.content_left p {
  font-size: 14px;
}

/* ========================================
   Filter Box Adjustments
   筛选框调整
   ======================================== */
.fl {
  display: none !important;
}

.home-filter {
  display: none !important;
}

/* ========================================
   Banner/Slider Adjustments
   轮播图调整 - 移动端隐藏轮播图区域
   ======================================== */
.cx-header-slider,
.header-slider,
.index-slider,
.swiper-container,
.header-banner,
.index-banner {
  display: none !important;
}

/* 隐藏首页顶部推荐区域 */
.index-recommend-section,
.recommend-section,
.header-recommend {
  display: none !important;
}

/* 隐藏tk-header的padding，消除空白 */
.tk-header {
  padding-top: 0 !important;
  min-height: 0 !important;
}

.update_area {
  margin-top: 10px;
}

/* 最新资源区域调整 */
.index-latest-resource {
  margin-top: 0;
}

.resource-section {
  padding-top: 0;
}

/* 资源区块布局调整 */
.resource-category-section {
  padding: 0;
}

/* 标题行容器 */
.resource-section .nav-row,
.nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 5px !important;
  padding: 10px !important;
  width: 100%;
}

.resource-section .nav-row h3,
.nav-row h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}

.nav-row h3 a {
  line-height: 1.2;
}

/* nav-row内的"查看更多"链接 - 强制在同一行 */
.resource-section .nav-row .nav-more,
.nav-row .nav-more {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  line-height: 1.2;
  margin-right: 10px;
  padding: 0 !important;
  flex-shrink: 0;
  position: static !important; /* 覆盖可能的absolute定位 */
}

.nav-row .nav-more:hover {
  color: var(--primary-color, #ff5c5c);
}

/* 隐藏原来位置的"查看更多"按钮 - 只保留nav-row内的 */
.resource-category-section > div[data-subcategory] > .btn-more {
  display: none !important;
}

/* 隐藏nav-row h3后面紧跟的查看更多（桌面端样式残留） */
.nav-row h3 + a.nav-more:not(:last-child),
.resource-section .btn-more {
  display: none !important;
}

/* ========================================
   Section Titles
   区块标题调整
   ======================================== */
section h3,
.widget h3 {
  font-size: 16px;
  padding: 0;
}

/* nav-row内的h3特殊处理 */
.nav-row h3 {
  padding: 0 !important;
}

/* ========================================
   Buttons and Links
   按钮和链接调整
   ======================================== */
.btn {
  padding: 8px 15px;
  font-size: 13px;
}

/* ========================================
   Forms
   表单调整
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 16px; /* 防止iOS缩放 */
}

/* ========================================
   Tables
   表格调整
   ======================================== */
.content table {
  font-size: 13px;
}

.content table th,
.content table td {
  padding: 8px 5px;
}

/* ========================================
   Comments
   评论区调整
   ======================================== */
.comment-item {
  flex-direction: column;
}

.comment-item .comment-avatar {
  margin-right: 0;
  margin-bottom: 10px;
}

.comment-item .comment-avatar img {
  width: 40px;
  height: 40px;
}

/* ========================================
   Download Buttons
   下载按钮调整
   ======================================== */
.down_botton {
  position: static;
  width: 100%;
  text-align: center;
  margin-top: 15px;
}

.down_botton a {
  display: inline-block;
  margin: 5px;
}

/* ========================================
   VIP Page
   VIP页面调整
   ======================================== */
.vip-cards {
  flex-direction: column;
}

.vip-card {
  width: 100%;
  margin-bottom: 15px;
}

/* ========================================
   User Center
   用户中心调整
   ======================================== */
.user-tabs {
  overflow-x: auto;
  white-space: nowrap;
}

.user-tab {
  padding: 10px 15px;
  font-size: 13px;
}

/* ========================================
   Modal/Popup Adjustments
   弹窗调整
   ======================================== */
.xcConfirm .popBox {
  width: 90%;
  max-width: none;
  margin-left: -45%;
  left: 50%;
}

/* ========================================
   Misc Adjustments
   其他调整
   ======================================== */

/* 禁用hover效果（触摸设备） */
@media (hover: none) {
  .postitems li:hover {
    transform: none;
    box-shadow: none;
  }
}

/* 优化触摸目标大小 */
a, button {
  min-height: 44px;
  min-width: 44px;
}

/* 防止文字选择 */
.mobile-menu-toggle,
.mobile-search-toggle,
.category-toggle {
  -webkit-user-select: none;
  user-select: none;
}


/* ========================================
   Index Flow Area
   首页流式布局区域
   ======================================== */
.index_flow_area {
  margin-top: 0 !important;
}

/* ========================================
   Related Posts (相关推荐)
   文章页底部相关推荐 - 2列布局 + 固定宽高比
   ======================================== */
.postitems ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px !important;
}

.postitems li {
  width: 50% !important;
  padding: 5px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* 图片容器 - 保持284:160比例 (56.34%) 与首页一致 */
.postitems li .thumbnail {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-bottom: 56.34% !important;
  overflow: hidden;
  display: block;
}

.postitems li .thumbnail img,
.postitems li .thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  margin: 0 !important;
}

.postitems li h2 {
  font-size: 12px;
  line-height: 1.4;
  margin: 5px 0 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========================================
   Article Tags (文章标签)
   文章页底部标签 - 左对齐，文字垂直居中
   ======================================== */
.article-tags {
  text-align: left;
}

.article-tags a {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 4px 8px;
  line-height: 1.2;
}


/* ========================================
   移动端登录功能禁用
   隐藏所有登录相关UI元素
   ======================================== */

/* 隐藏汉堡菜单按钮 */
.mobile-menu-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 隐藏用户滑出面板和遮罩层 */
.user-slide-panel,
.user-panel-mask {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 隐藏面板内的登录按钮（双重保险） */
.panel-guest .btn-login,
.panel-guest .btn-register {
  display: none !important;
  pointer-events: none !important;
}

/* 隐藏任何登录相关链接 */
a[href*="/login"] {
  pointer-events: none !important;
  opacity: 0.5;
}