/* ============================================================================
 * company.css — 「公司简介与集团发展历程」页面专属内容样式
 * ----------------------------------------------------------------------------
 * 仅 introduction.html 引入（about.html 已改版为「关于我们」三卡片，
 * 使用 .about-cards，其样式见 base.css）。
 * 头部结构 / 主 / 副标题字号等基础样式由 base.css 维护；子页面 CSS 变量 /
 * 分隔线 / 导航栏 / 页脚等公共覆盖见 pages-common.css。
 * ============================================================================ */

/* 头部副标题与主标题等长校准：本页副标题 "GEM-DUO Co., Ltd.: Company Profile &
   Group Development Milestones" 较长，需负字距压缩以与主标题「晋德有限公司简介与集团发展历程」视觉等宽
   （实测值）；改文案或字体需重新校准 */
.header .header-content .branding-text .branding-sub {
    letter-spacing: -0.0968em;
}

/* 正文描述图：加载后淡入（base.css 未提供此效果） */
.responsive-img {
    height: auto;
    max-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease
}

.responsive-img.loaded {
    opacity: 1
}

/* ============================================================================
 * 「公司简介与集团发展历程」内容
 * ============================================================================ */
.company-history {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 0;
    max-width: 100%;
    width: 98%;
    margin: 1rem auto
}

.column {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    margin: .75rem auto;
    gap: 1.5rem;
    padding: 1.2rem 1.2rem
}

.column1 {
    flex: 0 0 51%;
    opacity: 1
}

.column2 {
    flex: 0 0 43%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 10px 0 1.5rem;
    border-left: 1px solid rgb(0 0 0 / 0.12)
}

.milestone-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-left: 2px solid rgb(21 21 142 / 0.25)
}

.milestone-item {
    position: relative;
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color)
}

.milestone-item::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--third-color)
}

.milestone-date {
    font-weight: 700;
    color: var(--third-color)
}

.milestone-en {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9em;
    color: #777
}

.milestone-item.milestone-highlight .milestone-line {
    display: block;
    background: linear-gradient(180deg, #5b8ec0 0%, #336699 50%, #2a5582 100%);
    border: 1px solid #24486e;
    padding: 0.15rem 0.5rem;
    color: #ffffff;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.35)
}

.milestone-item.milestone-highlight .milestone-date {
    color: #ffffff
}

.milestone-item.milestone-highlight .milestone-en {
    color: #ffffff
}

.column .column1 h2.blue,
.column .column1 h3.blue,
.column .column2 h2.blue,
.column .column2 h3.blue {
    color: var(--third-color);
    margin-bottom: 1rem;
    text-align: center;
    width: 100%
}

/* 保持原标题字号：英文节标题(h2.blue)沿用原 h3 的字号，中文副标题(h3.blue)沿用原 h4 的字号 */
.column .column1 h2.blue,
.column .column2 h2.blue {
    font-size: 1.17em;
    text-transform: uppercase;
}

.column .column1 h3.blue,
.column .column2 h3.blue {
    font-size: 1em;
}

.history-text {
    line-height: 1.8;
    margin-bottom: .95rem;
    color: var(--text-color);
    text-align: left
}

.history-text p {
    text-indent: 2em;
    margin-bottom: 0.9rem
}

.milestones-text {
    margin-top: 1rem;
    text-align: left
}

.milestone-era {
    color: var(--third-color);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    margin: 1.4rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgb(21 21 142 / 0.15)
}

#show-more-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
    padding: 0.4rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #ffffff;
    background: linear-gradient(90deg, #2b5a8c 0%, #1e4468 50%, #2b5a8c 100%);
    border: 1px solid #1e4468;
    border-radius: 0;
    cursor: pointer;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.35);
    transition: transform 0.2s ease, filter 0.2s ease
}

#show-more-btn .show-more-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: transform 0.25s ease
}

#show-more-btn.expanded .show-more-icon {
    transform: rotate(180deg)
}

#show-more-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15)
}

/* ============================================================================
 * 移动端（≤767px）：内容微调
 * ============================================================================ */
@media (max-width:767px) {
    .column {
        flex-direction: row;
        align-items: flex-start
    }

    .column1,
    .column2 {
        flex: 100%;
        margin-bottom: 20px
    }

    .column2 {
        border-left: none;
        border-top: 1px solid rgb(0 0 0 / 0.12);
        padding-left: 10px;
        padding-top: 20px
    }

    .milestones-text li {
        font-size: 1rem
    }

    .milestones-text {
        overflow: hidden;
        transition: max-height 0.5s ease
    }

    .history-text,
    .milestones-text {
        font-size: 1.05rem;
        line-height: 1.8
    }

    #show-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 60%;
        margin: 20px 0;
        font-size: 1rem
    }
}