/**
 * Section Spacing Unification
 * 统一页面区域间距系统
 */

/* 定义统一的spacing变量 */
:root {
    /* 标准section间距 */
    --section-padding-y: 48px;           /* 垂直padding - 桌面端 */
    --section-padding-y-tablet: 40px;    /* 垂直padding - 平板端 */
    --section-padding-y-mobile: 32px;    /* 垂直padding - 移动端 */

    /* 内容区域左右padding */
    --section-padding-x: 24px;           /* 水平padding - 标准 */
    --section-padding-x-mobile: 16px;    /* 水平padding - 移动端 */

    /* 大区域特殊间距 */
    --section-padding-hero: 80px;        /* Hero区域 - 桌面端 */
    --section-padding-hero-mobile: 60px; /* Hero区域 - 移动端 */

    /* 小区域间距 */
    --section-padding-compact: 32px;     /* 紧凑区域 - 桌面端 */
    --section-padding-compact-mobile: 24px; /* 紧凑区域 - 移动端 */
}

/* 基础section样式重置和统一 */
.section,
.hero-section,
.categories-section,
.products-section,
.advantages-section,
.about-section,
.contact-section,
.company-section,
.features-section {
    /* 统一垂直padding */
    padding-top: var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;

    /* 移除过大的margin */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hero区域特殊处理 - 需要更大的spacing */
.hero-section {
    padding-top: var(--section-padding-hero) !important;
    padding-bottom: var(--section-padding-hero) !important;
}

/* 紧凑区域 - 需要较小的spacing */
.compact-section,
.newsletter-section,
.cta-section {
    padding-top: var(--section-padding-compact) !important;
    padding-bottom: var(--section-padding-compact) !important;
}

/* 容器内部padding统一化 */
.section-container,
.hero-content,
.categories-container,
.products-container,
.advantages-container,
.about-container,
.contact-container,
.section-inner {
    padding-left: var(--section-padding-x) !important;
    padding-right: var(--section-padding-x) !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 全宽容器（如产品轮播）不需要左右padding */
.full-width-container,
.products-carousel-wrapper,
.hero-background {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
}

/* 产品展示区域的特殊处理 - 确保与版心对齐 */
.products-section .section-container,
.products-section .products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--section-padding-x) !important;
    padding-right: var(--section-padding-x) !important;
}

.products-section .products-title,
.products-section .products-subtitle {
    /* 标题区域与产品分类标题左对齐 - 使用统一的120px基准 */
    padding-left: 120px !important;
    padding-right: var(--section-padding-x);
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none;
}

/* 分类区域标题需要与卡片左对齐 */
.categories-section .section-title,
.categories-section .categories-title,
.categories-section .categories-subtitle {
    /* 与categories-grid的120px左边距对齐 */
    padding-left: 120px !important;
    padding-right: var(--section-padding-x);
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none;
}

/* 统一所有区域标题居中显示 */
.advantages-section .section-title,
.features-section .section-title,
.about-section .section-title,
.company-section .section-title,
.contact-section .section-title {
    /* 居中显示 */
    text-align: center !important;
    padding-left: var(--section-padding-x) !important;
    padding-right: var(--section-padding-x) !important;
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none !important;
    /* 设置字号为1.5rem */
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
}

/* 副标题居中显示 */
.advantages-section .section-subtitle,
.features-section .section-subtitle,
.about-section .section-subtitle,
.company-section .section-subtitle,
.contact-section .section-subtitle {
    /* 居中显示 */
    text-align: center !important;
    padding-left: var(--section-padding-x) !important;
    padding-right: var(--section-padding-x) !important;
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none !important;
    /* 副标题使用较小字号 */
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    color: var(--apple-text-secondary) !important;
    line-height: 1.5 !important;
}

/* 特别处理关于我们区域的标题，确保覆盖原有样式 */
.company-section .section-title {
    /* 居中显示，覆盖apple-style.css中的设置 */
    text-align: center !important;
    padding-left: var(--section-padding-x) !important;
    padding-right: var(--section-padding-x) !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    max-width: none !important;
    /* 统一字号和基础样式 */
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
    color: var(--apple-black);
    /* 保持渐变效果 */
    background: linear-gradient(135deg, var(--apple-black) 0%, var(--apple-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 确保产品轮播的左边距与版心对齐 */
.products-carousel-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.products-grid {
    /* 计算左边距：使产品卡片与版心左边缘对齐 */
    padding-left: calc((100vw - 1200px) / 2 + var(--section-padding-x)) !important;
}

/* 标题区域统一spacing */
.section-title {
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

.section-subtitle {
    margin-bottom: 32px !important;
    margin-top: 0 !important;
}

/* 内容区域间距 */
.section-content {
    margin-top: 0 !important;
}

/* 修复产品展示区域的特殊padding */
.products-section {
    /* 保持标准padding，但调整内部元素 */
    padding-top: var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;
}

.products-carousel {
    /* 移除过大的内部padding */
    padding-top: 24px !important;
    padding-bottom: 32px !important;
}

.products-grid {
    /* 保持Apple风格的左边距，不覆盖原有设计 */
    padding-left: 120px !important;
}

/* 修复分类区域间距 */
.categories-section {
    padding-top: var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;
}

.categories-grid {
    margin-top: 24px;
    gap: 20px;
}

/* 修复联系区域和关于我们区域 */
.contact-section,
.about-section,
.company-section {
    /* 移除过大的padding */
    padding-top: var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;
}

/* 优势/特色区域 */
.advantages-section,
.features-section {
    padding-top: var(--section-padding-y) !important;
    padding-bottom: var(--section-padding-y) !important;
}

/* 卡片/网格内部间距优化 */
.category-card,
.advantage-card,
.feature-card {
    /* 统一卡片内部padding */
    padding: 24px !important;
}

/* 产品卡片不需要整体padding，只需要文字区域有padding */
.product-card {
    padding: 0 !important;
}

.category-card-small,
.feature-card-small {
    padding: 16px !important;
}

/* 按钮区域间距 */
.section-buttons,
.hero-buttons,
.cta-buttons {
    margin-top: 32px;
    margin-bottom: 0;
}

/* 响应式调整 - 平板端 */
@media (max-width: 1024px) {
    .section,
    .hero-section,
    .categories-section,
    .products-section,
    .advantages-section,
    .about-section,
    .contact-section,
    .company-section,
    .features-section {
        padding-top: var(--section-padding-y-tablet) !important;
        padding-bottom: var(--section-padding-y-tablet) !important;
    }

    .hero-section {
        padding-top: calc(var(--section-padding-hero) * 0.8) !important;
        padding-bottom: calc(var(--section-padding-hero) * 0.8) !important;
    }

    .compact-section,
    .newsletter-section,
    .cta-section {
        padding-top: calc(var(--section-padding-compact) * 0.8) !important;
        padding-bottom: calc(var(--section-padding-compact) * 0.8) !important;
    }
}

/* 响应式调整 - 移动端 */
@media (max-width: 768px) {
    .section,
    .hero-section,
    .categories-section,
    .products-section,
    .advantages-section,
    .about-section,
    .contact-section,
    .company-section,
    .features-section {
        padding-top: var(--section-padding-y-mobile) !important;
        padding-bottom: var(--section-padding-y-mobile) !important;
    }

    .hero-section {
        padding-top: var(--section-padding-hero-mobile) !important;
        padding-bottom: var(--section-padding-hero-mobile) !important;
    }

    .compact-section,
    .newsletter-section,
    .cta-section {
        padding-top: var(--section-padding-compact-mobile) !important;
        padding-bottom: var(--section-padding-compact-mobile) !important;
    }

    /* 移动端容器padding */
    .section-container,
    .hero-content,
    .categories-container,
    .products-container,
    .advantages-container,
    .about-container,
    .contact-container,
    .section-inner {
        padding-left: var(--section-padding-x-mobile) !important;
        padding-right: var(--section-padding-x-mobile) !important;
    }

    .products-grid {
        padding-left: var(--section-padding-x-mobile) !important;
    }

    /* 移动端分类网格对齐 */
    .categories-grid {
        padding-left: var(--section-padding-x-mobile) !important;
        padding-right: var(--section-padding-x-mobile) !important;
    }

    /* 移动端产品展示和分类区域标题左对齐 */
    .products-section .products-title,
    .products-section .products-subtitle,
    .categories-section .section-title,
    .categories-section .categories-title,
    .categories-section .categories-subtitle {
        padding-left: var(--section-padding-x-mobile) !important;
        padding-right: var(--section-padding-x-mobile);
        width: 100vw;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* 移动端其他区域标题居中显示 */
    .advantages-section .section-title,
    .advantages-section .section-subtitle,
    .features-section .section-title,
    .features-section .section-subtitle,
    .about-section .section-title,
    .about-section .section-subtitle,
    .company-section .section-title,
    .company-section .section-subtitle,
    .contact-section .section-title,
    .contact-section .section-subtitle {
        text-align: center !important;
        padding-left: var(--section-padding-x-mobile) !important;
        padding-right: var(--section-padding-x-mobile);
        width: 100vw;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* 移动端特别处理关于我们标题 */
    .company-section .section-title {
        text-align: center !important;
        padding-left: var(--section-padding-x-mobile) !important;
        padding-right: var(--section-padding-x-mobile) !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: 0 !important;
        max-width: none !important;
        /* 移动端保持统一字号 */
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.015em !important;
        line-height: 1.1 !important;
    }

    /* 移动端标题间距优化 */
    .section-title {
        margin-bottom: 12px !important;
    }

    .section-subtitle {
        margin-bottom: 24px !important;
    }

    /* 移动端卡片间距 */
    .category-card,
    .advantage-card,
    .feature-card {
        padding: 20px !important;
    }

    /* 移动端产品卡片保持无padding */
    .product-card {
        padding: 0 !important;
    }

    .category-card-small,
    .feature-card-small {
        padding: 16px !important;
    }

    /* 移动端按钮区域 */
    .section-buttons,
    .hero-buttons,
    .cta-buttons {
        margin-top: 24px;
    }
}

/* 小屏移动设备进一步优化 */
@media (max-width: 480px) {
    .section,
    .hero-section,
    .categories-section,
    .products-section,
    .advantages-section,
    .about-section,
    .contact-section,
    .company-section,
    .features-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .hero-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .section-container,
    .hero-content,
    .categories-container,
    .products-container,
    .advantages-container,
    .about-container,
    .contact-container,
    .section-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .products-grid {
        padding-left: 12px !important;
    }

    /* 小屏设备分类网格对齐 */
    .categories-grid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 小屏设备产品展示和分类区域标题左对齐 */
    .products-section .products-title,
    .products-section .products-subtitle,
    .categories-section .section-title,
    .categories-section .categories-title,
    .categories-section .categories-subtitle {
        padding-left: 12px !important;
        padding-right: 12px;
        width: 100vw;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* 小屏设备其他区域标题居中显示 */
    .advantages-section .section-title,
    .advantages-section .section-subtitle,
    .features-section .section-title,
    .features-section .section-subtitle,
    .about-section .section-title,
    .about-section .section-subtitle,
    .company-section .section-title,
    .company-section .section-subtitle,
    .contact-section .section-title,
    .contact-section .section-subtitle {
        text-align: center !important;
        padding-left: 12px !important;
        padding-right: 12px;
        width: 100vw;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* 小屏设备特别处理关于我们标题 */
    .company-section .section-title {
        text-align: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: 0 !important;
        max-width: none !important;
        /* 小屏设备保持统一字号 */
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.015em !important;
        line-height: 1.1 !important;
    }

    /* 小屏设备时，产品轮播左边距改为固定值 */
    .products-grid {
        padding-left: 12px !important;
    }
}

/* 特殊情况处理 */

/* 移除某些区域的默认margin */
.blocksy-section,
.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 确保footer与最后一个section的间距 */
.section:last-of-type,
.contact-section:last-of-type {
    margin-bottom: 0 !important;
}

/* 修复可能的overflow问题 */
.section-inner {
    overflow-x: hidden;
}

/* 调试模式 - 仅在开发环境显示 */
@media screen and (max-width: 1px) {
    /* 永远不会匹配，用于调试时临时启用 */
    .section,
    .hero-section,
    .categories-section,
    .products-section,
    .advantages-section,
    .about-section,
    .contact-section {
        outline: 1px dashed rgba(255, 0, 0, 0.3);
        position: relative;
    }

    .section::before {
        content: attr(class);
        position: absolute;
        top: 5px;
        left: 5px;
        background: rgba(255, 0, 0, 0.8);
        color: white;
        padding: 2px 8px;
        font-size: 12px;
        font-family: monospace;
        z-index: 9999;
    }
}

/* 打印样式优化 */
@media print {
    .section,
    .hero-section,
    .categories-section,
    .products-section,
    .advantages-section,
    .about-section,
    .contact-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        page-break-inside: avoid;
    }

    .section-container,
    .hero-content,
    .categories-container,
    .products-container,
    .advantages-container,
    .about-container,
    .contact-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}