/* =========================================================
   Services Interior 室內設計 — V1
   - 核心價值：兩欄 split + 巨型半透明編號（int-core）
   - 執行架構：3 欄角色卡（int-roles）
   - 四大裝修階段：共用 .v2-timeline（僅覆寫底圖）
   - 發展願景：大字編輯式置中（int-vision）
   - Hero / 區塊標題 / 作品：套用 common.css 共通樣式
   ========================================================= */

/* 內頁 Hero 背景圖（套用共通 .page-hero.hero-fullbleed） */
.services_interior .page-hero.hero-fullbleed::before {
    background-image: url("../images/services_interior/hero_bg.jpg");
}

/* Intro 區塊底圖 */
.services_interior .intro-block {
    padding: 80px 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
        url("../images/services_interior/intro_bg.jpg") center/cover no-repeat,
        var(--color-white);
}

/* 四大裝修階段時間軸底圖（套用共通 .v2-timeline，僅覆寫背景圖） */
.services_interior .v2-timeline::before {
    background-image: url("../images/services_interior/framework_bg.jpg");
}

/* === 執行架構 — 半透明漸層泡泡（恆交疊，內含 icon/標題/內文） === */
/* --b：泡泡直徑（隨螢幕流動，有上下限）。交疊量固定為直徑的 12%，
   故縮放時兩圓始終相交、且交疊比例不變（不會越縮越疊）；
   文案寬度 = 直徑 - 112px，確保交疊區（位於圓左右緣）永遠不會壓到置中文字。 */
.int-roles { padding: 110px 0; background: #fff; --b: clamp(330px, 29vw, 430px); }
.int-roles .bubble-flow { display: flex; justify-content: center; align-items: center; }
.int-roles .bubble-col {
    position: relative; width: var(--b); min-height: var(--b);
    display: flex; align-items: center; justify-content: center;
}
.int-roles .bubble-col + .bubble-col { margin-left: calc(var(--b) * -0.12); }
/* 企業色 teal (#016D82 = 1,109,130) 低透明度柔光圓 */
.int-roles .bubble {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: var(--b); height: var(--b); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(1,109,130,0.015) 42%, rgba(1,109,130,0.12) 100%);
    border: 1px solid rgba(1,109,130,0.14);
}
.int-roles .bubble-content {
    position: relative; z-index: 1; width: min(258px, calc(var(--b) - 132px)); text-align: center;
}
.int-roles .bubble-content .role-icon { margin-bottom: 12px; }
.int-roles .bubble-content .role-icon img {
    width: 104px; height: 104px; object-fit: contain; display: block; margin: 0 auto;
}
.int-roles .bubble-content h3 {
    font-family: var(--font-family-chinese); font-size: 1.25rem; font-weight: 700;
    margin: 0 0 10px; letter-spacing: 0.04em; line-height: 1.4; color: var(--color-text-primary);
}
.int-roles .bubble-content p {
    font-size: 0.875rem; line-height: 1.75; color: var(--color-text-secondary); margin: 0;
}

/* === 核心價值 — 巨型編號（被直線裁切）+ 右側標題/內文 === */
/* --numfs：編號字級。num-cell 可見寬度 = 0.34×字級，故裁切比例固定，
   桌機與手機（含字級觸頂/觸底時）裁切幅度一致。 */
.int-core { padding: 130px 0; background: var(--color-bg-light, #f5f5f5); --numfs: clamp(7rem, 9.5vw, 11.5rem); }
.int-core .core-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 80px; }
.int-core .core-box {
    display: grid; grid-template-columns: calc(var(--numfs) * 0.48 + 8px) 1px 1fr;
    align-items: stretch; min-height: 220px;
}
/* 左半：巨型編號，右緣被直線裁切（overflow 隱藏溢出部分，裁切量與字級成比例） */
.int-core .num-cell { position: relative; overflow: hidden; display: flex; align-items: center; padding-left: 8px; }
.int-core .num-cell .num {
    font-family: 'Chivo', sans-serif; font-weight: 700;
    font-size: var(--numfs); line-height: 1;
    letter-spacing: -0.02em; color: var(--primary-teal); white-space: nowrap;
}
/* 中間：直線（上下內縮較短）用企業色 */
.int-core .core-line { width: 1px; background: var(--primary-teal); margin: 26px 0; }
/* 右半：標題 + 內文 */
.int-core .core-content { align-self: center; padding-left: 44px; }
.int-core .core-content h3 {
    font-family: var(--font-family-chinese); font-size: 1.375rem; font-weight: 700;
    margin: 0 0 20px; letter-spacing: 0.12em; line-height: 1.4; color: var(--color-text-primary);
}
.int-core .core-content p { font-size: 0.95rem; line-height: 1.95; color: var(--color-text-secondary); margin: 0; }

/* === 發展願景 — 大字編輯式置中 === */
.int-vision { padding: calc(var(--spacing-xl) * 1.3) 0; background: #fff; text-align: center; }
.int-vision .v-eyebrow {
    font-family: 'Chivo', sans-serif;
    font-size: 0.7rem; letter-spacing: 0.4em;
    color: var(--primary-teal); font-weight: 700; margin-bottom: 24px;
}
.int-vision .v-divider { width: 48px; height: 3px; background: var(--primary-teal); margin: 0 auto 32px; }
.int-vision h2 {
    font-family: var(--font-family-chinese);
    font-size: 2.5rem; font-weight: 700; margin: 0 auto 32px;
    line-height: 1.45; letter-spacing: 0.04em; max-width: 900px;
    color: var(--color-text-primary);
}
.int-vision h2 .hl { color: var(--primary-teal); }
.int-vision p {
    font-size: 1.0625rem; line-height: 2.05; color: var(--color-text-secondary);
    max-width: 820px; margin: 0 auto;
}

/* === 作品（代表性專案 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;
}

/* === RWD === */
@media (max-width: 1024px) {
    .int-core .core-grid2 { grid-template-columns: 1fr; }
}
/* 三圓並排在約 900px 以下會超出版心，改直向堆疊；
   縮小直徑、icon 與文案寬度，讓文字完整落在圓內，僅輕微相交、不互相遮擋 */
@media (max-width: 900px) {
    .int-roles { --b: min(90vw, 370px); }
    .int-roles .bubble-flow { flex-direction: column; }
    .int-roles .bubble-col + .bubble-col { margin-left: 0; margin-top: calc(var(--b) * -0.06); }
    .int-roles .bubble-content { width: min(250px, 74vw); }
    .int-roles .bubble-content .role-icon img { width: 100px; height: 100px; }
}
@media (max-width: 768px) {
    .int-roles { padding: 80px 0; }
    .int-core { padding: 80px 0; }
    .int-core .core-box { padding: 32px 28px; }
    .int-vision h2 { font-size: 1.625rem; }
    .int-vision p { font-size: var(--font-size-body); }
}