/*!
 * turing-about.css — 關於中創頁樣式
 *
 * 復用 turing 設計系統（與 turing-solution.css / turing-products.css 對齊）：
 *   - 設計稿寬度 1920px (desktop) / 540px (mobile)，1rem = 192px (由 turing.js 設置)
 *   - 配色：bg #101014 / card #222228 / text #eeeef2 / sub #b2b2c9
 *   - 主色：#1664ff / #2882ff / #50a7ff / 邊框 #292932 / 圓角 0.041667rem
 *
 * 頁面容器、麵包屑、頁面標題復用 turing-products.css 的同名類
 * （.products-page / .breadcrumb / .page-head / .page-title），
 * 此處僅定義關於頁專屬區塊與卡片。
 */

/* ============ 頁面容器（對齊 .solution-page / .products-page）============ */
.about-page {
    position: relative;
    min-height: 100vh;
    padding: 0.416667rem 1.51042rem 0.520833rem;
    background: #101014;
}
@media (max-width: 1900px) { .about-page { padding: 0.416667rem 1.015625rem 0.520833rem; } }
@media (max-width: 1700px) { .about-page { padding: 0.416667rem 0.8125rem 0.520833rem; } }
@media (max-width: 1630px) { .about-page { padding: 0.416667rem 0.3125rem 0.520833rem; } }
@media (max-width: 1240px) { .about-page { padding: 0.416667rem 0.208333rem 0.520833rem; } }
@media (max-width: 768px)  { .about-page { padding: 0.30rem 0.16rem 0.40rem; } }

.about-wrap {
    position: relative;
    z-index: 1;
    max-width: 16.666667rem;   /* 3200px — 限制正文寬度，保證可讀性 */
    margin: 0 auto;
}

/* 背景圖層（與產品/方案頁一致） */
.about-page .bg-body {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 2.157328rem;
    z-index: 0;
    pointer-events: none;
}

/*
 * 麵包屑 / 頁面標題：復用 turing-products.css 的 .breadcrumb / .page-head /
 * .page-title（選擇器不帶 scoped 屬性，可直接命中本頁 DOM）。
 * 若某些規則因加載順序未覆蓋到，此處補一份等價定義以保證一致。
 */
.about-page .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #b2b2c9;
    font-size: 0.072917rem;
    line-height: 0.125rem;
    margin-bottom: 0.15625rem;
}
.about-page .breadcrumb a {
    color: #b2b2c9;
    text-decoration: none;
    transition: color 0.2s;
}
.about-page .breadcrumb a:hover { color: #50a7ff; }
.about-page .breadcrumb .sep {
    margin: 0 0.041667rem;
    color: #4a4a55;
}
.about-page .breadcrumb .current { color: #eeeef2; }

.about-page .page-head { margin-bottom: 0.260417rem; }
.about-page .page-title {
    color: #eeeef2;
    font-size: 0.1875rem;
    font-weight: 500;
    line-height: 0.1875rem;
    margin: 0 0 0.0625rem;
}

/* ============ 通用區塊標題 ============ */
.about-page .section-title {
    position: relative;
    color: #eeeef2;
    font-size: 0.145833rem;
    font-weight: 500;
    line-height: 0.145833rem;
    margin: 0 0 0.15625rem;
    padding-left: 0.072917rem;
}
.about-page .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.015625rem;          /* 3px */
    height: 0.104167rem;         /* 20px */
    background: #2882ff;
    border-radius: 0.015625rem;
}

/* ============ Hero：算力底座主視覺 + 文化導語疊加 ============ */
.about-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 0.041667rem;
    overflow: hidden;
    border: 0.005208rem solid #292932;
    margin-bottom: 0.3125rem;
    background: #181820;
}
.about-hero .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* 漸變遮罩：左下深、右上透，保證白字可讀 */
.about-hero .hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg,
        rgba(10, 12, 20, 0.92) 0%,
        rgba(10, 12, 20, 0.78) 38%,
        rgba(10, 12, 20, 0.30) 70%,
        rgba(10, 12, 20, 0.10) 100%);
    pointer-events: none;
}
.about-hero .hero-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    max-width: 56%;
    padding: 0.208333rem 0.260417rem;
}
.about-hero .hero-lead {
    color: #ffffff;
    font-size: 0.125rem;            /* 24px */
    font-weight: 600;
    line-height: 0.166667rem;
    margin: 0 0 0.0625rem;
    letter-spacing: 0.005em;
}
.about-hero .hero-detail {
    color: rgba(238, 238, 242, 0.82);
    font-size: 0.083333rem;         /* 16px */
    line-height: 0.135417rem;
    margin: 0;
}

/* ============ 使命 / 願景（圖文卡）============ */
.about-direction { margin-bottom: 0.3125rem; }

.direction-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.125rem;
    align-items: start;          /* 卡片按各自內容高度，避免文字區被拉伸產生大段留白 */
}

.direction-card {
    display: flex;
    flex-direction: column;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.direction-card:hover {
    transform: translateY(-0.020833rem);
    border-color: #2882ff;
    box-shadow: 0 0.052083rem 0.15625rem rgba(0, 0, 0, 0.4);
}
.direction-card .direction-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #181820;
    overflow: hidden;
}
.direction-card .direction-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.direction-card:hover .direction-img { transform: scale(1.04); }
.direction-card .direction-body {
    padding: 0.135417rem 0.125rem 0.15625rem;
    border-top: 0.005208rem solid #292932;
    position: relative;
    flex: 0 0 auto;              /* 文字區只佔內容高度，不被 flex 拉伸，消除下方大段留白 */
    font-size: 0.083333rem;      /* 顯式重置：避免繼承 html 的 1rem(192px) 字號撐高行盒 */
    line-height: 0.135417rem;    /* 26px，避免 line-height:normal 在大字號下產生巨型行盒 */
}
.direction-card .direction-body::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 0.015625rem;
    height: 100%;
    background: linear-gradient(180deg, #1664ff 0%, #2882ff 100%);
}
.direction-card .card-label {
    display: inline-block;
    color: #50a7ff;
    font-size: 0.088542rem;       /* 17px */
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.052083rem;
}
.direction-card .card-desc {
    color: #c9c9db;
    font-size: 0.091146rem;       /* 17.5px */
    line-height: 0.151042rem;     /* 29px */
    margin: 0;
    text-align: justify;
}

/* ============ 核心價值（蛇形時間線）============ */
.about-values { margin-bottom: 0.208333rem; }

.values-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.083333rem;
    margin-bottom: 0.208333rem;
}
.values-head .section-title { margin-bottom: 0; }
.values-head .values-summary {
    color: #b2b2c9;
    font-size: 0.083333rem;       /* 16px */
    line-height: 0.125rem;
    margin: 0;
}

/* 時間線容器：左右各 45% 卡片區，中間 10% 蛇形線區 */
.timeline {
    position: relative;
    padding: 0.052083rem 0;       /* 頂底留白讓首尾節點完整 */
}

/* 蛇形連接線：絕對居中，佔滿高度 */
.timeline-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.625rem;              /* 120px 寬的蛇形帶 */
    height: 100%;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}
.timeline-line path {
    fill: none;
    stroke: #2882ff;
    stroke-width: 2;              /* viewBox 100 單位，縮放後約 2.4px 實線 */
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    filter: drop-shadow(0 0 0.005208rem rgba(80, 167, 255, 0.8));
}

/* 每個節點行 */
.tl-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.625rem 1fr;
    align-items: center;
    margin-bottom: 0.145833rem;
}
.tl-item:last-child { margin-bottom: 0; }

/* 卡片：左節點在左列，右節點在右列 */
.tl-left .tl-card  { grid-column: 1; text-align: right; }
.tl-left .tl-marker{ grid-column: 2; }
.tl-right .tl-card { grid-column: 3; text-align: left; }
.tl-right .tl-marker{ grid-column: 2; }

.tl-card {
    display: inline-block;        /* 只佔內容寬，靠外側 */
    width: 100%;
    max-width: 4.166667rem;       /* 800px */
    box-sizing: border-box;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    padding: 0.114583rem 0.135417rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tl-left  .tl-card { margin-left: auto; }   /* 左節點卡片靠左列右側 */
.tl-right .tl-card { margin-right: auto; }  /* 右節點卡片靠右列左側 */
.tl-card:hover {
    transform: translateY(-0.020833rem);
    border-color: #2882ff;
    box-shadow: 0 0.052083rem 0.15625rem rgba(0, 0, 0, 0.4);
}
.tl-title {
    color: #eeeef2;
    font-size: 0.09375rem;        /* 18px */
    font-weight: 600;
    line-height: 0.125rem;
    margin: 0 0 0.041667rem;
}
.tl-desc {
    color: #b2b2c9;
    font-size: 0.072917rem;       /* 14px */
    line-height: 0.114583rem;
    margin: 0;
}

/* 節點標記：圓形藍光點，內含序號，落在中軸蛇形線上 */
.tl-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.114583rem;           /* 22px */
    height: 0.114583rem;
    margin: 0 auto;
    border-radius: 50%;
    background: #1664ff;
    box-shadow: 0 0 0 0.010417rem rgba(22, 100, 255, 0.35),
                0 0 0.052083rem 0.010417rem rgba(40, 130, 255, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tl-marker::after {               /* 外圈光暈 */
    content: "";
    position: absolute;
    inset: -0.03125rem;
    border-radius: 50%;
    border: 0.005208rem solid rgba(80, 167, 255, 0.4);
}
.tl-marker span {
    color: #ffffff;
    font-size: 0.057292rem;       /* 11px */
    font-weight: 700;
    line-height: 1;
    font-family: "Space Mono", "PingFang HK", monospace;
}
.tl-item:hover .tl-marker {
    transform: scale(1.12);
    box-shadow: 0 0 0 0.010417rem rgba(22, 100, 255, 0.5),
                0 0 0.078125rem 0.015625rem rgba(40, 130, 255, 0.7);
}

/* ============ 響應式 ============ */
@media (max-width: 1024px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .about-page .page-title { font-size: 0.20rem; }
    /* hero：移動端更高、文字佔滿寬度 */
    .about-hero { aspect-ratio: 16 / 11; margin-bottom: 0.24rem; }
    .about-hero .hero-veil {
        background: linear-gradient(180deg,
            rgba(10, 12, 20, 0.15) 0%,
            rgba(10, 12, 20, 0.55) 45%,
            rgba(10, 12, 20, 0.92) 100%);
    }
    .about-hero .hero-copy { max-width: 100%; padding: 0.14rem 0.16rem; }
    .about-hero .hero-lead { font-size: 0.12rem; line-height: 0.18rem; margin-bottom: 0.05rem; }
    .about-hero .hero-detail { font-size: 0.085rem; line-height: 0.15rem; }
    .about-page .section-title { font-size: 0.15rem; line-height: 0.15rem; }
    .direction-grid { grid-template-columns: 1fr; gap: 0.14rem; }
    .direction-card .direction-body { padding: 0.13rem 0.14rem 0.15rem; }
    .direction-card .card-label { font-size: 0.09rem; margin-bottom: 0.05rem; }
    .direction-card .card-desc { font-size: 0.092rem; line-height: 0.16rem; }
    .values-head { flex-direction: column; gap: 0.04rem; }
    .values-head .values-summary { font-size: 0.085rem; }
    /* 蛇形時間線：移動端改為左線豎排，卡片全部右側單列堆疊 */
    .timeline { padding-left: 0.08rem; }
    .timeline-line {
        left: 0.057292rem;             /* 節點圓心位置 ~11px */
        transform: none;
        width: 0.005208rem;            /* 細豎線 */
    }
    .timeline-line path { stroke: #2882ff; opacity: 0.4; }
    .tl-item {
        grid-template-columns: 0.114583rem 1fr;
        column-gap: 0.10rem;
        margin-bottom: 0.14rem;
        align-items: flex-start;
    }
    .tl-left .tl-card,
    .tl-right .tl-card {
        grid-column: 2;
        text-align: left;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .tl-left .tl-marker,
    .tl-right .tl-marker {
        grid-column: 1;
        margin: 0.015625rem 0 0;
    }
    .tl-card { padding: 0.10rem 0.12rem; }
    .tl-title { font-size: 0.10rem; margin-bottom: 0.03rem; }
    .tl-desc { font-size: 0.082rem; line-height: 0.14rem; }
    .about-direction, .about-values { margin-bottom: 0.24rem; }
}