/* 响应式设计规则 */

/* ===== 基础媒体查询断点 ===== */

/* 超小设备（手机，小于576px） */
@media (max-width: 575.98px) {
  /* 全局调整 */
  html {
    font-size: 14px;
  }
  
  /* 容器调整 */
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  
  /* 标题调整 */
  h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
  }
  
  h3 {
    font-size: var(--font-size-xl);
  }
  
  /* 首页调整 */
  .hero-section {
    padding: var(--space-10) 0 var(--space-6);
  }
  
  .hero-quote {
    font-size: var(--font-size-xl);
    padding: var(--space-4);
  }
  
  .welcome-title {
    font-size: var(--font-size-2xl);
  }
  
  .welcome-subtitle {
    font-size: var(--font-size-base);
  }
  
  .nav-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .recent-content-grid {
    grid-template-columns: 1fr;
  }
  
  /* 文章卡片调整 */
  .blog-post-card {
    padding: var(--space-3);
    min-height: auto;
  }
  
  /* 项目卡片调整 */
  .portfolio-card {
    padding: var(--space-3);
  }
  
  /* 资源卡片调整 */
  .resource-card {
    padding: var(--space-3);
  }
}

/* 小设备（平板，576px及以上） */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* 容器调整 */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  /* 卡片网格调整 */
  .nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .recent-content-grid {
    grid-template-columns: 1fr;
  }
  
  /* 博客和项目网格 */
  .blog-posts-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 中等设备（中等平板，768px及以上） */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 容器调整 */
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  
  /* 卡片网格调整 */
  .nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  
  .recent-content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  
  /* 博客和项目网格 */
  .blog-posts-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 大型设备（桌面，992px及以上） */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 容器调整 */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  /* 卡片网格调整 */
  .nav-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* 超大型设备（大型桌面，1200px及以上） */
@media (min-width: 1200px) {
  /* 容器调整 */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* ===== 导航响应式调整 ===== */

/* 移动导航 */
@media (max-width: 767.98px) {
  .nav-menu {
    display: none;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  
  .nav-overlay.active {
    opacity: 1 !important; 
    visibility: visible !important;
    display: block !important;
    z-index: var(--z-modal) !important;
  }
  
  /* 确保遮罩层背景在移动端正确显示 */
  .nav-backdrop {
    display: block;
    opacity: 1;
  }
  
  /* 移动端菜单动画调整 */
  .nav-overlay-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-overlay.active .nav-overlay-item {
    opacity: 1;
    transform: translateY(0);
  }
  
  .nav-overlay.active .nav-overlay-item:nth-child(1) { transition-delay: 0.1s; }
  .nav-overlay.active .nav-overlay-item:nth-child(2) { transition-delay: 0.15s; }
  .nav-overlay.active .nav-overlay-item:nth-child(3) { transition-delay: 0.2s; }
  .nav-overlay.active .nav-overlay-item:nth-child(4) { transition-delay: 0.25s; }
  .nav-overlay.active .nav-overlay-item:nth-child(5) { transition-delay: 0.3s; }
  
  /* 确保导航覆盖层内容样式正确 */
  .nav-overlay-content {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  
  .nav-overlay-list {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 桌面导航 */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  
  .nav-overlay {
    display: none !important;
  }
  
  .nav-menu {
    display: flex;
  }
}

/* ===== 内容页面响应式调整 ===== */

/* 博客页面 */
@media (max-width: 767.98px) {
  .blog-posts-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-grid-section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .blog-detail-section .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .blog-detail-header {
    padding: var(--space-6) 0;
  }
  
  .blog-detail-title {
    font-size: var(--font-size-2xl);
  }
  
  .blog-detail-content {
    padding: var(--space-4);
  }
}

/* 项目案例页面 */
@media (max-width: 767.98px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  
  .portfolio-grid-section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .portfolio-detail-section .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .portfolio-detail-header {
    padding: var(--space-6) 0;
  }
  
  .portfolio-detail-title {
    font-size: var(--font-size-2xl);
  }
  
  .portfolio-detail-content {
    padding: var(--space-4);
  }
}

/* 资源中心页面 */
@media (max-width: 767.98px) {
  .resource-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-tabs {
    margin-bottom: var(--space-3);
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    padding-bottom: var(--space-2);
  }
  
  .resource-grid {
    grid-template-columns: 1fr;
  }
  
  .resource-card {
    flex-direction: column;
  }
  
  .resource-card-icon {
    margin-right: 0;
    margin-bottom: var(--space-3);
  }
}

/* 关于页面 */
@media (max-width: 767.98px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  .about-section {
    padding: var(--space-6) 0;
  }
  
  .skill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 移动端交互优化 ===== */
@media (max-width: 767.98px) {
  /* 增大触摸目标大小 */
  .btn,
  .nav-link,
  .filter-tab {
    padding: var(--space-3) var(--space-4);
  }
  
  /* 调整表单元素 */
  input,
  select,
  textarea {
    font-size: 16px; /* 避免iOS上的自动缩放 */
    padding: var(--space-3);
  }
  
  /* 增强按钮可点击区域 */
  .btn {
    min-height: 44px;
  }
  
  /* 添加Active状态的视觉反馈 */
  .btn:active,
  .nav-link:active,
  .card:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }
  
  /* 优化移动端滚动 */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 取消某些悬停效果，改用活动状态 */
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none;
  }
  
  .hover-lift:active,
  .hover-scale:active {
    transform: scale(0.97);
    }
}

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

/* 在移动设备上减少高耗性能的动画和效果 */
@media (max-width: 767.98px) {
  .parallax-bg,
  .parallax-element {
    background-attachment: scroll !important;
    transform: none !important;
    will-change: auto !important;
  }
  
  /* 简化阴影效果 */
  .shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ===== 打印样式 ===== */
@media print {
  .nav-brand,
  .nav-menu,
  .nav-toggle,
  .nav-overlay,
  .footer-content,
  .btn,
  #comments-section {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  blockquote, pre {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
}

/* 移动端美文摘抄和日常分享功能条布局优化 */
@media (max-width: 767.98px) {
  /* 美文摘抄页面功能条优化 */
  .excerpts-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .excerpts-actions .left-actions,
  .excerpts-actions .right-actions {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-3);
  }
  
  .excerpts-actions .filter-container input[type="search"] {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  /* 日常分享页面功能条优化 */
  .daily-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .daily-actions .left-actions,
  .daily-actions .right-actions {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-3);
  }
  
  .daily-actions .right-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .daily-actions .search-container {
    width: 100%;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .daily-actions input[type="date"],
  .daily-actions input[type="search"],
  .daily-actions button {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--space-2);
  }
}

/* 联系方式卡片响应式布局 */
@media (max-width: 767.98px) {
  .contact-row {
    grid-template-columns: 1fr !important;
  }
}

/* 页脚响应式布局 */
@media (max-width: 767.98px) {
    .footer-content {
        flex-direction: column;
        text-align: left;
        padding: 0 var(--space-4); /* 在移动端为页脚内容添加水平内边距 */
    }

    .footer-section {
        min-width: 100%;
        margin-bottom: var(--space-5);
    }
    
    .social-links {
        justify-content: flex-start;
    }
}