/* 
 * =============================================================================
 * 华南森孚贸易有限公司 - 响应式媒体查询样式文件
 * =============================================================================
 * 文件说明:专门管理所有响应式断点的适配规则
 * 命名规范:BEM 命名法(Block Element Modifier)
 * 单位策略:布局/间距/字体统一使用 px,确保精确控制
 * 
 * 响应式策略:
 * - 三层防护机制确保移动端完美显示
 * - 渐进式适配:桌面端 → 平板端(1024px)→ 移动端(768px)
 * 
 * 断点说明:
 * - 1024px:平板与大屏幕的分界点,适配导航栏、网格等关键组件
 * - 768px:移动设备与桌面设备的分界点
 * =============================================================================
 */

/* -----------------------------------------------------------------------------
 * 1. 1024px 断点 - 平板设备适配
 * 功能:为导航栏、网格等关键组件提供中等屏幕适配
 * 策略:渐进式调整,从桌面端到平板端逐步优化布局参数
 * -------------------------------------------------------------------------- */
@media (max-width: 1025px) {
    /* 导航栏容器优化 - 平板端 */
    .nav-container {
        padding: 14px 18px;         /* 适度减小内边距:上下 14px,左右 18px */
    }

    /* Logo 在平板端的适配 */
    .logo {
        gap: 9px;                   /* 适度减小间距:9px */
    }

    .logo-icon {
        height: 36px;               /* 适度缩小图标:36px */
        width: 36px;                /* 宽度:36px */
    }

    .logo-text {
        font-size: 20px;            /* 适度缩小文字:20px */
    }

    /* 导航链接间距调整 */
    .nav-links {
        gap: 15px;                  /* 减小菜单项间距:15px */
    }

    /* 网格布局在平板端的适配 */
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                                    /* [平板适配] 最小 280px 一列,适应中等屏幕 */
        gap: 25px;                  /* 减小网格间距:25px */
    }

    /* 应用网格适配 */
    .application-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                                    /* [平板适配] 最小 220px 一列 */
        gap: 18px;                  /* 减小间距:18px */
    }

    /* 公司照片卡片 - 平板端 */
    .company-photo-card {
        width: 280px;               /* 平板端减小卡片宽度 */
    }
    
    .company-photo-img {
        height: 180px;              /* 平板端减小图片高度 */
    }

    /* Hero 区域在平板端的适配 */
    .hero {
        padding: 80px 18px;         /* 适度减小内边距:上下 80px,左右 18px */
    }

    /* 内容容器在平板端的适配 */
    .container {
        padding: 35px 18px;         /* 适度减小内边距:上下 35px,左右 18px */
    }

    /* 章节标题在平板端的适配 */
    .section-title {
        font-size: 28px;            /* 适度缩小标题:28px */
        margin-bottom: 35px;        /* 适度减小下边距:35px */
    }

    /* 联系 CTA 区域在平板端的适配 */
    .contact-cta {
        padding: 35px 18px;         /* 适度减小内边距 */
    }

    .contact-cta h3 {
        font-size: 22px;            /* 适度缩小标题:22px */
    }

    .contact-cta p {
        font-size: 15px;            /* 适度缩小文字:15px */
    }

    /* 应用区域在平板端的适配 */
    .application-section {
        padding: 35px 18px;         /* 适度减小内边距 */
    }

    /* 二维码在移动端垂直排列 */
    .qr-codes {
        flex-direction: column;     /* 垂直排列 */
        gap: 20px;                  /* 间距:20px */
    }

    /* 二维码图片在平板端的适配 */
    .qr-code-image {
        width: 190px;               /* 平板端适度缩小图片:190px */
        height: 190px;              /* 高度:190px */
    }
    
    /* 联系页面门店图片卡片在平板端的适配 */    
    .store-photo-img {
        height: 160px;              /* 平板端减小图片高度 */
    }
    
    .store-photo-caption {
        padding: 8px 12px;          /* 减小内边距 */
        font-size: 13px;            /* 字号 */
    }
}

/* -----------------------------------------------------------------------------
 * 响应式媒体查询 - 平板设备适配 (768px-1024px)
 * 目标设备:iPad、小尺寸平板等中等屏幕设备
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 导航栏在平板设备的适配 */
    .nav-container {
        padding: 16px;              /* 调整内边距 */
    }
    
    /* [关键修复] 主网格布局强制两列 - 防止 900-1024px 时出现 3+1 的不规则排列 */
    .grid {
        grid-template-columns: repeat(2, 1fr);  /* 强制两列布局,确保 2x2 矩阵排列 */
        gap: 25px;                  /* 适中间距 */
    }
    
    /* 核心优势展示网格在平板设备的适配 - 2x2 布局 */
    .about-features {
        grid-template-columns: repeat(2, 1fr);  /* 强制两列布局,形成 2x2 排列 */
        gap: 20px;                  /* 适中间距 */
        margin-bottom: 35px;        /* 下边距 */
    }
    
    /* 优势项在平板设备的适配 */
    .feature-item {
        padding: 20px 15px;         /* 适中的内边距 */
    }
    
    /* 优势图标在平板设备的大小 */
    .feature-icon {
        font-size: 40px;            /* 图标大小介于桌面和移动端之间 */
        margin-bottom: 12px;        /* 下边距 */
    }
    
    /* 优势标题在平板设备的适配 */
    .feature-item h3 {
        font-size: 20px;            /* 字号 */
        margin-bottom: 8px;         /* 下边距 */
    }
    
    /* 优势描述在平板设备的适配 */
    .feature-item p {
        font-size: 16px;            /* 字号 */
        line-height: 1.6;           /* 行高 */
    }

    /* 联系信息框适配 - 移动端 */
    .contact-info-box {
        padding: 20px;              /* 减小内边距:20px */
        flex: none;                 /* 禁用弹性增长 */
    }

    .contact-info-box h3 {
        font-size: 18px;            /* 缩小标题:18px */
    }

    .contact-info-box h4 {
        font-size: 18px;            /* 缩小副标题:16px */
    }

    .contact-info-box p {
        font-size: 16px;            /* 缩小文字:14px */
    }
}

/* -----------------------------------------------------------------------------
 * 响应式媒体查询 - 移动设备适配 (最大宽度 768px)
 * 目标设备:iPhone、Android 手机等小屏幕设备
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* [第一层防护] 全局设置:防止小屏幕上的水平溢出 */
    body {
        overflow-x: hidden;         /* [关键] 隐藏横向滚动条:强制内容自适应屏幕宽度 */
    }

    /* 导航栏容器优化 - 移动端 */
    .nav-container {
        padding: 12px 15px;         /* 减小内边距:上下 12px,左右 15px */
    }

    /* Logo 在小屏幕上的适配 */
    .logo {
        gap: 8px;                   /* 减小间距:8px */
    }

    .logo-icon {
        height: 32px;               /* 缩小图标:32px */
        width: 32px;                /* 宽度:32px */
    }

    .logo-text {
        font-size: 18px;            /* 缩小文字:18px */
        white-space: nowrap;        /* 不换行 */
    }

    /* [第二层防护] 移动端下拉菜单 - 关键交互组件 */
    .nav-links {
        display: none;                          /* 默认隐藏:点击汉堡菜单后才显示 */
        position: absolute;                     /* 绝对定位:脱离文档流,避免挤压其他内容 */
        top: 100%;                              /* 紧贴导航栏底部:从 header 下方开始显示 */
        left: 0;                                /* 左对齐:与导航栏左侧对齐 */
        width: 100%;                            /* 占满宽度:充分利用小屏幕空间 */
        background: var(--white);               /* 白色背景:与导航栏保持一致 */
        flex-direction: column;                 /* 垂直排列:导航项从上到下堆叠 */
        padding: 15px 0;                        /* 上下内边距 15px:提供舒适的点击区域 */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* 阴影效果:4px 模糊,6px 扩散,营造悬浮深度感 */
        z-index: 1002;                          /* [关键] 层级 1002:必须高于 header(1000) 和 menu-toggle(1001),确保菜单显示在最上层 */
        overflow-x: hidden;                     /* [第三层防护] 防止菜单内容溢出 */
    }

    .nav-links.active {
        display: flex;              /* 激活状态:显示下拉菜单 */
    }

    /* 菜单项 */
    .nav-links li {
        text-align: center;         /* 文字居中 */
        margin: 10px 0;             /* 上下边距:10px */
    }

    /* 菜单链接 */
    .nav-links a {
        display: block;             /* 块级显示,增加点击区域 */
        padding: 10px 15px;         /* 内边距:增加触摸区域 */
    }

    /* 移动端菜单按钮 */
    .menu-toggle {
        display: block;                         /* 显示按钮:小屏幕下启用汉堡菜单 */
        cursor: pointer;                        /* 鼠标指针:提示可点击 */
        padding: 8px;                           /* 内边距 8px:增加按钮点击区域 */
        font-size: 22px;                        /* 图标大小 22px:易于识别和点击 */
        z-index: 1001;                          /* [关键] 层级 1001:必须高于下拉菜单的 1000,确保按钮始终可见 */
        flex-shrink: 0;                         /* 禁止压缩:防止按钮被挤压变形 */
    }

    /* Hero 区域在移动端的适配 */
    .hero {
        padding: 60px 15px;         /* 减小内边距:上下 60px,左右 15px */
    }

    .hero h1 {
        font-size: 24px;            /* 缩小标题:24px */
    }

    /* 章节标题在移动端的适配 */
    .section-title {
        font-size: 24px;            /* 缩小标题:24px */
        margin-bottom: 30px;        /* 减小下边距:30px */
    }
    
    /* 可折叠标题在移动端的适配 */
    .collapsible-title {
        padding: 10px 15px;         /* 移动端减小内边距 */
        margin-bottom: 10px;        /* 减小下边距:10px */
    }
    
    .title-text {
        font-size: 18px;            /* 移动端缩小文字 */
    }
    
    .collapsible-btn {
        width: 32px;                /* 移动端缩小按钮 */
        height: 32px;               /* 移动端缩小按钮 */
        margin-left: 10px;          /* 减小左边距 */
    }
    
    .arrow {
        font-size: 14px;            /* 移动端缩小箭头 */
    }

    /* 内容容器适配 - 移动端 */
    .container {
        padding: 30px 15px;         /* 减小内边距:上下 30px,左右 15px */
        width: 100%;                /* 占满全宽 */
    }

    /* [关键修复] 移动端移除可折叠内容的 max-height 限制,确保所有卡片正常显示 */
    .collapsible-content {
        /* max-height: none !important;  移除最大高度限制 */
        overflow: visible !important; /* 允许内容溢出显示 */
    }

    /* 网格布局强制单列 - 移动端 */
    .grid {
        grid-template-columns: 1fr !important;  /* 单列布局 */
        gap: 20px;                  /* 减小网格间距:20px */
    }

    /* 两列网格改为单列 */
    .grid-two-columns {
        grid-template-columns: 1fr; /* 单列布局 */
    }

    /* 应用网格在移动端强制单列 */
    .application-grid {
        grid-template-columns: 1fr !important;  /* 单列布局 */
        gap: 15px;                  /* 减小间距:15px */
    }

    /* 应用区域在移动端的适配 */
    .application-section {
        padding: 30px 15px;         /* 减小内边距 */
    }

    .application-icon {
        font-size: 35px;            /* 缩小图标:35px */
    }

    /* 联系 CTA 区域在移动端的适配 */
    .contact-cta {
        margin-top: 25px;           /* 减小上边距:25px */
        margin-bottom: 8px;         /* 减小下边距:8px */
        padding: 30px 15px;         /* 减小内边距 */
    }

    .contact-cta h3 {
        font-size: 20px;            /* 缩小标题:20px */
    }

    .contact-cta p {
        font-size: 14px;            /* 缩小文字:14px */
    }

    /* 二维码在移动端垂直排列 */
    .qr-codes {
        flex-direction: column;     /* 垂直排列 */
        gap: 20px;                  /* 间距:20px */
    }

    .qr-code-image {
        width: 180px;               /* 缩小图片:180px */
        height: 180px;              /* 高度:180px */
    }

    /* 联系信息框适配 - 移动端 */
    .contact-info-box {
        padding: 20px;              /* 减小内边距:20px */
        height: auto;               /* 移动端同样高度自适应 */
        flex: none;                 /* 禁用弹性增长 */
    }

    .contact-info-box h3 {
        font-size: 18px;            /* 缩小标题:18px */
    }

    .contact-info-box h4 {
        font-size: 18px;            /* 缩小副标题:16px */
    }

    .contact-info-box p {
        font-size: 16px;            /* 缩小文字:14px */
    }
    
    /* 联系页面门店图片卡片在移动端的适配 */    
    .store-photo-img {
        height: 160px;              /* 移动端减小图片高度 */
    }
    
    .store-photo-caption {
        padding: 8px 12px;          /* 减小内边距 */
        font-size: 12px;            /* 移动端缩小字号 */
    }

    /* 地址链接在小屏幕的处理 */
    .address-link {
        word-break: break-all;      /* [防溢出] 允许单词内换行,防止长文本溢出 */
    }

    /* 移动端横向滚动容器适配 */
    .company-gallery-scroll {
        gap: 15px;                  /* 移动端减小间距至 15px */
        scroll-snap-type: x mandatory;  /* [强制] 滚动捕捉:确保每次完整显示一张卡片 */
    }
    
    .company-photo-card {
        width: 85vw;                /* 移动端卡片宽度:占视口 85%,留出右侧空间提示可滑动 */
        scroll-snap-align: center;  /* [优化] 滚动时卡片居中对齐 */
    }
    
    .company-photo-img {
        height: 180px;              /* 移动端减小图片高度 */
    }
    
    .gallery-scroll-hint {
        display: block;             /* 移动端显示滚动提示 */
    }
    
    /* 页脚导航栏在移动端的适配 */
    .footer-content {
        grid-template-columns: 1fr; /* 单列布局:垂直排列 */
        text-align: center;         /* 文字居中 */
        gap: 25px;                  /* 减小间距:25px */
    }
    
    /* 页脚区块标题在移动端的适配 */
    .footer-section h4 {
        font-size: 16px;            /* 缩小字号:16px */
    }
    
    /* 页脚导航链接悬停效果在移动端禁用 */
    .footer-links a:hover {
        transform: none;            /* 禁用位移效果 */
    }
    
    /* 页脚联系方式在移动端调整 */
    .footer-contact li {
        justify-content: center;    /* 居中对齐 */
    }
    
    /* 页脚版权信息在移动端的适配 */
    footer p {
        font-size: 13px;            /* 缩小字号:13px */
        padding: 0 10px;            /* 添加水平内边距,防止文字贴边 */
    }
    
    /* 页脚二维码在移动端的适配 */
    .footer-qr-codes {
        justify-content: center;    /* 居中对齐 */
        gap: 12px;                  /* 减小间距:12px */
    }
    
    /* 页脚二维码图片在移动端进一步缩小 */
    .footer-qr-image {
        width: 70px;                /* 移动端宽度:70px */
        height: 70px;               /* 移动端高度:70px */
    }
    
    /* 页脚二维码说明文字在移动端的适配 */
    .footer-qr-text {
        font-size: 12px;            /* 缩小字号:12px */
    }
    
    /* =========================================================================
     * 联系页面样式 - 移动端适配
     * 功能:为联系页面的门店图片展示等组件提供移动端优化
     * ========================================================================= */
    
    /* 联系页面门店图片卡片在移动端的适配 */  
    .store-photo-img {
        height: 160px;              /* 移动端减小图片高度 */
    }
    
    .store-photo-caption {
        padding: 8px 12px;          /* 减小内边距 */
        font-size: 12px;            /* 移动端缩小字号 */
    }
    
    /* =========================================================================
     * 首页优化样式 - 移动端适配
     * 功能:为首页新增的 Hero 区域、优势展示等提供移动端优化
     * ========================================================================= */
    
    /* Hero 标题在移动端的适配 */
    .hero-title {
        font-size: 26px;            /* 移动端缩小至 26px */
        margin-bottom: 14px;        /* 减小下边距 */
    }
    
    /* Hero 副标题在移动端的适配 */
    .hero-subtitle {
        font-size: 16px;            /* 移动端缩小至 16px */
        margin-bottom: 25px;        /* 减小下边距 */
    }
    
    /* Hero 按钮组在移动端垂直排列 */
    .hero-buttons {
        flex-direction: column;     /* 垂直排列 */
        gap: 12px;                  /* 减小间距 */
        align-items: center;        /* 居中对齐 */
    }
    
    /* 大按钮在移动端的适配 */
    .btn-large {
        width: 100%;                /* 占满全宽 */
        max-width: 280px;           /* 最大宽度限制 */
        padding: 12px 30px;         /* 调整内边距 */
        font-size: 16px;            /* 缩小字号 */
    }
    
    /* 轮廓按钮在移动端的适配 */
    .btn-outline:hover {
        transform: translateY(-2px); /* 减小悬停位移 */
    }
    
    /* 关于我们区块在移动端的适配 */
    .about-section {
        padding: 40px 15px;         /* 减小上下内边距 */
    }
    
    /* 关于我们介绍文字在移动端的适配 */
    .about-intro {
        font-size: 16px;            /* 缩小字号 */
        line-height: 1.7;           /* 调整行高 */
        margin-bottom: 35px;        /* 减小下边距 */
    }
    
    /* 核心优势展示网格在移动端的适配 */
    .about-features {
        grid-template-columns: repeat(2, 1fr);  /* 强制两列布局 */
        gap: 15px;                  /* 减小间距 */
        margin-bottom: 30px;        /* 减小下边距 */
    }
    
    /* 优势项在移动端的适配 */
    .feature-item {
        padding: 18px 12px;         /* 减小内边距 */
    }
    
    /* 优势图标在移动端缩小 */
    .feature-icon {
        font-size: 36px;            /* 缩小图标 */
        margin-bottom: 10px;        /* 减小下边距 */
    }
    
    /* 优势标题在移动端的适配 */
    .feature-item h3 {
        font-size: 16px;            /* 缩小字号 */
        margin-bottom: 8px;         /* 减小下边距 */
    }
    
    /* 优势描述在移动端的适配 */
    .feature-item p {
        font-size: 13px;            /* 缩小字号 */
        line-height: 1.5;           /* 调整行高 */
    }
    
    /* 产品区块在移动端的适配 */
    .products-section {
        padding: 40px 15px;         /* 减小上下内边距 */
    }
    
    /* 章节副标题在移动端的适配 */
    .section-subtitle {
        font-size: 18px;            /* 缩小字号 */
        margin-top: -20px;          /* 调整负边距 */
        margin-bottom: 30px;        /* 减小下边距 */
        padding: 0 10px;            /* 添加水平内边距 */
    }
    
    /* 产品卡片在移动端的适配 */
    .card-product .card-image {
        height: 180px;              /* 减小图片高度 */
    }
    
    /* 产品卡片内容区在移动端的适配 */
    .card-product .card-content {
        padding: 20px;              /* 减小内边距 */
    }
    
    /* 产品卡片标题在移动端的适配 */
    .card-product .card-content h3 {
        font-size: 22px;            /* 缩小字号 */
    }
    
    /* 产品卡片描述在移动端的适配 */
    .card-product .card-content p {
        font-size: 18px;            /* 缩小字号 */
        line-height: 1.6;           /* 调整行高 */
    }
    
    /* 了解更多链接在移动端的适配 */
    .card-more {
        font-size: 14px;            /* 缩小字号 */
    }
    
    /* 产品底部行动按钮区域在移动端的适配 */
    .products-cta {
        margin-top: 35px;           /* 减小上边距 */
    }
}

/* -----------------------------------------------------------------------------
 * 3. 灯箱功能响应式适配
 * 功能:为图片放大查看功能提供移动端优化
 * -------------------------------------------------------------------------- */

/* 768px 断点 - 移动端灯箱适配 */
@media (max-width: 768px) {
    /* [灯箱功能] 模态框内容区调整 */
    .modal-content {
        max-width: 95%;             /* 最大宽度:95%,利用更多屏幕空间 */
        padding: 50px 15px 15px;    /* 内边距:顶部 50px(为关闭按钮留空间),左右和下各 15px */
    }
    
    /* [灯箱功能] 关闭按钮位置调整 */
    .modal-close {
        top: 5px;                   /* 顶部距离:5px,更靠近边缘 */
        right: 5px;                 /* 右侧距离:5px */
        font-size: 28px;            /* 字号:28px,适配移动端 */
        width: 40px;                /* 宽度:40px,适中大小 */
        height: 40px;               /* 高度:40px */
    }
    
    /* [灯箱功能] 图片容器高度限制调整 */
    .modal-image-container,
    .modal-image {
        max-height: calc(100vh - 100px);
                                    /* 最大高度:视口高度减去关闭按钮和说明文字的空间 */
    }
    
    /* [幻灯片灯箱] 幻灯片灯箱模态框适配 */
    .slideshow-modal-content {
        padding: 50px 10px 10px;    /* 减小内边距:顶部 50px,左右和下各 10px */
    }
    
    /* [幻灯片灯箱] 幻灯片灯箱图片适配 */
    .slideshow-modal-image {
        max-width: 95%;             /* 移动端最大宽度:95% */
        max-height: calc(100vh - 80px);
                                    /* 移动端最大高度:视口高度减去 80px */
    }
    
    /* [幻灯片灯箱] 幻灯片灯箱关闭按钮适配 */
    .slideshow-modal-close {
        top: 10px;                  /* 移动端顶部距离:10px */
        right: 10px;                /* 移动端右侧距离:10px */
        font-size: 32px;            /* 移动端字号:32px */
        width: 45px;                /* 移动端宽度:45px */
        height: 45px;               /* 移动端高度:45px */
        line-height: 45px;          /* 移动端行高:45px */
    }
}