/* ============================================================================
   i18n-en.css —— 英文站覆盖层（仅在英文页加载，且在基础新版样式之后引入）
   作用：基础设计（配色/栅格/卡片/hero/动画）与中文站共用同一套 CDN 样式，
        本文件只针对“英文文案普遍比中文长”导致的溢出/换行/挤压问题做局部补丁。
   约定：只写差异，不复制基础样式；能不改布局结构就不改，优先调字号/间距/换行。
   加载顺序：styles-new.css → fidelity.css → expansion.css → interaction.css
            → banner.css →(按需 honors.css)→ i18n-en.css（本文件，最后）
   ========================================================================== */

/* --- 顶部主导航：英文菜单项更多更长（Engineering Services / Steel Frame 等），
       收窄间距与字号，避免 10 项在桌面端换行或溢出 --- */
.nav {
    gap: 20px;
}

.nav a {
    font-size: 13.5px;
    letter-spacing: 0;
}

/* 品牌区略收窄，给导航腾出空间 */
.brand {
    width: 260px;
}

/* --- 首页 hero 主标题：英文标题长，基础样式已用 !important 定为 50px，
       此处覆盖为更小字号并放宽行高，保证 2~3 行内排版稳定 --- */
.hero-copy h1 {
    font-size: 42px !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
}

.hero-copy p {
    font-size: 17px;
    max-width: 720px;
}

@media (max-width: 900px) {
    .hero-copy h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 600px) {
    .hero-copy h1 {
        font-size: 27px !important;
    }
}

/* --- hero 底部资质信任条：英文资质名很长（尤其“金属屋面墙面特级资质”），
       缩小字号、收紧内距、允许正常换行，避免撑破三列网格 --- */
.hero-trust {
    padding: 20px 22px;
}

.trust-item {
    gap: 12px;
    padding: 0 16px;
}

.trust-item:first-child {
    padding-left: 2px;
}

.trust-item strong {
    font-size: 14px;
    line-height: 1.3;
}

.trust-item span {
    font-size: 11px;
    line-height: 1.35;
}

/* --- 数据条 stats：英文标签与数值（如 “40M+ sqm”）偏长，
       缩小数值字号防止窄列溢出 --- */
.stat b {
    font-size: 26px;
}

.stat span {
    font-size: 12px;
}

/* --- 产品体系 / 解决方案图卡标签：英文行业名较长
       （Warehousing & Logistics / Cold Chain Storage 等），
       缩小字号并允许换行，避免与右侧箭头挤压 --- */
.image-card .label {
    font-size: 13px;
    line-height: 1.3;
    gap: 8px;
}

/* --- 服务卡片：英文标题/描述较长，微调字号保证 6 列等高排版 --- */
.service-card h3 {
    font-size: 16px;
}

.service-card p {
    font-size: 12.5px;
}

/* --- 案例卡片：英文项目名/地点较长，允许换行 --- */
.case-card h3 {
    font-size: 16px;
    line-height: 1.35;
}

.case-card p {
    line-height: 1.5;
}

/* --- 区块标题：英文小标题（大写副标）与主标题较长，放宽换行 --- */
.section-heading h2 {
    line-height: 1.25;
}

.section-heading h2 small {
    margin-left: 10px;
    letter-spacing: .04em;
}

/* --- 按钮：英文按钮文案较长，允许自适应宽度、收紧左右内距 --- */
.btn {
    min-width: 0;
    padding: 0 20px;
    white-space: nowrap;
}

.hero-actions .btn {
    min-width: 150px;
}

/* --- 宣传片区按钮：基础栅格 .promo-layout 为 1.35fr/.65fr，右侧文案列偏窄，
       英文两个按钮总宽超列宽时被 flex-wrap 挤成两行（中文版文案短、同一行）。
       桌面端把文案列略加宽，同时按钮字号/内距收紧，保证两按钮同一行；
       900px 以下维持基础单列堆叠布局，不覆盖 --- */
@media (min-width: 901px) {
    .promo-layout {
        grid-template-columns: 1.2fr .8fr;
        gap: 40px;
    }
}

.promo-actions .btn {
    min-width: 0;
    padding: 0 18px;
    font-size: 14px;
}

/* --- 页脚：英文公司名/地址较长，保证正常断行不溢出列宽 --- */
.footer-links li,
.site-footer p {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.copyright span {
    line-height: 1.8;
}

/* --- 页脚 Follow Us：英文说明文字比 82px 二维码盒更宽，会把三个 flex 列撑成不等宽，
   居中的二维码图随之错位、间距不均；强制等宽列并居中内容，使图与文字像中文版一样成行对齐 --- */
.footer-qr {
    /* 仅英文加大列间距（基础 styles-new.css 为 14px，中英共用不可改） */
    gap: 30px;
}

.footer-qr > div {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-qr p {
    width: 100%;
    /* 英文说明统一控制为两行（模板内用 <br> 断行），字号略缩以保证每段不溢出列宽、三列文字成行对齐 */
    font-size: 12px;
    line-height: 1.5;
}

/* --- 联系页国内热线：英文标签/按钮比中文宽，基础 flex 换行会变成 2+1；
   仅英文改为三等分网格强制三卡同一行，并适度压缩内边距/字号避免溢出 --- */
.hotline-band-domestic .hotline-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.hotline-band-domestic .hotline-card {
    min-width: 0;
    /* 左右内边距收窄，为单行表头腾出宽度 */
    padding: 14px 12px 16px;
}

/* 卡名略缩一号，配合窄列保证「名称+标识」单行放下 */
.hotline-band-domestic .hotline-card small {
    font-size: 11px;
}

/* 列变窄后允许姓名与业务标识拆行兜底；间距收至 4px 尽量保持与左卡一致的单行表头 */
.hotline-band-domestic .hotline-head {
    flex-wrap: wrap;
    gap: 4px;
}

.hotline-band-domestic .hotline-tag {
    font-size: 10px;
    padding: 2px 6px;
}

.hotline-band-domestic .hotline-card .hotline-num {
    font-size: 18px;
}

.hotline-band-domestic .hotline-actions {
    gap: 8px;
    margin-top: 12px;
}

.hotline-band-domestic .hotline-action {
    padding: 3px 10px;
    font-size: 11px;
}

/* --- 海外公司卡：英文只留注册全称一行，标题区不再需要为中英两行预留 84px 高度；
   基础样式的靠上对齐会让国旗在剩余空白里“居中”而下坠，改为随内容高度整体垂直居中 --- */
.global-company-grid .office-title,
.overseas-contact-section .office-title {
    min-height: 0 !important;
    align-items: center !important;
}

/* --- 右侧锚点导航：英文条目（如 Qualifications & Honors）远长于中文，
   基础样式 ≥1680px 展开面板仅 138px 且标签 nowrap，英文会溢出卡片；
   加宽面板、缩小字号并允许换行兑底 --- */
@media (min-width: 1680px) {
    .about-anchor-nav {
        width: 200px;
    }

    .about-anchor-nav a b {
        font-size: 12px;
        white-space: normal;
        line-height: 1.35;
    }
}

/* --- 移动端：英文导航抽屉项较长，保证不换行错位 --- */
@media (max-width: 900px) {
    .nav {
        gap: 0;
    }

    .nav a {
        font-size: 15px;
    }

    .trust-item {
        padding: 0 10px;
    }

    /* 窄屏下国内热线三卡改回单列堆叠（覆盖上面的三等分网格） */
    .hotline-band-domestic .hotline-cards {
        grid-template-columns: 1fr;
    }
}