@charset "utf-8";
/**
 * 公司历程页（page-gongsilicheng.php）专用样式 · 方案 C：横向进度线 + 卡片墙 · 2026-10-16
 * ------------------------------------------------------------------
 * 复用 bc-about.css 的 Banner / 吸顶胶囊条 / 区块标题 / 白卡 / 深蓝收尾横幅；
 * 本文件只新增两个组件：.lc-prog（横向进度线）、.lc-wall（卡片墙）。
 * 配色与圆角、边框、阴影全部沿用站内规范：#023793 / #f7c433 / #e6ebf3 / radius 8。
 */

/* ---------------- 横向进度线 ---------------- */
.lc-prog {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 2px 0 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.lc-prog::-webkit-scrollbar { display: none; }
.lc-prog .in {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    min-width: 100%;
    height: 48px;
    padding: 0 6px;
}
.lc-prog .ln {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 34px;
    height: 2px;
    border-radius: 2px;
    background: -webkit-linear-gradient(left, #023793 0%, #b7c6dd 42%, #c9d5e6 70%, #d9b64a 100%);
    background: linear-gradient(90deg, #023793 0%, #b7c6dd 42%, #c9d5e6 70%, #d9b64a 100%);
    opacity: .55;
}
.lc-prog .pt {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 46px;
    text-align: center;
}
.lc-prog .pt b {
    display: block;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 16px;
    color: #98a4b4;
    letter-spacing: .5px;
}
.lc-prog .pt u {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border: 3px solid #c3cede;
    border-radius: 50%;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .22s;
    transition: all .22s;
}
.lc-prog .pt.on b { color: #023793; font-weight: 700; }
.lc-prog .pt.on u { border-color: #023793; background: #023793; }

/* 刻度可点击（a 标签）：hover 抬升 + 焦点态 */
.lc-prog .pt {
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(2, 55, 147, .08);
}
.lc-prog .pt b { -webkit-transition: color .22s; transition: color .22s; }
.lc-prog .pt u { will-change: transform; }
.lc-prog .pt:hover b { color: #023793; }
.lc-prog .pt:hover u {
    border-color: #9db8d4;
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 4px 10px rgba(2, 55, 147, .14);
    box-shadow: 0 4px 10px rgba(2, 55, 147, .14);
}
.lc-prog .pt.on:hover u { border-color: #023793; }
.lc-prog .pt:focus { outline: none; }
.lc-prog .pt:focus-visible {
    outline: 2px solid #023793;
    outline-offset: 3px;
    border-radius: 4px;
}

/* 悬停刻度 → 重要事件提示气泡（JS 挂到 body，absolute 定位，避免被 .lc-prog overflow 裁剪） */
.lc-tip {
    position: absolute;
    z-index: 1000000;
    width: max-content;
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #023793;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
    -webkit-box-shadow: 0 12px 28px rgba(2, 55, 147, .3);
    box-shadow: 0 12px 28px rgba(2, 55, 147, .3);
    opacity: 0;
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.lc-tip.show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.lc-tip::after {                          /* 小箭头：--ax 由 JS 按刻度中心写入 */
    content: '';
    position: absolute;
    left: var(--ax, 50%);
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #023793;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}
.lc-tip.below::after { bottom: auto; top: -4px; }
.lc-tip .tp { display: block; }
.lc-tip .tp + .tp {                       /* 同年多条事件（2017）用分隔线隔开 */
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.lc-tip .tp b {
    display: block;
    margin: 0 0 1px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #f7c433;
    letter-spacing: .3px;
}

/* 点击刻度后对应卡片的高亮闪烁（1.6s，动画结束由 JS 摘掉 .flash） */
@keyframes lcFlash {
    0%   { border-color: #9db8d4; -webkit-box-shadow: 0 0 0 5px rgba(2, 55, 147, .18); box-shadow: 0 0 0 5px rgba(2, 55, 147, .18); }
    100% { border-color: #9db8d4; -webkit-box-shadow: 0 0 0 14px rgba(2, 55, 147, 0);  box-shadow: 0 0 0 14px rgba(2, 55, 147, 0); }
}
.lc-card.flash {
    border-color: #9db8d4;
    -webkit-animation: lcFlash 1.6s ease-out 1;
    animation: lcFlash 1.6s ease-out 1;
}

/* ---------------- 卡片墙 ---------------- */
.lc-wall {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.lc-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    padding: 22px 22px 20px;
    overflow: hidden;
    -webkit-transition: all .22s;
    transition: all .22s;
}
.lc-card:hover {
    border-color: #c9d9f2;
    -webkit-box-shadow: 0 6px 18px rgba(2, 55, 147, .08);
    box-shadow: 0 6px 18px rgba(2, 55, 147, .08);
}
.lc-card .yr {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #023793;
    letter-spacing: .5px;
}
.lc-card .mon {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #98a4b4;
    letter-spacing: .5px;
}
.lc-card h3 {
    margin: 14px 0 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.6;
    color: #17243c;
    letter-spacing: .3px;
}
.lc-card p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #7d8999;
}
.lc-card .tag {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 400;
    line-height: 19px;
    border-radius: 3px;
    background: #eaf1fc;
    color: #023793;
    vertical-align: 2px;
    white-space: nowrap;
}
.lc-card .corner {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 11px;
    font-size: 11px;
    line-height: 20px;
    border-radius: 0 8px 0 8px;
    letter-spacing: 1px;
}
.lc-card .corner.st { background: #eaf1fc; color: #023793; }
.lc-card .corner.ed { background: #023793; color: #f7c433; }

/* 末两卡各占 2 列：年份 / 月份左置，正文右置，避免留白 */
.lc-card.wide {
    grid-column: span 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 26px;
    padding: 26px 26px 24px;
}
.lc-card.wide .ym {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 132px;
    flex: 0 0 132px;
    padding-right: 26px;
    border-right: 1px solid #eaeff7;
}
.lc-card.wide .yr { font-size: 32px; }
.lc-card.wide .mon { margin-top: 6px; }
.lc-card.wide .tx { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.lc-card.wide h3 { margin-top: 0; font-size: 17px; }
.lc-card.wide p { margin-top: 10px; }

/* ---------------- 响应式 ---------------- */
@media screen and (max-width: 1024px) {
    .lc-wall { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .lc-card.wide { grid-column: span 2; }
    .lc-prog .in { min-width: 760px; }
}

@media screen and (max-width: 767px) {
    .lc-prog { margin-bottom: 26px; }
    .lc-prog .in { min-width: 660px; }
    .lc-prog .pt { width: 40px; }
    .lc-prog .pt b { font-size: 10.5px; }
    .lc-wall { gap: 12px; }
    .lc-card { padding: 16px 15px 15px; }
    .lc-card .yr { font-size: 21px; }
    .lc-card .mon { font-size: 10.5px; }
    .lc-card h3 { margin-top: 10px; font-size: 14px; }
    .lc-card p { margin-top: 6px; font-size: 12px; line-height: 1.75; }
    .lc-card .tag { margin-left: 6px; padding: 0 6px; font-size: 10px; line-height: 17px; }
    .lc-card.wide {
        display: block;
        padding: 16px 15px 15px;
    }
    .lc-card.wide .ym {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px dashed #e6ebf3;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .lc-card.wide .yr { font-size: 22px; }
    .lc-card.wide h3 { font-size: 14.5px; }
}