/* ============================================
   Common Styles - 公共样式
   ============================================ */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Safari 兼容性：重置 button 元素的默认样式 */
button {
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: transparent;
    background-color: transparent;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

html {
    font-size: 16px;
    -webkit-scroll-behavior: smooth; /* Safari 兼容性 */
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #384963;
    background-color: #FCFBFB;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

/* 语言初始化阶段隐藏，避免语言切换闪烁 */
html.lang-initializing,
body.lang-initializing {
    visibility: hidden;
}

/* 在语言准备完毕前隐藏页面，避免默认中文闪烁 */
html:not(.lang-ready) body {
    opacity: 0;
    transition: opacity 0.15s ease;
}

html.lang-ready body {
    opacity: 1;
}

/* Container */
.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 220px;
    position: relative;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: #384963;
}

/* Section Titles */
.section-title-large {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.06em;
    color: #C69D7A;
    margin-bottom: 20px;
}

/* English language: smaller font size for section-title-large */
.lang-en .section-title-large {
    font-size: 40px;
}

.section-subtitle {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    color: #384963;
    margin-bottom: 20px;
}

.section-description {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6em;
    letter-spacing: 0.04em;
    color: #384963;
}

/* Buttons */
.btn {
    /* Safari 兼容性：重置浏览器默认样式 */
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 18px 40px;
    margin: 0;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    text-align: center;
    border-radius: 60px;
    border: 1px solid rgba(198, 157, 122, 0.5);
    background: transparent;
    background-color: transparent; /* Safari 兼容性 */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    outline: none; /* 移除 Safari 默认焦点样式 */
    box-shadow: none; /* 移除可能的默认阴影 */
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

/* Safari 兼容性：为不支持 gap 的浏览器添加 margin */
@supports not (gap: 20px) {
    .btn > *:not(:last-child) {
        margin-right: 20px;
    }
}

.btn-primary {
    color: #FCFBFB;
    border-color: rgba(198, 157, 122, 0.5);
}

.btn-primary:hover {
    background: rgba(198, 157, 122, 0.1);
}

.btn-outline {
    color: #4F5D6C;
    border-color: rgba(198, 157, 122, 0.5);
}

.btn-outline:hover {
    background: rgba(198, 157, 122, 0.05);
    color: #384963;
}

.btn img {
    width: 34px;
    height: 34px;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Main Content */
.main-content {
    width: 100%;
    min-height: 5640px;
    position: relative;
    overflow: hidden;
}

/* 移动端 Main Content 适配 - 所有 section 改为相对定位 */
@media screen and (max-width: 768px) {
    /* 所有页面的 main-content 类 */
    .main-content,
    .index-main-content,
    .about-main-content,
    .services-main-content,
    .workflow-main-content,
    .cooperation-main-content,
    .career-main-content,
    .contact-main-content {
        min-height: auto;
        overflow: visible;
    }
    
    /* 所有 section 改为相对定位，并添加间距占位 */
    .main-content > section,
    .index-main-content > section,
    .about-main-content > section,
    .services-main-content > section,
    .workflow-main-content > section,
    .cooperation-main-content > section,
    .career-main-content > section,
    .contact-main-content > section {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-bottom: calc(40px * 100vw / 390px);
        .container{
            padding: 0;
        }
    }
    
    .main-content > section:last-child,
    .index-main-content > section:last-child,
    .about-main-content > section:last-child,
    .services-main-content > section:last-child,
    .workflow-main-content > section:last-child,
    .cooperation-main-content > section:last-child,
    .career-main-content > section:last-child,
    .contact-main-content > section:last-child {
        margin-bottom: 0;
    }

    /* H5 统一设置内页 section 标题字号（首页已单独控制，不在此列表内） */
    .about-main-content .container h2.section-title-large,
    .services-main-content .container h2.section-title-large,
    .workflow-main-content .container h2.section-title-large,
    .cooperation-main-content .container h2.section-title-large,
    .contact-main-content .container h1,
    .career-main-content .container h2.section-title-large {
        font-size: 44px;
        margin-bottom: 20px;
        height: auto;
    }
    .about-main-content .container h3,
    .services-main-content .container h3,
    .contact-main-content .container .contact-company-name-en,
    .workflow-main-content .container h3,
    .cooperation-main-content .container h3,
    .career-main-content .container h3{
        font-size: 16px;
        margin-bottom: 30px;
        padding: 0 30px;
    }

    .about-main-content .container p,
    .services-main-content .container p,
    .contact-main-content .container .contact-info-list .contact-info-item,
    .workflow-main-content .container p,
    .cooperation-main-content .container p,
    .career-main-content .container p{
        width: 100%;
        padding: 0 30px;
        font-size: 14px;
    }
}

/* ============================================
   Common Banner Styles - 公共 Banner 样式
   提取自各页面，避免重复
   ============================================ */

/* Banner Image Wrapper - 通用样式 */
.banner-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari 兼容性 */
}

.banner-image-wrapper img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover; /* Safari 兼容性 */
    object-fit: cover;
    border-radius: 0 0 0 175px;
}

/* 默认：PC 显示，隐藏 H5 图 */
.banner-image-wrapper .banner-image-h5 {
    display: none;
}

/* 移动端：只显示 H5 图 */
@media screen and (max-width: 768px) {
    .banner-image-wrapper .banner-image-pc {
        display: none;
    }
    .banner-image-wrapper .banner-image-h5 {
        display: block;
    }
}