/* ================================
   关于我们（about.html）样式
   ================================ */

/* ---------- 关于我们 ---------- */
.about-intro {
    display: flex;          /* 左文右图两栏 */
    align-items: center;    /* 图片与文字块垂直居中，随文字整体下沉 */
    gap: 44px;
}

.about-intro .text-block {
    flex: 1;
    min-width: 0;
}

/* 图片固定宽，拉伸至文字块全高（眉题顶→末行底）；内部图片卡下移 50px 使顶对齐标题；order 放到文字右侧 */
.about-intro .image-block {
    position: relative;
    order: 2;
    width: 400px;
    max-width: 42%;
    margin: 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* 窄屏恢复上下排列 */
@media (max-width: 768px) {
    .about-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .about-intro .image-block {
        order: 0;
        width: 100%;
        max-width: none;
        align-self: auto;
    }
    .about-intro .image-block .img-card {
        position: static;
        top: auto; left: auto; right: auto; bottom: auto;
        height: auto;
        aspect-ratio: 16 / 10;   /* 窄屏单独成行时恢复固定比例 */
    }
}

.about-intro .text-block h1 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
}

.about-intro .text-block p {
    color: var(--text-sub);
    margin-bottom: 16px;
    line-height: 1.9;
}

/* "我们是谁"标题：section-header 格式左对齐；header 宽度收缩为标题宽，眉题下划线随之等宽 */
.about-intro .section-header {
    display: inline-block;
    text-align: left;
    margin-bottom: 24px;
}

.about-intro .section-header .eyebrow::before,
.about-intro .section-header .eyebrow::after {
    display: none;
}

/* 眉题：斜体加粗 + 橙色渐隐下划线（宽度与"我们是谁"标题一致） */
.about-intro .section-header .eyebrow {
    font-style: italic;
    font-weight: 700;
    letter-spacing: 3px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    background: linear-gradient(to right, var(--accent), transparent) left bottom / 100% 2px no-repeat;
}

.about-intro .image-block .img-card {
    position: absolute;
    top: 50px;               /* 顶对齐「我们是谁」标题（眉题高度） */
    left: 0; right: 0; bottom: 16px;  /* 底对齐最后一行文字（上收段落下间距） */
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* 未放照片时的占位底，避免空卡 */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: var(--shadow-md);
}

.about-intro .image-block .intro-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ---------- 发展历程时间线 ---------- */
.timeline {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 0;
}

.timeline-curve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.timeline-curve path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 5;
    opacity: 0.35;
    vector-effect: non-scaling-stroke;
}

.timeline-item {
    position: relative;
    width: 46%;
    padding: 0 35px 20px 0;
    text-align: right;
    z-index: 1;
}

.timeline-item:nth-of-type(even) {
    margin-left: 54%;
    padding: 0 0 20px 35px;
    text-align: left;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 10px; /* 与 .year 行高 32px 对齐：32/2 - 12/2 = 10，圆点与年份同一条水平线 */
    right: -6px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--accent);
    z-index: 2;
}

.timeline-item:nth-of-type(even)::before {
    right: auto;
    left: -6px;
}

.timeline-item .year {
    font-size: 1.25rem;
    line-height: 32px; /* 固定行高，保证圆点(top:10px)与文字垂直居中于同一水平线 */
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 6px;
}

.timeline-item .content {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s, transform 0.3s;
}

.timeline-item .content:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.timeline-item .content h4 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.timeline-item .content p {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
}


/* ---------- 企业文化 bento ---------- */
.culture-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
    grid-auto-flow: dense;
}
.culture-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    overflow: hidden;
    transition: var(--transition);
}
.culture-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.culture-tile .culture-icon {
    width: 56px; height: 56px; margin-bottom: 18px;
    background: var(--bg-light); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.culture-tile .culture-icon svg { width: 30px; height: 30px; }
.culture-tile h4 { font-size: 1.18rem; color: var(--primary); margin-bottom: 10px; }
.culture-tile p { color: var(--text-sub); font-size: 0.9rem; line-height: 1.8; }

.culture-tile--wide { grid-column: span 2; }
.culture-tile--hero { grid-column: span 2; grid-row: span 2; }
.culture-tile--tall { grid-row: span 2; }

.culture-tile--quote { background: #fdf2e7; border-color: transparent; }
.culture-tile--quote .culture-icon { display: none; }
.culture-tile--quote h4 { display: none; }
.culture-tile--quote::before { content: ''; width: 36px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 16px; }
.culture-tile--quote p { color: var(--primary); font-size: 1.3rem; font-weight: 700; line-height: 1.7; }

.culture-tile--photo { background: var(--primary); border: none; padding: 0; }
.culture-tile--photo .culture-icon,
.culture-tile--photo h4,
.culture-tile--photo > p,
.culture-tile--photo .culture-text { display: none; }
.culture-media { display: none; }
.culture-tile--photo .culture-media {
    display: block;
    position: relative;
    width: 100%; height: 100%;
    min-height: 180px;
}
.culture-tile--photo .culture-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.culture-tile--photo .cam-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 44px 18px 14px;
    background: linear-gradient(transparent, rgba(10, 22, 38, 0.78));
    color: #fff;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.5px;
    text-align: center;
}

@media (max-width: 992px) {
    .culture-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(160px, auto); }
    .culture-tile--wide { grid-column: span 2; }
    .culture-tile--hero { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
    .culture-bento { grid-template-columns: 1fr; }
    .culture-tile--wide { grid-column: auto; }
    .culture-tile--hero { grid-column: auto; grid-row: auto; }
}


/* ---------- 团队介绍 ---------- */
.team-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
}

.team-stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.team-stat-card .icon-circle {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-stat-card .icon-circle svg {
    width: 28px;
    height: 28px;
}

.team-stat-card .num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.team-stat-card .label {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-top: 4px;
}


/* ---------- 学历构成 ---------- */
.education-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.edu-card {
    background: var(--white);
    padding: 40px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border);
}

.edu-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.edu-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 12px;
}

.edu-num span {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-sub);
    margin-left: 4px;
}

.edu-label {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 500;
}


/* ---------- 知识产权 ---------- */
.ip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.ip-card {
    background: var(--white);
    padding: 36px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border);
}

.ip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ip-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ip-icon svg {
    width: 32px;
    height: 32px;
}

.ip-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}

.ip-num span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-sub);
    margin-left: 4px;
}

.ip-label {
    font-size: 0.95rem;
    color: var(--text-sub);
}

@media (max-width: 768px) {
    .education-grid,
    .ip-grid,
    .gallery-grid,
    .gallery-grid-2,
    .gallery-grid-4,
    .gallery-grid-5,
    .gallery-grid-6 {
        grid-template-columns: 1fr;
    }
}


/* ---------- 照片画廊 ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.gallery-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-grid-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

/* 专利/软著图横竖比例不一：固定图区高度、完整contain展示，使图文对齐 */
.gallery-grid-6 .gallery-img-wrap img {
    height: 210px;
    object-fit: contain;
}

.gallery-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 444px; /* 单列宽 ≈ 质量体系卡片（约 208px），整体居中 */
    margin: 0 auto;
}

/* 同一卡片内上下叠放的两张图之间加细分隔线 */
.gallery-img-wrap + .gallery-img-wrap {
    border-top: 2px solid var(--white);
}

/* ---------- 资质范围：图分左右、文字居中上下分布 ---------- */
.qual-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: center;
}

.qual-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* C：卡片悬停轻微上浮 + 阴影加深，图片轻微放大 */
.qual-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.qual-card:hover .gallery-img-wrap img {
    transform: scale(1.04);
}

.qual-texts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

/* A：上段文字配对左卡片（左向强调线、靠左），下段配对右卡片（右向强调线、靠右） */
.qual-text {
    position: relative;
}

.qual-text--a {
    align-self: flex-start;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
}

.qual-text--b {
    align-self: flex-end;
    border-right: 3px solid var(--accent);
    padding-right: 16px;
}

.qual-text h4 {
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 10px;
    font-weight: 600;
}

.qual-text p {
    font-size: 0.9rem;
    color: var(--text-sub);
    line-height: 1.7;
}

/* B：主题色虚线 + 居中菱形节点（随主题切换自动变色） */
.qual-divider {
    position: relative;
    border-top: 2px dashed var(--accent);
    opacity: 0.55;
}

.qual-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 2px;
    /* 白色描边让菱形从虚线两侧"浮出"，更精致 */
    box-shadow: 0 0 0 5px var(--white);
}

@media (max-width: 860px) {
    .qual-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin: 0 auto;
    }
    /* 移动端单列：两段文字统一左对齐 + 左强调线，避免右向样式在窄屏别扭 */
    .qual-text--a,
    .qual-text--b {
        align-self: stretch;
        border-left: 3px solid var(--accent);
        border-right: none;
        padding-left: 16px;
        padding-right: 0;
    }
}

.gallery-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.gallery-img-wrap {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f5;
    position: relative;
}

.gallery-img-wrap::after {
    content: '\26F6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.gallery-img-wrap:hover::after {
    opacity: 1;
}

.gallery-img-wrap img {
    width: 100%;
    height: auto; /* 原比例贴边显示，不留白边 */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-img-wrap img {
    transform: scale(1.03);
}

.gallery-info {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.gallery-info h4 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
    font-weight: 600;
}

.gallery-info p {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
}


/* ---------- 横向无限滚动画廊（荣誉 / 质量体系 / 技术实力 复用） ---------- */
.scroll-marquee {
    overflow: hidden;
    /* 两端渐隐，暗示可滚动 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.scroll-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.scroll-card {
    width: 420px;
    flex-shrink: 0;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-card:hover {
    /* 方角卡片下大模糊阴影会形成明显“外框”，悬停仅保留上浮 */
    transform: translateY(-6px);
}

/* 证书/截图多为横版图：固定高度、完整展示不裁切 */
.scroll-img {
    height: 250px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
}

.scroll-img::after {
    content: '\26F6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.scroll-img:hover::after {
    opacity: 1;
}

.scroll-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.scroll-info {
    padding: 16px 20px 18px;
}

.scroll-info h4 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
    font-weight: 600;
}

.scroll-info p {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .scroll-card {
        width: 300px;
    }

    .scroll-img {
        height: 190px;
        padding: 14px;
    }
}


/* ---------- 技术实力：复用专业设备卡样式，4 列排布 ---------- */
.tech-eq-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 48px;
}

/* 卡片右上大数字在 4 列下略收，避免挤压标题 */
.tech-eq-grid .eq-count {
    font-size: 2.8rem;
    top: 22px;
    right: 18px;
}

@media (max-width: 768px) {
    .tech-eq-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ---------- 技术实力叠放展示 ---------- */
.tech-showcase-single {
    max-width: 1000px;
    margin: 0 auto;
}

.tech-stack {
    position: relative;
    height: 300px;
    margin-bottom: 24px;
}

.tech-stack-wide {
    height: 400px;
}

.tech-stack-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% + var(--offset) * 50px - 125px)) rotate(calc(var(--offset) * 3deg - 7.5deg));
    width: 210px;
    height: 295px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: all 0.35s ease;
    background: #fff;
    border: 1px solid var(--border);
}

.tech-stack-wide .tech-stack-item {
    width: 205px;
    height: 290px;
}

.tech-stack-item:nth-child(1) { z-index: 6; }
.tech-stack-item:nth-child(2) { z-index: 5; }
.tech-stack-item:nth-child(3) { z-index: 4; }
.tech-stack-item:nth-child(4) { z-index: 3; }
.tech-stack-item:nth-child(5) { z-index: 2; }
.tech-stack-item:nth-child(6) { z-index: 1; }

.tech-stack-item:hover {
    transform: translateX(calc(-50% + var(--offset) * 50px - 125px)) rotate(calc(var(--offset) * 3deg - 7.5deg)) translateY(-16px);
    z-index: 10;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.25);
}

.tech-stack-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .tech-stack-wide {
        height: 320px;
    }

    .tech-stack-wide .tech-stack-item {
        width: 130px;
        height: 185px;
    }

    .tech-stack-item {
        transform: translateX(calc(-50% + var(--offset) * 32px - 80px)) rotate(calc(var(--offset) * 3deg - 7.5deg));
    }

    .tech-stack-item:hover {
        transform: translateX(calc(-50% + var(--offset) * 32px - 80px)) rotate(calc(var(--offset) * 3deg - 7.5deg)) translateY(-12px);
    }
}


/* 支部建设：恢复专属红色图标（其余卡用默认立方体图标） */
.culture-tile .culture-icon--party { display: none; }
.culture-tile--icon-party .culture-icon--party { display: flex; }
.culture-tile--icon-party .culture-icon:not(.culture-icon--party) { display: none; }

/* 大图 hero：文案略放大 */
.culture-tile--hero .cam-cap { font-size: 1.05rem; }

/* 宽卡（支部建设）：横向排版，填满大尺寸空间 */
.culture-tile--wide.culture-tile--card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
}
.culture-tile--wide.culture-tile--card .culture-icon { margin-bottom: 0; flex: 0 0 auto; }
.culture-tile--wide.culture-tile--card .culture-text { flex: 1; }