/* 移动端优化样式 */

/* 基础移动端样式重置 */
@media (max-width: 767px) {
  /* 基础字体大小调整 */
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* 标题字体大小优化 */
  h1 {
    font-size: 1.8rem !important;
    line-height: 1.3;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 1.3rem !important;
    line-height: 1.3;
  }
  
  h4 {
    font-size: 1.2rem !important;
    line-height: 1.3;
  }
  
  h5 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
  
  h6 {
    font-size: 1rem !important;
    line-height: 1.3;
  }
  
  /* 容器宽度优化 */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* 网格布局优化 */
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* 卡片布局优化 */
  .category-card,
  .blog-card,
  .search-result-item {
    margin-bottom: 20px;
    padding: 15px;
  }
  
  /* 图片响应式优化 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 按钮大小优化 */
  .btn, .search-btn, .blog-action-btn {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px; /* 触摸友好尺寸 */
  }
  
  /* 表单元素优化 */
  .form-control, .search-input {
    padding: 12px 15px;
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
  }
  
  /* 导航栏优化 */
  .navbar-nav {
    text-align: center;
  }
  
  .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 16px;
  }
  
  /* 侧边栏优化 */
  .col-lg-4 {
    margin-top: 30px;
  }
  
  /* 分页优化 */
  .pagination-item {
    width: 35px;
    height: 35px;
    font-size: 14px;
    margin: 0 2px;
  }
  
  /* 文章列表优化 */
  .blog-list-item {
    flex-direction: column;
  }
  
  .blog-list-thumb {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .blog-list-content {
    width: 100%;
  }
  
  /* 文章详情优化 */
  .blog-detail-content {
    padding: 20px;
  }
  
  .blog-detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .blog-detail-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  /* 搜索页面优化 */
  .search-form {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  /* 分类页面优化 */
  .category-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* 评论区域优化 */
  .comment-form {
    padding: 20px;
  }
  
  .comment-item {
    padding: 15px 0;
  }
  
  /* 页脚优化 */
  .footer-widget {
    margin-bottom: 30px;
  }
  
  /* 隐藏不必要的元素 */
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
}

/* 超小屏幕优化 (小于576px) */
@media (max-width: 575px) {
  body {
    font-size: 13px;
  }
  
  h1 {
    font-size: 1.6rem !important;
  }
  
  h2 {
    font-size: 1.4rem !important;
  }
  
  h3 {
    font-size: 1.2rem !important;
  }
  
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .category-card,
  .blog-card,
  .search-result-item {
    padding: 12px;
  }
  
  .btn, .search-btn, .blog-action-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .form-control, .search-input {
    padding: 10px 12px;
    font-size: 16px;
  }
}

/* 平板设备优化 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 15px;
  }
  
  .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .col-lg-8 {
    margin-bottom: 30px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 增加触摸目标尺寸 */
  a, button, .btn, .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 移除悬停效果 */
  .category-card:hover,
  .blog-card:hover,
  .search-result-item:hover {
    transform: none;
  }
  
  /* 增加触摸反馈 */
  .btn:active,
  .nav-link:active,
  .category-card:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* 横屏优化 */
@media (max-width: 767px) and (orientation: landscape) {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  
  .container {
    padding-top: 60px;
  }
  
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 高性能滚动优化 */
@media (max-width: 767px) {
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  .container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* 加载优化 */
@media (max-width: 767px) {
  .lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .lazy-load.loaded {
    opacity: 1;
  }
}

/* 字体加载优化 */
@media (max-width: 767px) {
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  .font-loaded {
    font-family: "Gordita", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

/* 动画性能优化 */
@media (max-width: 767px) {
  .category-card,
  .blog-card,
  .search-result-item {
    will-change: transform;
  }
  
  /* 减少动画复杂度 */
  a, button, img, input {
    transition: all 0.3s ease;
  }
}

/* 错误边界处理 */
@media (max-width: 767px) {
  .error-boundary {
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
  }
  
  .error-message {
    color: #dc3545;
    font-size: 14px;
  }
}

/* 打印样式优化 */
@media print {
  .navbar,
  .footer,
  .sidebar,
  .search-form,
  .pagination {
    display: none !important;
  }
  
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}