/* 响应式设计样式 */

/* 基础样式 - 适用于所有设备 */
html, body {
  overflow-x: hidden;
  width: 100%;
}

.container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* 小屏幕设备 (手机, 600px 及以下) */
@media only screen and (max-width: 600px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* 调整卡片边距和内边距 */
  .card, .card-hover, .card-bg, .form-section {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* 调整字体大小 */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  p, li, td, th {
    font-size: 0.875rem !important;
  }
  
  /* 调整按钮大小 */
  .btn, button[type="submit"], .action-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 网站负责人介绍卡片堆叠显示 */
  .flex-wrap {
    flex-direction: column !important;
  }
  
  /* 调整间距 */
  .mx-4 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  /* 二维码弹出样式调整 */
  .qrcode-popup {
    min-width: 250px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* 中等屏幕设备 (平板电脑, 768px 及以上) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  /* 调整卡片边距和内边距 */
  .card, .card-hover, .card-bg, .form-section {
    padding: 1rem !important;
  }
  
  /* 调整间距 */
  .p-6 {
    padding: 1.25rem !important;
  }
}

/* 大屏幕设备 (小型笔记本, 992px 及以上) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* 特大屏幕设备 (大型笔记本和桌面, 1200px 及以上) */
@media only screen and (min-width: 993px) {
  .container {
    max-width: 1140px;
  }
}

/* 超大屏幕设备 (大型桌面, 1400px 及以上) */
@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* 响应式导航栏 */
@media only screen and (max-width: 768px) {
  header .flex {
    flex-direction: column;
    align-items: center;
  }
  
  header .space-x-4 {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
  }
}

/* 响应式卡片网格 */
@media only screen and (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  .gap-4, .gap-6 {
    gap: 1rem !important;
  }
}

/* 调整首页推荐文章布局 */
@media only screen and (max-width: 768px) {
  .grid {
    display: block !important;
  }
  
  .grid > * {
    margin-bottom: 1rem;
  }
}

/* 确保图片在移动设备上能正确缩放 */
img {
  max-width: 100%;
  height: auto;
}

/* 调整表格在小屏设备上的显示 */
@media only screen and (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* 网站负责人介绍部分的响应式布局 */
@media only screen and (max-width: 768px) {
  .flex.justify-between {
    flex-direction: column;
  }
  
  .flex.justify-between > div {
    width: 100% !important;
    margin-bottom: 1rem;
  }
}

/* 文章页面响应式布局 */
@media only screen and (max-width: 992px) {
  .content-sidebar-layout {
    flex-direction: column !important;
  }
  
  .content-main, .content-sidebar {
    width: 100% !important;
  }
  
  .sidebar-sticky {
    position: static !important;
    max-height: none !important;
  }
  
  .knowledge-planet-container {
    position: static !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }
}

/* 处理长文本和代码块在小屏设备上的显示 */
@media only screen and (max-width: 768px) {
  pre, code {
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

/* 确保表单元素在小屏设备上的宽度适应 */
@media only screen and (max-width: 768px) {
  input, textarea, select {
    width: 100% !important;
  }
  
  .form-section {
    padding: 1rem !important;
  }
}

/* 网站负责人介绍卡片的特定优化 */
@media only screen and (max-width: 768px) {
  /* 负责人卡片在手机上完全堆叠 */
  [id^="网站负责人"] .flex {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* 头像居中显示 */
  [id^="网站负责人"] img {
    margin: 0 auto 1rem auto !important;
    max-width: 120px !important;
  }
  
  /* 按钮组在手机上居中显示 */
  [id^="网站负责人"] .qrcode-trigger,
  [id^="网站负责人"] button {
    margin: 0.5rem auto !important;
    display: block !important;
    width: 80% !important;
  }
  
  /* 项目外脑服务价格调整 */
  [id^="网站负责人"] .flex > div:last-child {
    margin-top: 1.5rem !important;
    padding: 1rem !important;
  }
}

/* 往期文章卡片优化 */
@media only screen and (max-width: 768px) {
  /* 文章卡片在手机上完全堆叠 */
  [id^="往期文章"] .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 文章卡片内文字和图片调整 */
  [id^="往期文章"] .grid article {
    display: flex !important;
    flex-direction: column !important;
  }
  
  [id^="往期文章"] .grid article img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
  }
  
  /* 文章标签调整 */
  [id^="往期文章"] .grid article .flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  [id^="往期文章"] .grid article .flex span {
    margin: 0.25rem !important;
  }
}

/* idea-bang.html 页面特定优化 */
@media only screen and (max-width: 768px) {
  /* 顶部标题与按钮组调整 */
  #resultTab {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* 按钮组全宽显示 */
  .flex.space-x-3 {
    margin-top: 0.75rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .flex.space-x-3 button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 双栏布局调整为单列 */
  .flex.flex-wrap.lg\:flex-nowrap {
    flex-direction: column-reverse !important;
  }
  
  /* 参考报告区域宽度调整 */
  #resultPanel,
  .lg\:w-3\/4,
  .lg\:w-1\/4 {
    width: 100% !important;
  }
}

/* 处理页面顶部重叠问题 */
@media only screen and (max-width: 768px) {
  body {
    padding-top: 1rem;
  }
  
  header {
    position: relative !important;
  }
}

/* 修复移动端滚动问题 */
@media only screen and (max-width: 768px) {
  body, html {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 防止页面水平溢出 */
  .container, .mx-auto {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}