/* =========================================================
   Services IPD — 頁面專屬樣式
   - 章節標題 v2-head
   - 三管三控矩陣 v2-matrix
   - 六大階段時間軸 v2-timeline
   - 配合既有 services.css project_card 樣板
   ========================================================= */

/* 內頁 Hero 背景圖 */
.services_ipd .page-hero.hero-fullbleed::before {
    background-image: url("../images/service_ipd/service_hero1.jpg");
}

/* Intro 區塊底圖（覆寫 common.css 預設） */
.services_ipd .intro-block {
    padding: 80px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("../images/service_ipd/intro_banner.jpg") center/cover no-repeat,
        var(--color-white);
}

/* intro-quote 共用樣式已移到 common.css */

/* ============================================================
   核心價值
   ============================================================ */
.services_ipd .ipd_process_section {
    padding: 130px 0;
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
}

.services_ipd .ipd_process_section .process_layout {
    display: block;
}

.services_ipd .ipd_process_section .process_content h2 {
    font-family: var(--font-family-chinese);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-text-primary);
    border-left: 4px solid var(--primary-teal);
    padding-left: 20px;
    margin-bottom: 72px;
}

.services_ipd .ipd_process_section .process_steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.services_ipd .ipd_process_section .step_item {
    flex: 1 1 0;
    min-width: 0;
}

.services_ipd .ipd_process_section .step-x {
    flex: 0 0 auto;
    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;
}

.services_ipd .ipd_process_section .step_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: 44px 24px;
    background: rgba(235, 237, 240, 0.4);
    border: none;
    box-shadow: none;
}

.services_ipd .ipd_process_section .step_icon {
    width: 156px;
    height: 156px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services_ipd .ipd_process_section .step_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.services_ipd .ipd_process_section .step_item h3 {
    margin: 0;
    font-family: var(--font-family-chinese);
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.03em;
    /* 鎖定 1 行高度，跨卡片對齊 */
    min-height: calc(1em * 1.4);
}

.services_ipd .ipd_process_section .step_item .step_desc {
    margin: -8px 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-secondary, #666);
    text-align: center;
    max-width: 22em;
    /* 鎖定 2 行高度，避免內容長短造成跨卡片底部錯位 */
    min-height: calc(2 * 1em * 1.65);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 900px) {
    .services_ipd .ipd_process_section .process_steps {
        flex-wrap: wrap;
    }

    .services_ipd .ipd_process_section .step_item {
        flex: 0 0 calc(50% - 8px);
    }

    .services_ipd .ipd_process_section .step-x {
        display: none;
    }
}

@media (max-width: 520px) {
    .services_ipd .ipd_process_section .step_item {
        flex: 0 0 100%;
    }
}

/* ============================================================
   三管三控 — 系統圖（triple-diagram）
   ============================================================ */
.services_ipd .v2-matrix {
    padding: 130px 0;
    background: var(--color-bg-light);
}

/* 三張分類卡片（三管 × 三控分類條目） */
.services_ipd .triple-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.services_ipd .tc-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
}

.services_ipd .tc-title {
    font-family: var(--font-family-chinese);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: var(--primary-teal);
}

.services_ipd .tc-items {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: tc 0;
}

.services_ipd .tc-items > li {
    padding: 22px 28px;
    background: #fff;
    counter-increment: tc;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 22px;
}

.services_ipd .tc-items > li::before {
    content: counter(tc, decimal-leading-zero);
    font-family: var(--font-family-numeric);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-gray-2);
}

.services_ipd .tc-detail .tc-key {
    font-family: var(--font-family-chinese);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}

.services_ipd .tc-detail .tc-val {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* v2-timeline 共用元件已移到 services.css */

/* ============================================================
   作品實績 — 補充樣式（標籤、placeholder）
   ============================================================ */
.services_ipd .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;
}

.services_ipd .project_image.is-placeholder .ph-mono {
    font-family: var(--font-family-english);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: #999;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
}

.services_ipd .project_card .project-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-teal);
    font-family: var(--font-family-english);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    padding: 6px 10px;
    z-index: 2;
}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width: 1024px) {
    .services_ipd .ipd_process_section .process_content h2 {
        font-size: 2.5rem;
    }

    .services_ipd .ipd_process_section .step_item h3 {
        font-size: 1.6rem;
    }

    .services_ipd .triple-cards {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .services_ipd .tc-items > li {
        padding: 20px 24px;
    }
}

@media (max-width: 600px) {
    .services_ipd .tc-items > li {
        padding: 18px 20px;
    }

    .services_ipd .tc-title {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }
}

@media (max-width: 768px) {
    .services_ipd .ipd_process_section .process_steps {
        grid-template-columns: 1fr;
    }

    .services_ipd .ipd_process_section .step_item {
        min-height: 0;
        padding: 28px 24px;
        gap: 18px;
    }

    .services_ipd .ipd_process_section .step_icon {
        width: 88px;
        height: 88px;
        font-size: 1.6rem;
    }

    .services_ipd .ipd_process_section .step_item h3 {
        font-size: 1.35rem;
    }
}