/**
 * 全民基因健康网 - 移动端响应式样式
 * 
 * 断点设计：
 * - xs: < 480px  (小屏手机)
 * - sm: < 640px  (普通手机)
 * - md: < 768px  (大屏手机/小平板)
 * - lg: < 1024px (平板)
 * - xl: >= 1024px (桌面)
 */

/* ============================================
   全局基础样式
   ============================================ */

/* 防止横向溢出 */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 触摸优化 */
a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* 按钮最小触摸区域 */
@media (max-width: 768px) {
    button, 
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* 全局字体适配 */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

/* ============================================
   头部导航适配
   ============================================ */

/* 导航栏高度适配 */
@media (max-width: 768px) {
    nav.sticky {
        height: auto;
    }
    
    nav .max-w-6xl {
        height: 56px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Logo适配 */
@media (max-width: 640px) {
    nav .font-bold.text-xl {
        font-size: 1rem;
    }
    
    nav .bg-indigo-600.p-1\.5 {
        padding: 0.25rem;
    }
    
    nav .bg-indigo-600 i {
        width: 1rem;
        height: 1rem;
    }
}

/* 订阅按钮手机端隐藏或缩小 */
@media (max-width: 640px) {
    nav button[onclick*="subscribe-modal"] {
        padding: 0.375rem 0.75rem;
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    nav button[onclick*="subscribe-modal"] {
        display: none;
    }
}

/* 移动端菜单优化 */
#mobile-menu {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

#mobile-menu .space-y-3 > a {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

#mobile-menu .space-y-3 > a:last-of-type {
    border-bottom: none;
}

/* ============================================
   主要内容区布局
   ============================================ */

/* 容器内边距适配 */
@media (max-width: 768px) {
    .max-w-6xl {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    main.max-w-6xl {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .max-w-6xl {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* 12栏网格响应式 */
@media (max-width: 1024px) {
    .grid-cols-12 {
        display: block;
    }
    
    .col-span-12,
    .lg\:col-span-8,
    .lg\:col-span-4 {
        width: 100%;
    }
}

/* 侧边栏手机端处理 */
@media (max-width: 1024px) {
    aside.lg\:col-span-4,
    aside.col-span-12.lg\:col-span-4 {
        margin-top: 2rem;
        width: 100%;
    }
    
    /* 侧边栏横向排列部分模块 */
    aside .space-y-6,
    aside .space-y-8 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    aside .space-y-6 > div:first-child,
    aside .space-y-8 > div:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    aside .space-y-6,
    aside .space-y-8 {
        display: block;
    }
    
    aside .space-y-6 > div,
    aside .space-y-8 > div {
        margin-bottom: 1rem;
    }
}

/* 确保首页grid正常工作 */
@media (min-width: 1025px) {
    main.grid.grid-cols-12 {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    
    main.grid .col-span-12.lg\:col-span-8 {
        grid-column: span 8 !important;
    }
    
    main.grid aside.col-span-12.lg\:col-span-4 {
        grid-column: span 4 !important;
    }
}

/* ============================================
   首页头条区域适配
   ============================================ */

/* 头条网格 */
@media (max-width: 768px) {
    section.grid.md\:grid-cols-2 {
        display: block;
    }
    
    /* 大图头条 */
    section.grid.md\:grid-cols-2 > article:first-child {
        height: 200px;
        margin-bottom: 1rem;
    }
    
    section.grid.md\:grid-cols-2 > article:first-child h2 {
        font-size: 1.125rem;
    }
    
    section.grid.md\:grid-cols-2 > article:first-child .p-6 {
        padding: 1rem;
    }
    
    /* 次级头条列表 */
    section.grid.md\:grid-cols-2 > div.flex.flex-col {
        gap: 0.75rem;
    }
    
    section.grid.md\:grid-cols-2 > div.flex.flex-col article {
        padding: 0.875rem;
    }
    
    section.grid.md\:grid-cols-2 > div.flex.flex-col article h3 {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    section.grid.md\:grid-cols-2 > article:first-child {
        height: 180px;
        border-radius: 0.75rem;
    }
    
    section.grid.md\:grid-cols-2 > article:first-child h2 {
        font-size: 1rem;
    }
}

/* ============================================
   信息流文章列表适配
   ============================================ */

/* 信息流区域标题 */
@media (max-width: 768px) {
    section > .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    section > .flex.items-center.justify-between h3 {
        font-size: 1.125rem;
    }
    
    section > .flex.items-center.justify-between .flex.gap-4 {
        overflow-x: auto;
        width: 100%;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
}

/* 文章卡片 */
@media (max-width: 768px) {
    article.flex.gap-4 {
        gap: 0.75rem;
    }
    
    /* 缩略图 */
    article.flex.gap-4 > div:first-child {
        width: 100px !important;
        height: 75px !important;
        flex-shrink: 0;
    }
    
    /* 标题 */
    article.flex.gap-4 h4 {
        font-size: 0.9375rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }
    
    /* 摘要隐藏 */
    article.flex.gap-4 p.text-slate-500.text-sm {
        display: none;
    }
    
    /* 底部信息 */
    article.flex.gap-4 .flex.items-center.text-xs {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
}

@media (max-width: 480px) {
    article.flex.gap-4 > div:first-child {
        width: 80px !important;
        height: 60px !important;
    }
    
    article.flex.gap-4 h4 {
        font-size: 0.875rem;
    }
}

/* ============================================
   问答列表页适配
   ============================================ */

@media (max-width: 768px) {
    /* 问答卡片 */
    .question-card,
    article[class*="border"][class*="rounded-xl"] {
        padding: 1rem;
    }
    
    /* 问答标题 */
    .question-card h3,
    article[class*="border"] h3.font-bold {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* 问答统计信息 */
    .question-card .flex.gap-4,
    article .flex.items-center.gap-4.text-xs {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
}

/* ============================================
   专家列表页适配
   ============================================ */

@media (max-width: 768px) {
    /* 专家网格改为单列 */
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    /* 专家卡片 */
    .expert-card,
    article[class*="bg-white"][class*="rounded-xl"] {
        padding: 1rem;
    }
    
    /* 专家头像 */
    .expert-card img[class*="rounded-full"],
    article img.w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 640px) {
    /* 专家信息横向布局 */
    .expert-card .flex.flex-col,
    article .flex.gap-4 {
        flex-direction: row;
        align-items: center;
    }
}

/* ============================================
   文章详情页适配
   ============================================ */

@media (max-width: 768px) {
    /* 文章标题 */
    article header h1,
    .single-post h1,
    h1.text-3xl,
    h1.text-2xl {
        font-size: 1.375rem;
        line-height: 1.4;
    }
    
    /* 文章内容区 */
    .prose,
    .article-content,
    .entry-content {
        font-size: 1rem;
        line-height: 1.8;
    }
    
    .prose h2 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }
    
    .prose h3 {
        font-size: 1.125rem;
        margin-top: 1.25rem;
    }
    
    .prose img {
        margin: 1rem -12px;
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        border-radius: 0;
    }
    
    .prose pre {
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0;
        padding: 1rem 12px;
    }
    
    .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .prose blockquote {
        margin-left: 0;
        padding-left: 0.75rem;
    }
}

/* ============================================
   问答详情页适配
   ============================================ */

@media (max-width: 768px) {
    /* 问题标题 */
    .question-detail h1,
    .single-question h1 {
        font-size: 1.25rem;
    }
    
    /* 回答列表 */
    .answer-list,
    .answers-section {
        margin-top: 1.5rem;
    }
    
    /* 单个回答 */
    .answer-item,
    .comment {
        padding: 1rem;
    }
    
    /* 回答者信息 */
    .answer-author,
    .comment-author {
        flex-wrap: wrap;
    }
}

/* ============================================
   专家详情页适配
   ============================================ */

@media (max-width: 768px) {
    /* 专家头部信息 */
    .expert-header {
        flex-direction: column;
        text-align: center;
    }
    
    .expert-header img {
        margin: 0 auto 1rem;
    }
    
    /* 咨询按钮 */
    .expert-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .expert-actions button,
    .expert-actions a {
        width: 100%;
    }
}

/* ============================================
   搜索页适配
   ============================================ */

@media (max-width: 768px) {
    /* 搜索结果标题 */
    .search-header h1 {
        font-size: 1.125rem;
    }
    
    /* 搜索结果列表 */
    .search-results article {
        padding: 1rem 0;
    }
}

/* ============================================
   分类页适配
   ============================================ */

@media (max-width: 768px) {
    /* 分类描述 */
    .category-header,
    .archive-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .category-header h1,
    .archive-header h1 {
        font-size: 1.25rem;
    }
    
    /* 子分类标签 */
    .subcategory-list,
    .flex.flex-wrap.gap-2 {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .subcategory-list a,
    .flex.flex-wrap.gap-2 a {
        flex-shrink: 0;
    }
}

/* ============================================
   表单元素适配
   ============================================ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* 防止iOS自动缩放 */
        padding: 12px;
    }
    
    /* 搜索框 */
    .search-form input,
    #ajax-search-input,
    #mobile-ajax-search-input {
        font-size: 16px;
    }
}

/* ============================================
   分页适配
   ============================================ */

@media (max-width: 640px) {
    .nav-links {
        gap: 0.25rem;
    }
    
    .nav-links .page-numbers {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }
    
    /* 隐藏部分页码，保留首尾和当前 */
    .nav-links .page-numbers:not(.prev):not(.next):not(.current):not(.dots) {
        display: none;
    }
    
    .nav-links .page-numbers:first-child,
    .nav-links .page-numbers:last-child,
    .nav-links .page-numbers:nth-child(2),
    .nav-links .page-numbers:nth-last-child(2) {
        display: inline-flex;
    }
}

/* ============================================
   弹窗/模态框适配
   ============================================ */

@media (max-width: 768px) {
    /* 订阅弹窗 */
    #subscribe-modal > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    #subscribe-modal .max-w-md {
        max-width: 100%;
    }
    
    /* 微信弹窗 */
    .wechat-modal-content {
        width: 90%;
        max-width: 300px;
    }
}

/* ============================================
   页脚适配
   ============================================ */

@media (max-width: 768px) {
    footer {
        padding: 1.5rem 1rem;
        padding-bottom: calc(1.5rem + 60px); /* 为底部工具栏留空间 */
    }
    
    footer .flex.justify-between {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    footer .flex.gap-4 {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    footer a {
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================
   工具类补充
   ============================================ */

/* 手机端隐藏 */
@media (max-width: 768px) {
    .hide-mobile,
    .md\:block:not(.block) {
        display: none !important;
    }
}

/* 手机端显示 */
@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* 安全区域适配 (iPhone X+) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-toolbar {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    footer {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}

/* ============================================
   性能优化
   ============================================ */

/* 减少不必要的动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 图片懒加载占位 */
img[loading="lazy"] {
    background-color: #f1f5f9;
}

/* ============================================
   打印样式
   ============================================ */

@media print {
    nav,
    aside,
    .mobile-toolbar,
    footer .flex.gap-4,
    #subscribe-modal,
    .wechat-modal {
        display: none !important;
    }
    
    body {
        padding-bottom: 0 !important;
    }
    
    .prose img {
        max-width: 100% !important;
        margin: 1rem 0 !important;
    }
}

/* ============================================
   文章目录样式
   ============================================ */

/* 目录容器 */
#article-toc {
    max-height: calc(100vh - 120px);
    overflow: hidden;
}

/* 目录导航滚动条 */
#toc-nav ul {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

#toc-nav ul::-webkit-scrollbar {
    width: 4px;
}

#toc-nav ul::-webkit-scrollbar-track {
    background: transparent;
}

#toc-nav ul::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
}

#toc-nav ul::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* 目录链接样式 */
.toc-link {
    display: block;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.toc-link:hover {
    background: #f8fafc;
}

/* 折叠状态 */
#article-toc.toc-collapsed .toc-content {
    display: none;
}

#article-toc.toc-collapsed .toc-toggle-icon {
    transform: rotate(180deg);
}

#article-toc.toc-collapsed .toc-progress {
    display: none;
}

/* 标题锚点悬停效果 */
article.prose h2,
article.prose h3 {
    scroll-margin-top: 80px;
}

/* 移动端目录 */
@media (max-width: 1023px) {
    #article-toc {
        display: none !important;
    }
}

/* 平板端目录调整 */
@media (min-width: 1024px) and (max-width: 1279px) {
    #article-toc {
        padding: 1rem;
    }
    
    #toc-nav ul {
        max-height: 40vh;
    }
    
    .toc-link {
        font-size: 12px;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
}