/* =========================================================
   Services 營建技術管理 — V1（一致性版）
   沿用服務系列設計語言（引用共用 common/header/footer/main/services；
   本檔僅頁面專屬樣式）：
   - 核心價值：4 欄編號卡
   - BCMIS 執行架構：3 欄角色卡
   - 3D→10D 流程：深色垂直時間軸（4 階段，每段列 D 維度）
   - 發展願景 SDI-AI：teal band
   - 作品：代表性專案 project_card
   ========================================================= */

/* 內頁 Hero 背景圖（套用共通 .page-hero.hero-fullbleed） */
.services_tech .page-hero.hero-fullbleed::before {
    background-image: url("../images/services_tech/hero_bg.jpg");
}
.services_tech .intro-block {
    background:
        linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
        url("../images/services_tech/intro_bg.jpg") center/cover no-repeat,
        var(--color-white);
}

/* === 章節標題（置中 + eyebrow） === */
.t-head { text-align: center; margin-bottom: 60px; }
.t-head .eyebrow {
    font-family: 'Chivo', sans-serif; font-size: 0.75rem; letter-spacing: 0.4em;
    color: var(--primary-teal); font-weight: 700; text-transform: uppercase; margin-bottom: 16px;
}
.t-head h2 {
    font-family: var(--font-family-chinese); font-size: 2.5rem; font-weight: 700;
    margin: 0 0 18px; line-height: 1.3; letter-spacing: 0.05em; color: var(--color-text-primary);
}
.t-head .lead {
    max-width: 800px; margin: 0 auto; font-size: var(--font-size-subheadline); line-height: 1.95; color: var(--color-text-secondary);
}
.t-head .lead .accent { color: var(--primary-teal); font-weight: 500; }
.t-head--white h2 { color: #fff; }
.t-head--white .eyebrow { color: rgba(255,255,255,0.8); }
.t-head--white .lead { color: rgba(255,255,255,0.78); }
.t-head--white .lead .accent { color: #fff; }

/* === 核心價值 — 4 欄編號卡 === */
.t-core { padding: var(--spacing-xl) 0; background: var(--color-bg-light, #f5f5f5); }
.core-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.core-card {
    background: #fff; padding: 48px 32px 52px; min-height: 380px;
    border-top: 3px solid var(--primary-teal); position: relative; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) { .core-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.06); } }
.core-card .num {
    position: absolute; left: 14px; bottom: -8px;
    font-family: 'Chivo', sans-serif; font-size: 6rem; font-weight: 900;
    color: var(--color-bg-light, #f5f5f5); line-height: 0.8; letter-spacing: -0.03em;
    margin: 0; pointer-events: none; z-index: 0;
}
.core-card h3, .core-card p { position: relative; z-index: 1; }
.core-card .core-en {
    font-family: 'Chivo', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em;
    color: var(--primary-teal); font-weight: 700; margin-bottom: 12px; text-transform: uppercase;
}
.core-card h3 {
    font-family: var(--font-family-chinese); font-size: 1.1875rem; font-weight: 700;
    margin: 0 0 14px; color: var(--color-text-primary); letter-spacing: 0.03em; line-height: 1.45;
}
.core-card p { font-size: 0.9rem; line-height: 1.85; color: var(--color-text-secondary); margin: 0; }

/* === BCMIS 執行架構 — 3 欄角色卡 === */
.t-roles { padding: var(--spacing-xl) 0; background: #fff; }
.roles-grid { display: flex; align-items: flex-start; gap: 16px; }
.role-card {
    flex: 1;
    background: transparent; padding: 32px 28px; position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.role-x {
    align-self: center;
    font-family: var(--font-family-numeric);
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--primary-teal);
    opacity: 0.45;
    line-height: 1;
    user-select: none;
}
.role-card .role-icon {
    width: auto; height: auto; background: none; border-radius: 0;
    margin-bottom: 28px;
}
.role-card .role-icon img {
    width: 130px; height: 130px; object-fit: contain; display: block; margin: 0 auto;
}
.role-card .role-en {
    font-family: 'Chivo', sans-serif; font-size: 0.62rem; letter-spacing: 0.22em;
    color: var(--primary-teal); font-weight: 700; margin-bottom: 12px;
}
.role-card h3 {
    font-family: var(--font-family-chinese); font-size: 1.375rem; font-weight: 700;
    margin: 0 0 16px; color: var(--color-text-primary); letter-spacing: 0.04em; line-height: 1.4;
}
.role-card .role-sub {
    font-size: 0.85rem; color: var(--primary-teal); margin-bottom: 18px; letter-spacing: 0.04em;
    padding-bottom: 18px; border-bottom: 1px solid var(--color-gray-2, #e5e5e5);
}
.role-card p { font-size: 0.925rem; line-height: 1.9; color: var(--color-text-secondary); margin: 0; max-width: 300px; }

/* === 共同探索 × 實踐藍圖 — 套用共通 .v2-timeline，僅覆寫背景圖
   （滾動視差由共通的 background-attachment: fixed 提供，與其他四頁一致） === */
.services_tech .v2-timeline::before {
    background-image: url("../images/services_tech/stages_bg.jpg");
}

/* === 發展願景 SDI-AI — teal band === */
.t-vision { padding: var(--spacing-xl) 0; background: #fff; }
.vision-band {
    background: var(--primary-teal); color: #fff; padding: 72px 80px; position: relative; overflow: hidden;
}
.vision-band::after {
    content: ''; position: absolute; right: -60px; bottom: -60px;
    width: 320px; height: 320px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
}
.vision-band .v-eyebrow {
    font-family: 'Chivo', sans-serif; font-size: 0.7rem; letter-spacing: 0.4em;
    font-weight: 700; opacity: 0.8; margin-bottom: 20px;
}
.vision-band h2 {
    font-family: var(--font-family-chinese); font-size: 2rem; font-weight: 700;
    margin: 0 0 24px; line-height: 1.5; letter-spacing: 0.04em; max-width: 920px; position: relative; z-index: 1;
}
.vision-band p {
    font-size: 1.0625rem; line-height: 2; color: rgba(255,255,255,0.9);
    max-width: 900px; margin: 0 0 1.4em; position: relative; z-index: 1;
}
.vision-band p:last-child { margin-bottom: 0; }

/* === 作品（代表性專案 project_card） === */
.project_image.is-placeholder {
    background: repeating-linear-gradient(45deg, #e8e8e8 0, #e8e8e8 12px, #f0f0f0 12px, #f0f0f0 24px);
    display: flex; align-items: center; justify-content: center;
}
.project_image.is-placeholder .ph-mono {
    font-family: 'Chivo', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em;
    color: #999; font-weight: 500; background: rgba(255,255,255,0.85); padding: 6px 12px;
}
.project_card .project-tag {
    position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.95); color: var(--primary-teal);
    font-family: 'Chivo', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em;
    padding: 6px 10px; z-index: 2;
}

/* === RWD === */
@media (max-width: 1200px) { .core-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
    .roles-grid { flex-direction: column; align-items: stretch; }
    .role-x { align-self: center; margin: 4px 0; }
    .vision-band { padding: 56px 40px; }
}
@media (max-width: 768px) {
    .t-head h2 { font-size: 1.875rem; }
    .core-grid { grid-template-columns: 1fr; }
    .vision-band { padding: 40px 28px; }
    .vision-band h2 { font-size: 1.5rem; }
    .vision-band p { font-size: var(--font-size-body); }
}