/* 设备适配样式 - 针对不同设备和屏幕尺寸的优化 */

/* 设备类型和屏幕尺寸适配说明 */
/*
 * 设备适配范围：
 * 1. 手机竖屏（≤479px）：iPhone SE, iPhone 6/7/8, 部分Android手机
 * 2. 手机横屏/小平板（480px-767px）：iPhone Plus系列横屏, 小平板
 * 3. 平板竖屏（768px-991px）：iPad, 部分Android平板竖屏
 * 4. 平板横屏/小桌面（992px-1199px）：iPad Pro, 小桌面显示器
 * 5. 桌面（1200px-1599px）：标准桌面显示器
 * 6. 大屏幕桌面（≥1600px）：高分辨率显示器
 *
 * 分辨率适配：
 * - 普通屏幕：标准像素密度
 * - 高分辨率屏幕：2x+像素密度 (Retina, etc.)
 * - 触摸设备：优化触摸目标大小
 */

/* 通用移动设备优化 */
@media (max-width: 767px) {
    /* 确保触摸目标足够大 */
    .side-nav a {
        min-height: 44px;
        padding: 0.875rem 1rem;
        font-size: 0.9rem; /* 稍微增大字体以提高可读性 */
        min-width: auto; /* 确保菜单项不会过窄 */
        display: flex; /* 使用flex布局确保内容对齐 */
        align-items: center; /* 垂直居中对齐 */
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        min-height: 60px;
        margin: 0.25rem 0;
    }
    
    /* 优化搜索栏在小屏幕上的显示 */
    .search-bar {
        height: auto;
        min-height: 44px;
    }
    
    .search-bar button {
        width: 3rem;
        height: 3rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* 移动端字体优化 */
    h1 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.15rem !important;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1.05rem !important;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.8rem !important;
        line-height: 1.5;
    }
    
    .text-sm {
        font-size: 0.85rem !important;
        line-height: 1.45;
    }
    
    /* 分类标题优化 */
    .flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
        font-size: 1.05rem !important;
        line-height: 1.4;
    }
    
    /* iOS Safe Area 适配 */
    body {
        padding-top: max(env(safe-area-inset-top), 0);
        padding-bottom: max(env(safe-area-inset-bottom), 0);
    }
    
    /* 修复iOS滚动问题 */
    * {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    input, textarea, button, select, a {
        -webkit-user-select: text;
        -webkit-touch-callout: default;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* 提高高分辨率屏幕下的阴影清晰度 */
    .search-box {
        box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.2), 0 8px 10px -6px rgba(13, 148, 136, 0.2);
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 为触摸设备增加更大的触摸目标 */
    .side-nav a {
        padding: 0.875rem 1rem;
        min-height: 44px;
        min-width: auto; /* 确保菜单项不会过窄 */
        display: flex; /* 使用flex布局确保内容对齐 */
        align-items: center; /* 垂直居中对齐 */
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        min-height: 60px;
    }
    
    .search-bar button {
        width: 3rem;
        height: 3rem;
        min-height: 44px;
        min-width: 44px;
    }
}

/* 特定设备优化 */
/* iPhone SE (320x568) */
@media (max-width: 320px) and (max-height: 568px) and (device-pixel-ratio: 2) {
    .logo-box {
        height: 5rem;
    }
    
    .logo {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .text-sm {
        font-size: 0.8rem;
    }
    
    .grid.grid-cols-1.gap-4 {
        gap: 0.4rem;
    }
}

/* iPhone 6/7/8 Plus (414x736) */
@media (max-width: 414px) and (max-height: 736px) and (device-pixel-ratio: 3) {
    .logo-box {
        height: 6rem;
    }
    
    .search-box h1 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }
    
    /* 针对大屏手机的字体优化 */
    h1 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.15rem !important;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1.05rem !important;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.8rem !important;
        line-height: 1.5;
    }
}

/* iPhone X/XS (375x812) */
@media (max-width: 375px) and (max-height: 812px) and (device-pixel-ratio: 3) {
    .logo-box {
        height: 6.5rem;
    }
    
    .search-box h1 {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }
    
    /* 针对iPhone X系列的字体优化 */
    h1 {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.1rem !important;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1rem !important;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 0.9rem !important;
        line-height: 1.4;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.75rem !important;
        line-height: 1.5;
    }
}

/* iPad (768x1024) */
@media (min-width: 768px) and (max-width: 1023px) {
    .side-bar {
        width: 14rem;
    }
    
    .main-container {
        margin-left: 14rem;
        margin-right: 0.75rem;
        width: calc(100% - 14.75rem);
    }
    
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    /* 平板端字体优化 */
    h1 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.2rem;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .text-sm {
        font-size: 0.9rem;
        line-height: 1.45;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    /* 分类标题优化 */
    .flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
        font-size: 1.1rem;
        line-height: 1.4;
    }
}

/* iPad Pro (1024x1366) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .side-bar {
        width: 14rem;
    }
    
    .main-container {
        margin-left: 14rem;
        margin-right: 0.75rem;
        width: calc(100% - 14.75rem);
    }
    
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    /* iPad Pro字体优化 */
    h1 {
        font-size: 1.45rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.25rem;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1.15rem;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    
    .text-sm {
        font-size: 0.95rem;
        line-height: 1.45;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* 分类标题优化 */
    .flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
        font-size: 1.15rem;
        line-height: 1.4;
    }
}

/* Android 小屏手机 */
@media (max-width: 360px) and (max-height: 640px) {
    .logo-box {
        height: 5.5rem;
    }
    
    .logo {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }
    
    .text-sm {
        font-size: 0.75rem;
    }
}

/* Android 大屏手机 */
@media (max-width: 412px) and (max-height: 846px) {
    .logo-box {
        height: 6.5rem;
    }
    
    .search-box h1 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }
    
    /* 针对Android大屏手机的字体优化 */
    h1 {
        font-size: 1.3rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.15rem !important;
        line-height: 1.35;
    }
    
    h3 {
        font-size: 1.05rem !important;
        line-height: 1.4;
    }
    
    h4, .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    
    p, .text-xs.text-gray-500 {
        font-size: 0.8rem !important;
        line-height: 1.5;
    }
}

/* 横屏优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .search-box {
        margin: 0.25rem;
        padding: 0.75rem;
    }
    
    .search-box h1 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        transform: translateY(-8px);
    }
    
    .main-container {
        padding: 0.5rem;
    }
    
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 大屏横屏优化 */
@media (orientation: landscape) and (min-width: 768px) {
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 可折叠设备优化 */
@media (max-width: 650px) {
    .side-bar {
        width: 14rem;
    }
    
    .main-container {
        margin-left: 14rem;
        margin-right: 0.75rem;
        width: calc(100% - 14.75rem);
    }
}

/* 高DPI大屏优化 */
@media (min-width: 1920px) and (min-resolution: 192dpi) {
    .text-3xl {
        font-size: 2.5rem;
        line-height: 2.75rem;
    }
    
    .search-box {
        padding: 2.5rem;
    }
    
    .main-container {
        padding: 1.5rem;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        border: 2px solid #333;
    }
    
    .side-nav a:hover {
        background-color: #e0e0e0;
        color: #000;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .side-nav a,
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        transition: none;
    }
    
    .search-bar {
        transition: none;
    }
}

/* 暗色主题适配 - 已移至theme.css */