/**
 * 关于我们页面Banner对齐 - 参考联系我们页面
 * Banner背景：直接使用CSS代码（banner-images-fixed.css + 自定义外观CSS）
 * 文字位置：偏中上，不完全居中
 * 高度设置：与联系我们页面一致（min-height: 300px; max-height: 400px;）
 * 
 * @package Corporate_Theme
 */

/* ==========================================================================
   Banner尺寸和间距 - 完全参考联系我们页面
   ========================================================================== */

.page-template-template-about .archive-hero,
.page-about .page-hero {
    /* 与联系我们页面相同的高度设置 - 匹配自定义外观CSS */
    min-height: 300px !important;
    max-height: 400px !important;
    
    /* 使用flexbox实现偏中上对齐 - 覆盖about-page-premium.css的居中对齐 */
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    
    /* 调整内边距，让文字偏中上 - 与联系我们页面保持一致 */
    padding: 5rem 0 4rem !important;
    margin-top: 0 !important;
    
    /* 背景样式由CSS代码控制 - 不在这里设置 */
    /* banner-images-fixed.css: 背景图片 */
    /* 自定义外观CSS: min-height和max-height */
}

/* ==========================================================================
   Banner内容容器 - 偏中上对齐
   ========================================================================== */

.page-template-template-about .archive-hero .container,
.page-template-template-about .archive-hero-content,
.page-about .page-hero .container {
    /* 文字居中对齐 */
    text-align: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    
    /* 确保容器不会被flex影响 */
    width: 100% !important;
}

/* ==========================================================================
   Banner标题 - 完全参考联系我们页面的字体设置
   ========================================================================== */

.page-template-template-about .archive-hero .archive-title,
.page-template-template-about .archive-hero h1,
.page-about .page-hero .page-title,
.page-about .page-hero h1 {
    /* 字体大小 - 与联系我们页面完全一致 */
    font-size: 3rem !important;
    font-weight: 700 !important;
    
    /* 颜色 - 白色 */
    color: #ffffff !important;
    
    /* 间距 - 与联系我们页面一致 */
    margin: 0 0 20px 0 !important;
    
    /* 行高和对齐 */
    line-height: 1.2 !important;
    text-align: center !important;
    
    /* 文字阴影 - 增强可读性 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   Banner副标题/描述 - 完全参考联系我们页面的字体设置
   ========================================================================== */

.page-template-template-about .archive-hero .archive-description,
.page-template-template-about .archive-hero p,
.page-about .page-hero .page-subtitle,
.page-about .page-hero p {
    /* 字体大小 - 与联系我们页面完全一致 */
    font-size: 1.25rem !important;
    
    /* 颜色 - 白色半透明 */
    color: rgba(255, 255, 255, 0.95) !important;
    
    /* 透明度 - 与联系我们页面一致 */
    opacity: 0.9 !important;
    
    /* 间距 */
    margin: 0 auto !important;
    max-width: 800px !important;
    
    /* 行高和对齐 */
    line-height: 1.6 !important;
    text-align: center !important;
    
    /* 文字阴影 */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   移动端适配 - 保持偏中上对齐，与联系我们页面一致
   ========================================================================== */

@media (max-width: 768px) {
    .page-template-template-about .archive-hero,
    .page-about .page-hero {
        min-height: 250px !important;
        max-height: 350px !important;
        padding: 4rem 0 3rem !important;
    }
    
    .page-template-template-about .archive-hero .archive-title,
    .page-template-template-about .archive-hero h1,
    .page-about .page-hero .page-title,
    .page-about .page-hero h1 {
        /* 与联系我们页面一致 */
        font-size: 2rem !important;
    }
    
    .page-template-template-about .archive-hero .archive-description,
    .page-template-template-about .archive-hero p,
    .page-about .page-hero .page-subtitle,
    .page-about .page-hero p {
        /* 与联系我们页面一致 */
        font-size: 1.125rem !important;
    }
}

@media (max-width: 480px) {
    .page-template-template-about .archive-hero,
    .page-about .page-hero {
        min-height: 200px !important;
        max-height: 300px !important;
        padding: 3rem 0 2.5rem !important;
    }
    
    .page-template-template-about .archive-hero .archive-title,
    .page-template-template-about .archive-hero h1,
    .page-about .page-hero .page-title,
    .page-about .page-hero h1 {
        font-size: 1.8rem !important;
    }
    
    .page-template-template-about .archive-hero .archive-description,
    .page-template-template-about .archive-hero p,
    .page-about .page-hero .page-subtitle,
    .page-about .page-hero p {
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   背景样式说明
   ========================================================================== */

/* 
 * Banner的背景图片、颜色、遮罩等样式由以下CSS文件控制：
 * - banner-images-fixed.css (背景图片)
 * - about-page-premium.css (背景渐变)
 * - industrial-tech-colors.css (颜色主题)
 * 
 * 本文件只控制：
 * - Banner尺寸和内边距
 * - 文字位置（偏中上）
 * - 文字大小和样式
 */