/* 额外的响应式优化 */

/* 确保所有内容在小屏幕上正确显示 */
@media (max-width: 576px) {
    /* 改进标题在移动设备上的显示 */
    h1, h2 {
        word-break: break-word;
        hyphens: auto;
    }
    
    /* 优化图片网格在移动设备上的显示 */
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 优化轮播在移动设备上的显示 */
    .carousel-button {
        width: 35px;
        height: 35px;
    }
    
    /* 确保表单元素在移动设备上足够大，便于触摸 */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-submit-button {
        padding: 15px;
        font-size: 16px; /* 防止iOS自动缩放 */
    }
    
    /* 优化间距 */
    section {
        padding: 40px 0;
    }
    
    .container {
        padding: 0 20px;
    }
}

/* 平板设备优化 */
@media (min-width: 577px) and (max-width: 991px) {
    /* 优化平板设备上的布局 */
    .image-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 调整平板设备上的间距 */
    section {
        padding: 60px 0;
    }
}

/* 触摸设备交互优化 */
@media (hover: none) {
    /* 为触摸设备优化悬停效果 */
    .cta-button:active,
    .floating-button:active,
    .hover-lift:active {
        transform: scale(0.95);
    }
}

/* 打印样式优化 */
@media print {
    .floating-buttons,
    .cta-buttons {
        display: none !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
    
    .container {
        width: 100%;
        max-width: none;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        font-smoothing: antialiased;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    /* 这里可以添加暗黑模式样式，但由于网站已有固定配色，暂不实现完整暗黑模式 */
    /* 仅对某些元素进行亮度调整，减少夜间模式下的视觉刺激 */
    .floating-button {
        filter: brightness(0.9);
    }
}

/* 性能优化 */
.fade-in, 
.slide-in-left, 
.slide-in-right, 
.zoom-in {
    will-change: transform, opacity;
}

/* 无障碍优化 */
:focus {
    outline: 3px solid rgba(34, 197, 94, 0.5);
    outline-offset: 2px;
}

/* 确保按钮和交互元素有足够的点击区域 */
.cta-button,
.floating-button,
.faq-question,
.carousel-button {
    /*min-height: 44px;*/
}