/**
 * Global Responsive Styles
 * 全局响应式样式
 * 
 * @package Kadence_Child
 * @since 2.1.0
 * 
 * 职责：
 * - 仅包含全局通用的响应式规则
 * - 页面特定的响应式样式保留在各自的专用 CSS 文件中
 * 
 * 断点系统：
 * - 1200px  : 标准桌面
 * - 1024px  : 小桌面/大平板
 * - 768px   : 平板/手机分界点 ⭐ 主要断点
 * - 480px   : 大手机/小手机分界点
 * - 375px   : 小手机
 * 
 * 页面专用响应式样式位置：
 * - 产品详情页 → assets/css/single-product.css
 * - 产品列表/分类页 → assets/css/archive-product.css
 */

/* ============================================
   标准桌面 (最大 1200px)
   ============================================ */

@media (max-width: 1200px) {
    /* 全局容器 */
    .container {
        max-width: 1200px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* 全局字体大小 */
    h1, .h1 {
        font-size: 28px;
    }
    
    h2, .h2 {
        font-size: 24px;
    }
    
    h3, .h3 {
        font-size: 20px;
    }
}

/* ============================================
   平板设备 (最大 768px) ⭐ 主要断点
   ============================================ */

@media (max-width: 768px) {
    /* 全局容器 */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* 全局字体大小 */
    body {
        font-size: 15px;
    }
    
    h1, .h1 {
        font-size: 24px;
    }
    
    h2, .h2 {
        font-size: 20px;
    }
    
    h3, .h3 {
        font-size: 18px;
    }
    
    h4, .h4 {
        font-size: 16px;
    }
    
    /* 全局按钮 */
    .btn,
    .btn-primary,
    .btn-accent,
    .button {
        width: 100%;
        text-align: center;
        padding: 0.875rem 1.5rem;
    }
    
    /* 表单输入 */
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px; /* 防止 iOS Safari 自动缩放 */
    }
    
    /* 图片 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 间距 */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* 导航 */
    .main-navigation {
        width: 100%;
    }
    
    /* 侧边栏 */
    .sidebar,
    aside {
        width: 100%;
        margin-top: 2rem;
    }
}

/* ============================================
   手机设备 (最大 480px)
   ============================================ */

@media (max-width: 480px) {
    /* 全局容器 */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* 全局字体大小 */
    body {
        font-size: 14px;
    }
    
    h1, .h1 {
        font-size: 20px;
    }
    
    h2, .h2 {
        font-size: 18px;
    }
    
    h3, .h3 {
        font-size: 16px;
    }
    
    h4, .h4 {
        font-size: 14px;
    }
    
    /* 按钮 */
    .btn,
    .btn-primary,
    .btn-accent {
        padding: 0.75rem 1.25rem;
        font-size: 14px;
    }
    
    /* 间距 */
    section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    
    /* 卡片间距 */
    .card,
    article {
        margin-bottom: 1rem;
    }
}

/* ============================================
   小手机 (最大 375px)
   ============================================ */

@media (max-width: 375px) {
    /* 容器 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 字体大小 */
    h1, .h1 {
        font-size: 18px;
    }
    
    h2, .h2 {
        font-size: 16px;
    }
    
    /* 按钮 */
    .btn,
    .btn-primary,
    .btn-accent {
        padding: 0.625rem 1rem;
        font-size: 13px;
    }
    
    /* 间距 */
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ============================================
   横屏模式优化（手机横屏）
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* 减少垂直间距 */
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* 产品卡片横向排列 */
    .products-grid,
    .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   触摸设备优化
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* 使用 active 替代 hover */
    .application-card:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* 增大点击区域（符合移动端触摸标准 44x44px） */
    a,
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 优化社交媒体链接 */
    .social-link {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   打印样式优化
   ============================================ */

@media print {
    /* 隐藏非打印元素 */
    .floating-buttons,
    .social-links,
    .product-quick-actions,
    .btn,
    .btn-primary,
    .btn-accent,
    .category-filters,
    nav,
    header,
    footer,
    .hero-section,
    .contact-section,
    form {
        display: none !important;
    }
    
    /* 打印时的颜色和背景 */
    *,
    *::before,
    *::after {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* 保留必要的边框 */
    .testimonial-card,
    .spec-item,
    table,
    th,
    td {
        border: 1px solid #000 !important;
    }
    
    /* 标题 */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }
    
    /* 图片 */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    /* 产品规格表 */
    .product-specifications,
    .specs-content {
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
    
    /* 分页符优化 */
    .testimonial-card,
    article,
    section {
        page-break-inside: avoid;
    }
    
    /* 链接显示 URL */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }
    
    /* 强制显示某些元素 */
    .product-title,
    .product-name,
    .company-description {
        display: block !important;
    }
}

/* ============================================
   高分辨率屏幕优化（Retina）
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Retina 屏幕图片优化 */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   暗色模式支持（预留）
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 如果需要支持暗色模式，取消注释以下代码 */
    /*
    :root {
        --primary: #4A90E2;
        --secondary: #5FA3E8;
        --accent: #FF9A56;
        --dark: #F9FAFB;
        --light: #1D2939;
        --neutral: #A0AEC0;
    }
    
    body {
        background-color: #1a1a1a;
        color: #f0f0f0;
    }
    
    .testimonial-card,
    .feature-box {
        background-color: #2d2d2d;
        color: #f0f0f0;
    }
    */
}

/* ============================================
   减少动画（无障碍支持）
   ============================================ */

@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;
    }
    
    /* 禁用特定动画 */
    .animate-float {
        animation: none !important;
    }
    
    .application-card img {
        transition: none !important;
    }
}

/* ============================================
   浏览器特定修复
   ============================================ */

/* iOS Safari 修复 */
@supports (-webkit-touch-callout: none) {
    /* 修复 iOS Safari 的 100vh 问题 */
    .hero-section,
    .category-header {
        min-height: -webkit-fill-available;
    }
}

/* 修复 iOS Safari 的点击高亮 */
a,
button,
.btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Firefox 浏览器优化 */
@-moz-document url-prefix() {
    /* Firefox 图片渲染优化 */
    img {
        image-rendering: auto;
    }
}

/* ============================================
   Internet Explorer 11 修复（如需支持旧浏览器）
   ============================================ */

@media screen and (-ms-high-contrast: active), 
       (-ms-high-contrast: none) {
    /* IE11 不支持 CSS Grid，使用 Flexbox 降级 */
    .products-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .products-grid > * {
        flex: 0 0 calc(33.333% - 20px);
        margin: 10px;
    }
}