/* =========================================
   博客响应式设计 - 支持浏览器缩放
   ========================================= */

/* ---------- 基础缩放支持 ---------- */
html {
  /* 启用平滑缩放 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* 启用硬件加速 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 视口缩放响应 ---------- */
@media (max-width: 1200px) {
  /* 大屏幕缩放 */
  .page-wrapper {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .post-content {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  /* 中等屏幕缩放 */
  :root {
    --max-w: 720px;
    --sidebar-w: 200px;
  }
  
  body {
    font-size: 14px;
  }
  
  .post-title {
    font-size: 28px;
  }
  
  .post-meta {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  /* 平板设备 */
  :root {
    --max-w: 100%;
    --sidebar-w: 0;
  }
  
  .page-wrapper {
    grid-template-columns: 1fr;
    padding: 20px 16px 60px;
    gap: 24px;
  }
  
  .sidebar { 
    position: static; 
    display: none; 
  }
  
  .post-title {
    font-size: 24px;
  }
  
  .post-content {
    font-size: 15px;
    line-height: 1.6;
  }
  
  .post-content h1 { font-size: 24px; }
  .post-content h2 { font-size: 20px; }
  .post-content h3 { font-size: 18px; }
  .post-content h4 { font-size: 16px; }
  
  .form-row { grid-template-columns: 1fr; }
  .comment-form-row { grid-template-columns: 1fr; }
  .editor-body { grid-template-columns: 1fr; }
  .editor-preview { display: none; }
  .header-nav { display: none; }
  
  .admin-table { font-size: 13px; }
  .admin-table td.title-cell { max-width: 160px; }
  
  .code-block {
    font-size: 12px;
    padding: 12px;
  }
  
  /* 认证页面 */
  .auth-card {
    padding: 30px 24px;
  }
  
  .auth-header h1 {
    font-size: 24px;
  }
  
  .auth-subtitle {
    font-size: 14px;
  }
  
  /* 运行时间显示 */
  .uptime-container {
    padding: 16px 0;
    margin-top: 30px;
    font-size: 13px;
  }
  
  .blog-info {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .uptime-text {
    font-size: 14px;
  }
  
  .uptime-row {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  /* 手机设备 */
  body {
    font-size: 13px;
  }
  
  .page-wrapper {
    padding: 16px 12px 50px;
  }
  
  .post-title {
    font-size: 20px;
  }
  
  .post-meta {
    font-size: 12px;
  }
  
  .post-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .post-content h1 { font-size: 22px; }
  .post-content h2 { font-size: 18px; }
  .post-content h3 { font-size: 16px; }
  .post-content h4 { font-size: 14px; }
  
  .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .auth-card {
    padding: 24px 16px;
    margin: 0 12px;
  }
  
  .auth-header h1 {
    font-size: 20px;
  }
  
  .auth-subtitle {
    font-size: 12px;
  }
  
  .form-group label {
    font-size: 13px;
  }
  
  .form-control {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  /* 运行时间显示 */
  .uptime-container {
    padding: 12px 0;
    font-size: 12px;
  }
  
  .blog-info {
    font-size: 11px;
    line-height: 1.4;
  }
  
  .uptime-text {
    font-size: 13px;
  }
}

/* ---------- 高DPI屏幕支持 ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 高分辨率屏幕优化 */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .btn, .form-control, .auth-card {
    border-width: 1px;
  }
}

/* ---------- 缩放级别检测 ---------- */
@media (min-width: 768px) and (max-width: 1200px) {
  /* 中等缩放级别 */
  .post-content img {
    max-width: 100%;
    height: auto;
  }
  
  .code-block {
    font-size: 13px;
  }
}

/* ---------- 横屏模式 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* 横屏且高度较小 */
  .auth-container {
    padding: 10px;
  }
  
  .auth-card {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .page-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---------- 竖屏模式 ---------- */
@media (orientation: portrait) {
  /* 竖屏优化 */
  .page-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- 超大屏幕支持 ---------- */
@media (min-width: 1600px) {
  /* 4K/大屏幕优化 */
  :root {
    --max-w: 1200px;
    --sidebar-w: 280px;
  }
  
  body {
    font-size: 17px;
  }
  
  .post-content {
    font-size: 18px;
    line-height: 1.8;
  }
  
  .post-title {
    font-size: 36px;
  }
}

/* ---------- 打印样式 ---------- */
@media print {
  /* 打印优化 */
  .sidebar,
  .header-nav,
  .auth-container,
  .uptime-container,
  .btn,
  .comment-form {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }
  
  .page-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .post-content {
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  
  a {
    color: black !important;
    text-decoration: underline !important;
  }
  
  .code-block {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
  }
}

/* ---------- 减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* 为运动敏感用户减少动画 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .uptime-text {
    animation: none !important;
  }
}

/* ---------- 高对比度模式 ---------- */
@media (prefers-contrast: high) {
  /* 高对比度模式优化 */
  :root {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #ffffff;
    --accent: #ffff00;
  }
  
  .btn {
    border: 2px solid var(--text-primary);
  }
  
  .form-control {
    border: 2px solid var(--text-primary);
  }
}

/* ---------- 暗色模式 ---------- */
@media (prefers-color-scheme: dark) {
  /* 系统暗色模式 */
  :root {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --text-primary: #e8e8e8;
  }
}

/* ---------- 亮色模式 ---------- */
@media (prefers-color-scheme: light) {
  /* 系统亮色模式 */
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #222222;
    --border: #e0e0e0;
    --accent: #007acc;
  }
  
  .code-block {
    background: #f8f8f8;
    color: #333;
  }
}