/**
 * About Page Responsive Optimization
 * 关于页面响应式优化
 *
 * 针对手机端（< 600px）和平板端（600px - 782px）的优化
 * 使用标准断点：600px / 782px / 1200px
 */

/* ============================================
   1. Mission & Vision 区块响应式优化
   ============================================ */

/* 平板优化 (600px - 782px) */
@media (min-width: 600px) and (max-width: 782px) {
    /* 卡片内边距适度缩小 */
    .page-about .has-primary-50-background-color .wp-block-columns .wp-block-group {
        padding: var(--wp--preset--spacing--50) !important;
    }

    /* 图标缩小 */
    .page-about .has-primary-50-background-color .wp-block-columns svg {
        width: var(--wp--custom--icon-size--large) !important;
        height: var(--wp--custom--icon-size--large) !important;
    }
}

/* 移动端优化 (< 600px) */
@media (max-width: 600px) {
    /* 区块外边距缩小 */
    .page-about .has-primary-50-background-color {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }

    /* 卡片内边距大幅缩小 */
    .page-about .has-primary-50-background-color .wp-block-columns .wp-block-group {
        padding: var(--wp--preset--spacing--40) !important;
        border-radius: var(--wp--preset--spacing--20) !important;
    }

    /* 图标缩小 */
    .page-about .has-primary-50-background-color .wp-block-columns svg {
        width: var(--wp--custom--icon-size--medium) !important;
        height: var(--wp--custom--icon-size--medium) !important;
    }

    /* 图标容器间距 */
    .page-about .has-primary-50-background-color .wp-block-columns > div[style*="margin-bottom"] {
        margin-bottom: var(--wp--preset--spacing--30) !important;
    }

    /* 标题字号调整 */
    .page-about .has-primary-50-background-color .wp-block-columns h3 {
        font-size: var(--wp--preset--font-size--normal) !important;
    }

    /* 段落字号 */
    .page-about .has-primary-50-background-color .wp-block-columns p {
        font-size: var(--wp--preset--font-size--small) !important;
    }

    /* Columns 间距 */
    .page-about .has-primary-50-background-color .wp-block-columns {
        gap: var(--wp--preset--spacing--40) !important;
    }
}

/* ============================================
   2. Core Values 卡片细节优化
   ============================================ */

.core-values-decorated .core-values-grid .value-icon {
    background: var(--wp--preset--color--primary-50) !important;
}

.core-values-decorated .core-values-grid .value-icon svg {
    stroke: var(--wp--preset--color--primary) !important;
}

@media (max-width: 600px) {
    /* 核心價值：手機端兩欄（覆蓋區塊內聯樣式） */
    .core-values-decorated .core-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--wp--preset--spacing--30) !important;
    }

    /* 卡片内边距优化 */
    .value-card {
        padding: var(--wp--preset--spacing--40) !important;
    }

    /* 图标容器优化 */
    .value-card .value-icon {
        width: var(--wp--custom--icon-size--xx-large) !important;
        height: var(--wp--custom--icon-size--xx-large) !important;
        margin-bottom: var(--wp--preset--spacing--20) !important;
    }

    /* 图标尺寸 */
    .value-card svg {
        width: var(--wp--custom--icon-size--small) !important;
        height: var(--wp--custom--icon-size--small) !important;
    }

    /* 标题字号 */
    .value-card h3 {
        font-size: var(--wp--preset--font-size--normal) !important;
        margin-bottom: var(--wp--preset--spacing--10) !important;
    }

    /* 描述文字 */
    .value-card p {
        font-size: var(--wp--preset--font-size--small) !important;
    }

}

/* ============================================
   3. 真实陪伴场景区块优化
   ============================================ */

@media (max-width: 600px) {
    /* 图片圆角优化 */
    .scene-image img {
        border-radius: var(--wp--preset--spacing--30) !important;
    }

    /* Badge 进一步缩小 */
    .scene-badge {
        padding: 6px var(--wp--preset--spacing--20) !important;
        font-size: var(--wp--preset--font-size--xs) !important;
    }
}

/* 移動端優化 (< 600px) - 合併到標準斷點 */
@media (max-width: 600px) {
    .scene-badge {
        padding: 4px var(--wp--preset--spacing--10) !important;
        font-size: var(--wp--preset--font-size--xs) !important;
        top: var(--wp--preset--spacing--20) !important;
    }

    /* 调整左右位置 */
    .scene-badge[style*="left:"] {
        left: var(--wp--preset--spacing--20) !important;
    }

    .scene-badge[style*="right:"] {
        right: var(--wp--preset--spacing--20) !important;
    }

    .scene-image img {
        border-radius: var(--wp--preset--spacing--20) !important;
    }

    /* 标题字号进一步缩小 */
    .scene-content h3 {
        font-size: var(--wp--preset--font-size--large) !important;
    }
}

/* ============================================
   4. Hero 区块文字优化
   ============================================ */

@media (max-width: 600px) {
    .about-hero-decorated {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }

    .about-hero-decorated h1 {
        font-size: clamp(32px, 8vw, 48px) !important;
        line-height: 1.2 !important;
    }

    .about-hero-decorated p {
        font-size: var(--wp--preset--font-size--normal) !important;
    }
}

/* ============================================
   5. 品牌故事区块优化（已有基础样式，微调）
   ============================================ */

@media (max-width: 600px) {
    /* 确保图片容器不会太大 */
    .story-illustration img {
        max-height: 200px !important;
    }
}

/* ============================================
   6. 全局区块间距优化
   ============================================ */

@media (max-width: 600px) {
    /* 所有主要区块的顶部和底部 padding 统一优化 */
    .core-values-decorated,
    .coaching-scenes-decorated,
    .milestones-decorated {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }

    /* 区块标题字号 */
    .core-values-decorated h2,
    .coaching-scenes-decorated h2,
    .milestones-decorated h2 {
        font-size: clamp(24px, 6vw, 32px) !important;
    }

    /* 区块副标题/描述 */
    .core-values-decorated p.has-gray-600-color,
    .coaching-scenes-decorated p.has-gray-600-color,
    .milestones-decorated p.has-gray-600-color {
        font-size: var(--wp--preset--font-size--small) !important;
        margin-bottom: var(--wp--preset--spacing--50) !important;
    }
}

/* ============================================
   7. Timeline 区块微调
   ============================================ */

@media (max-width: 600px) {
    /* Metric value 响应式优化 */
    .metric-value {
        font-size: clamp(28px, 8vw, 36px) !important;
    }
}

/* ============================================
   8. 性能优化 - 减少动画和模糊效果
   ============================================ */

@media (max-width: 600px) {
    /* 移动端禁用 hover 动画以提升性能 */
    .value-card,
    .metric-card-data,
    .timeline-item {
        transition: none !important;
    }
}

/* ============================================
   9. Reduced Motion 支持
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   10. 高对比度模式
   ============================================ */

@media (prefers-contrast: high) {
    .value-card,
    .metric-card-data,
    .scene-badge {
        border: 2px solid currentColor !important;
    }
}