/*
|--------------------------------------------------------------------------
| CASE STUDY (基礎背景與主文字色)
|--------------------------------------------------------------------------
*/

.case-study-page {
    background: #F4F2EE; /* 背景主色：莫蘭迪米 */
    color: #1A1A1A;      /* 一般文字：深墨灰 */
}

/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.ct-container-small {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 48px;
}

/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.case-section {
    padding: 120px 0s;
    position: relative; /* 為了讓時間軸線能精準定位 */
}

/* =====================================================
   CASE WEBSITE LINK
===================================================== */

.case-website-link {
    margin-top: 32px;
}

.case-website-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 52px;
    padding: 0 22px;

    border-radius: 999px;

    background: #1A1A1A;

    color: #FFFFFF;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.case-website-link a::after {
    content: "↗";
    font-size: 14px;
}

.case-website-link a:hover {
    background: #3C5166;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(60, 81, 102, 0.16);

    color: #FFFFFF;
}
/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.case-hero {
    padding: 100px 0 80px;
    border-bottom: 1px solid #E7E3DD;
}

.case-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 96px;
    align-items: center;
}

.case-category {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6B7280; /* 次要強調色 */
    margin-bottom: 16px;
}

.case-title {
    font-size: 44px;       /* 優化中文字級 */
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    color: #1A1A1A;
    font-weight: 700;
}

.case-subtitle {
    font-size: 22px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 24px;
    font-weight: 500;
}

.case-summary {
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    margin-bottom: 24px;
    max-width: 600px;
}

.case-duration {
    font-size: 14px;
    color: #6B7280;
}

.hero-image img {
    width: 100%;
    border-radius: 15px;
    display: block;
    border: 1px solid #A58B75; /* 框架線色 */
}

/*
|--------------------------------------------------------------------------
| SECTION HEADING
|--------------------------------------------------------------------------
*/

.section-heading {
    margin-bottom: 48px;
}

.section-heading span {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #6B7280;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: 32px;
    line-height: 1.3;
    color: #1A1A1A;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/*
|--------------------------------------------------------------------------
| CONTENT & WORKFLOW (原本流程與問題：消滅條列點)
|--------------------------------------------------------------------------
*/

.workflow-content {
    font-size: 16px;
    line-height: 1.85;
    color: #1A1A1A;
    max-width: 760px;
}

.workflow-content p:first-of-type {
    color: #444444;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 32px;
}

.workflow-content p {
    margin-bottom: 28px;
}

.workflow-content ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.workflow-content li {
    margin-bottom: 0;
    padding: 16px 24px;
    background: #F0EFEC; /* 輔助背景色 */
    border: 1px solid #E7E3DD;
    border-radius: 8px;
    color: #1A1A1A;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.workflow-content li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #3C5166; /* 強調色 */
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

/*
|--------------------------------------------------------------------------
| PROBLEM GRID
|--------------------------------------------------------------------------
*/

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.problem-card {
    background: #F0EFEC;
    border: 1px solid #E7E3DD;
    border-radius: 15px;
    padding: 36px;
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-3px);
    border-color: #3C5166;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(51, 81, 102, 0.08);
}

/*
|--------------------------------------------------------------------------
| 方案 A 核心：WORKFLOW STEP (垂直縮緊、左側留白放時間軸)
|--------------------------------------------------------------------------
*/

.workflow-step {
    display: grid;
    grid-template-columns: 1fr 520px; /* 如果有圖，維持左右並排 */
    gap: 88px;
    align-items: center;
    margin-bottom: 80px;              /* 縮小步驟間距，避免畫面太鬆散 */
    position: relative;
    padding-left: 64px;               /* 留出空間放左側線條 */
}

.workflow-step:last-child {
    margin-bottom: 0;
}

.workflow-step.no-image {
    grid-template-columns: 1fr;
}

/* 繪製貫穿步驟的時間軸軸線 */
.workflow-step::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 36px;
    width: 2px;
    height: calc(100% + 80px); /* 延伸到下一個步驟 */
    background: #E7E3DD;       /* 區塊背景線條色 */
    z-index: 1;
}

.workflow-step:last-child::before {
    display: none; /* 最後一個步驟不往下延伸 */
}

/*
|--------------------------------------------------------------------------
| STEP CONTENT (高亮燈號膠囊)
|--------------------------------------------------------------------------
*/

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background: #3C5166;        /* 強調藍灰色：作為實心高亮燈號 */
    border: 1px solid #3C5166;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF;             /* 文字反白 */
    margin-bottom: 16px;
    position: relative;
    left: -64px;                /* 移回左側，精準壓在時間軸線上 */
    z-index: 2;
    box-shadow: 0 4px 12px rgba(60, 81, 102, 0.15);
}

.workflow-step h3 {
    font-size: 26px;            /* 中文字縮小更顯精緻 */
    line-height: 1.3;
    margin-top: -8px;           /* 稍微往上調，與左側膠囊視覺水平對齊 */
    margin-bottom: 20px;
    color: #1A1A1A;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.step-description {
    font-size: 15px;
    line-height: 1.85;
    color: #1A1A1A;
}

.step-description p {
    margin-bottom: 24px;
}

.step-description ul {
    padding-left: 24px;
    margin-bottom: 24px;
}

.step-description li {
    margin-bottom: 12px;
}

/*
|--------------------------------------------------------------------------
| STEP IMAGE & ARCHITECTURE
|--------------------------------------------------------------------------
*/

.step-image img {
    width: 100%;
    border-radius: 15px;
    border: 1px solid #E7E3DD;
    display: block;
}

.architecture-image img {
    width: 100%;
    border-radius: 15px;
    border: 1px solid #E7E3DD;
    display: block;
    margin-bottom: 40px;
}

.architecture-summary {
    font-size: 16px;
    line-height: 1.85;
    color: #1A1A1A;
    max-width: 880px;
}

/*
|--------------------------------------------------------------------------
| RESULTS & KPI
|--------------------------------------------------------------------------
*/

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.result-card {
    background: #F0EFEC;
    border: 1px solid #E7E3DD;
    border-radius: 15px;
    padding: 36px;
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.result-card:hover {
    transform: translateY(-3px);
    border-color: #3C5166;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(51, 81, 102, 0.08);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.kpi-card {
    background: linear-gradient(135deg, #1A1A1A 0%, #A58B75 100%); /* 暖棕高奢漸層 */
    color: #FFFFFF;
    border-radius: 15px;
    padding: 48px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-number {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: -2px;
}

.kpi-text {
    font-size: 16px;
    line-height: 1.7;
    color: #F4F2EE;
}

/*
|--------------------------------------------------------------------------
| EMPTY FIELD AUTO HIDE & TYPOGRAPHY
|--------------------------------------------------------------------------
*/

.case-subtitle:empty, .case-summary:empty, .case-duration:empty,
.problem-card:empty, .result-card:empty, .step-description:empty,
.kpi-text:empty, .kpi-number:empty, .architecture-summary:empty {
    display: none;
}

.case-section + .case-section {
    padding-top: 0;
}

.case-study-page strong {
    color: #1A1A1A;
    font-weight: 600;
}

.case-study-page em {
    color: #3C5166;
    font-style: normal;
}

.case-study-page a {
    color: #3C5166;
    text-decoration: none;
    transition: color 0.2s ease;
}

.case-study-page a:hover {
    color: #1A1A1A;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {
    .ct-container-small { padding: 0 24px; }
    .case-section { padding: 80px 0; }
    .case-hero { padding: 80px 0 64px; }
    
    .case-hero-grid, .workflow-step, .problem-grid, .results-grid, .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .workflow-step {
        padding-left: 48px;
        margin-bottom: 60px;
        gap: 32px;
    }
    .workflow-step::before {
        left: 18px;
        height: calc(100% + 60px);
    }
    .step-number {
        left: -48px;
    }

    .case-title { font-size: 32px; }
    .case-subtitle { font-size: 20px; }
    .case-summary { font-size: 15px; }
    .section-heading h2 { font-size: 26px; }
    .workflow-step h3 { font-size: 22px; margin-top: 0; }
    .workflow-content, .step-description, .architecture-summary { font-size: 15px; }
    .workflow-content ul { grid-template-columns: 1fr; }
    .hero-image { order: -1; }
    .kpi-number { font-size: 56px; }
}