/**
 * 中医茶疗大会 - 移动端样式优化
 * 专注于解决移动端显示问题，包括标题过大和布局不优雅的问题
 */

/* 移动端通用样式 */
@media (max-width: 768px) {
  /* 标题样式优化 */
  .hero-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  
  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }
  
  .section-title {
    font-size: 18px !important;
    margin-bottom: 15px !important;
  }
  
  .section-subtitle {
    font-size: 13px !important;
    margin-top: -10px !important;
    margin-bottom: 15px !important;
  }
  
  .card-title {
    font-size: 16px !important;
  }
  
  .card-text {
    font-size: 13px !important;
  }
  
  /* 导航栏优化 */
  .navbar-brand span {
    font-size: 15px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .navbar {
    padding: 8px 0 !important;
    height: auto !important;
  }
  
  /* 间距和布局优化 */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .hero {
    padding: 30px 0 !important;
  }
  
  section {
    padding: 30px 0 !important;
  }
  
  /* 卡片和列表优化 */
  .card, 
  .project-card,
  .collection-card {
    margin-bottom: 15px !important;
    border-left: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
  }
  
  .card-body {
    padding: 15px !important;
  }
  
  .info-item {
    padding: 15px !important;
    border-left: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
  }
  
  /* 按钮优化 */
  .btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
  
  .btn-lg {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }
  
  /* Vant 组件优化 */
  .van-card {
    background-color: #fff !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    border-left: none !important;
  }
  
  .van-card__title {
    font-size: 15px !important;
    font-weight: bold !important;
  }
  
  .van-card__desc {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 4px !important;
    -webkit-line-clamp: 2 !important;
  }
  
  .van-card__bottom {
    margin-top: 8px !important;
  }
  
  .van-cell {
    font-size: 15px !important;
    padding: 12px 15px !important;
  }
  
  .van-notice-bar {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  
  /* Vant 按钮文字颜色修复 */
  .van-button--primary {
    color: #ffffff !important;
  }
  
  .van-button--plain {
    color: #006d55 !important;
    background-color: transparent !important;
  }
  
  /* 标签颜色修复 */
  .van-tag--plain {
    background-color: transparent !important;
  }
  
  /* 新的抽屉菜单样式 */
  .mobile-drawer-popup {
    box-shadow: 0 0 10px rgba(0,0,0,0.08) !important;
    z-index: 2001 !important;
  }
  
  .drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  
  .drawer-close {
    color: #666 !important;
    font-size: 16px !important;
  }
  
  /* 简洁菜单列表样式 */
  .drawer-menu-list {
    padding: 8px 0 !important;
  }
  
  .drawer-menu-item {
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #323233 !important;
    position: relative !important;
    transition: background-color 0.2s !important;
  }
  
  .drawer-menu-item:active {
    background-color: #f2f3f5 !important;
  }
  
  .drawer-menu-item.active {
    color: #006d55 !important;
    background-color: #f7f8fa !important;
  }
  
  .drawer-menu-item.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 16px !important;
    background-color: #006d55 !important;
  }
  
  .drawer-menu-item.login {
    margin-top: 24px !important;
    border-top: 1px solid #f5f5f5 !important;
    padding-top: 16px !important;
  }
  
  /* 移动端底部导航栏 */
  .mobile-tabbar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background-color: white !important;
  }
  
  /* 内容间距优化，避免底部导航遮挡 */
  .page-content {
    padding-bottom: 60px !important;
  }
  
  /* 表单元素优化 */
  .form-control, .form-select {
    font-size: 15px !important;
    padding: 10px !important;
  }
  
  .form-group {
    margin-bottom: 15px !important;
  }
  
  /* 移动端专用信息区块 */
  .mobile-info-item {
    background-color: #fff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
    border-left: none !important;
  }
  
  .mobile-info-icon {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }
  
  .mobile-info-icon .van-icon {
    font-size: 18px !important;
    margin-right: 8px !important;
    color: var(--primary-color) !important;
  }
  
  /* 移动端文章标题 */
  .mobile-section-title {
    font-size: 17px !important;
    font-weight: bold !important;
    margin: 20px 0 12px 0 !important;
    border-left: none !important;
  }
  
  /* 移动端新闻列表 */
  .mobile-news-item {
    background: #fff !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
    border-left: none !important;
  }
  
  .mobile-news-date {
    font-size: 12px !important;
    color: #999 !important;
    margin-bottom: 6px !important;
  }

  /* 项目展示页优化 */
  .projects-title {
    font-size: 24px !important;
  }

  .projects-description {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  .filter-container {
    padding: 15px !important;
    margin-bottom: 20px !important;
  }

  .filter-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .filter-options {
    flex-wrap: wrap !important;
  }

  .filter-option {
    font-size: 13px !important;
    padding: 5px 12px !important;
  }

  .project-card-content,
  .project-content {
    padding: 15px !important;
  }

  .project-title,
  .project-card-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .project-description,
  .project-card-text {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  
  /* 统一卡片样式 */
  .committee-card,
  .feature-card,
  .contact-card,
  .schedule-card,
  .timeline-content,
  .featured-project,
  .project-card,
  .collection-card {
    border-left: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
  }
  
  /* 特色项目响应式布局 */
  .featured-project .featured-content {
    flex-direction: column !important;
  }
  
  .featured-image {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }
  
  .featured-details {
    width: 100% !important;
  }

  /* 确保页脚在移动端不显示 */
  .footer.desktop-only {
    display: none !important;
  }
  
  /* 修复PC端按钮在移动端的显示问题 */
  .btn-primary,
  .btn-secondary {
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
  }
  
  .btn-outline {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
  }

  /* 通用样式 */
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
  
  /* 页脚处理 */
  footer.footer {
    display: none !important;
  }
  
  /* 抽屉菜单打开按钮 */
  #mobile-menu-toggle {
    z-index: 1000;
    position: relative;
  }

  /* 强制隐藏移动端上出现的底部导航链接 */
  nav:not(.navbar),
  .footer,
  footer,
  .desktop-only,
  .footer-links,
  .footer-content,
  .footer-bottom,
  body > nav:not(.navbar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -9999 !important;
  }
  
  /* 特定处理底部可能露出的导航链接 */
  body > a[href*="index.html"],
  body > a[href*="conference-info.html"],
  body > a[href*="news.html"],
  body > a[href*="collection.html"],
  body > a[href*="projects.html"],
  body > a[href*="ranking.html"],
  body > a[href*="expert-reviews.html"],
  body > a[href*="login.html"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
  }
}

/* 确保Vant组件样式能够覆盖默认样式 */
.van-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.van-button--primary.van-button--plain {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.van-tag {
  color: #ffffff !important;
}

.van-tag--plain {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.van-tabbar {
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1) !important;
  height: 50px !important;
}

.van-hairline--top-bottom::after, 
.van-hairline-unset--top-bottom::after {
  border-width: 0 !important;
}

/* 小屏幕加强优化 */
@media (max-width: 375px) {
  .hero-title {
    font-size: 18px !important;
  }
  
  .navbar-brand span {
    max-width: 100px !important;
  }
  
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .mobile-section-title {
    font-size: 16px !important;
  }
}

/* 专家评审页面特殊处理 */
.mobile-special-fix {
  /* 确保专家评审页面底部不会露出导航链接 */
  position: relative;
  z-index: 1;
}

.mobile-special-fix + a,
.mobile-special-fix ~ a,
body > a:not(.navbar-brand):not(.nav-link):not(.breadcrumb-item),
body > a[href*="index.html"],
body > a[href*="conference-info.html"],
body > a[href*="news.html"],
body > a[href*="collection.html"],
body > a[href*="projects.html"],
body > a[href*="ranking.html"],
body > a[href*="expert-reviews.html"],
body > a[href*="login.html"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 1px !important;
  white-space: nowrap !important;
}