/**
 * Tablet CSS
 * 平板端样式覆盖
 * 适用于屏幕宽度 768px - 991px
 */

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

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

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

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

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

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

/* 卡片图片容器 - 保持284:160比例 (56.34%) */
.resource-section .post_left,
.flow-image .post_left {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-bottom: 56.34% !important;
  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;
}

/* ========================================
   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 15px;
  overflow: visible !important;
}

/* Logo样式 */
.logo,
h1.logo {
  display: flex !important;
  align-items: center;
  height: 68px;
  float: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

.logo img,
.logo .logo-pc {
  height: 32px;
  width: auto;
  margin: 0 !important;
}

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

/* 右侧按钮组 */
.mobile-header-right {
  display: flex !important;
  align-items: center;
  height: 68px;
  gap: 5px;
  margin-left: auto;
}

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

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

.main_inner {
  padding: 0;
}

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

/* ========================================
   Sidebar Adjustments
   侧边栏调整
   ======================================== */
.main_right {
  display: none;
}

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

/* ========================================
   Footer Adjustments
   底部调整
   ======================================== */
.fot {
  padding: 20px 15px;
}

.footer_menus {
  display: block;
}

.footer_menus a {
  padding: 0 10px;
  font-size: 13px;
}

/* ========================================
   Article Page Adjustments
   文章页调整
   ======================================== */
.article-title {
  padding: 15px;
}

.article-title h1 {
  font-size: 20px;
}

.article-meta {
  flex-wrap: wrap;
  gap: 10px;
}

.content_left {
  padding: 15px;
}

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

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

/* ========================================
   Banner/Slider Adjustments
   轮播图调整
   ======================================== */
.cx-header-slider {
  margin-top: 0;
}

/* ========================================
   Card Hover Effects
   卡片悬停效果（平板端禁用部分效果）
   ======================================== */
.postitems li:hover {
  transform: none;
}


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

/* 隐藏桌面端样式的btn-more */
.resource-section .btn-more {
  display: none !important;
}

/* 确保只有nav-row内的nav-more显示 */
.nav-row .nav-more {
  display: block !important;
}


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