/* css/style.css */

/* 1. 字体声明 */
@font-face {
    font-family: 'GSSans';
    src: url('./fonts/GSSans-Regular.otf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muoto';
    src: url('./fonts/Muoto-Regular.otf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. 基础布局与动画 */
html { scroll-behavior: smooth; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.product-card:hover .product-arrow { transform: translateX(5px); color: #3b82f6; }

/* 3. 多语言字体统一控制 */

/* 默认字体 (中文环境) */
body, .lang-zh { 
    font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; 
}

/* 英文环境下的全局字体切换 (如果需要全站切换) */
.lang-en { 
    font-family: 'Muoto', 'Arial', sans-serif !important; 
}

/* 针对特定标题的动态切换 */
/* 中文时用 HarmonyOS Sans, 英文时用 Muoto */
.font-title-dynamic {
    font-family: inherit; /* 继承 body */
}

/* 通用特殊字体类 (用于手动指定 GS Sans) */
.font-special {
    font-family: 'GSSans', sans-serif !important;
}

.lang-en .font-title-dynamic {
    font-family: 'GSSans', sans-serif !important;
    letter-spacing: 0.02em;
}

/* 针对英文状态下的标题行距微调 */
.lang-en .font-title-dynamic {
    /* 使用稍小的行高覆盖 Tailwind 的默认设置 */
    line-height: 1.1 !important; 
    /* 稍微缩小字号，防止 CHINA CAPSULE LEADER 再次折成三行 */
    /* 增加微小的字间距，提升高级感 */
    letter-spacing: -0.01em;
}

/* 针对正文段落（desc）的行距微调 */
.lang-en p[data-i18n] {
    line-height: 1.4 !important;
}

/* ==========================================
   移动端 (Mobile) 专项优化样式 
   ========================================== */

@media (max-width: 767px) {
    /* 1. 修复切换按钮 (Tabs) 重叠问题 */
    /* 让按钮容器高度自适应并允许换行 */
    .container.mx-auto.flex.justify-around {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 10px 0 !important;
        align-items: center !important;
    }

    /* 调整按钮尺寸，确保文字展开不重叠 */
    .tab-btn {
        width: 33.33% !important;     /* 三个按钮平分宽度 */
        padding-left: 4px !important;  /* 缩小内边距 */
        padding-right: 4px !important;
        padding-bottom: 8px !important;
        font-size: 13px !important;    /* 稍微缩小字号适应窄屏 */
        white-space: nowrap !important; /* 强制文字不换行 */
        text-align: center !important;
        border-bottom-width: 2px !important;
    }

    /* 2. 修复关键成果 (Key Results) 分割线与对齐 */
    /* 移除 PC 端的纵向分割线，改用纵向间距 */
    .grid-cols-2 {
        gap: 24px 0 !important;
    }

    /* 取消原本在移动端会错位的 divide-x 和 border-x */
    .md\:divide-x, .md\:border-x {
        border-left-width: 0 !important;
        border-right-width: 0 !important;
    }

    /* 每一个成果项的微调 */
    .grid-cols-2 > div {
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 10px 0 !important;
    }

    /* 给前 4 项增加淡淡的底边线，形成 2x2 的整齐感 */
    .grid-cols-2 > div:nth-child(-n+4) {
        border-bottom: 1px solid #f3f4f6 !important;
    }
}

/* 3. 英文标题行距与字体补丁 */
.lang-en .font-title-dynamic {
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    word-break: keep-all !important;
}