/* 2026-10 改版（issue #1）— home。只放這次新增／覆蓋的樣式 */

/* ---------- H-02 中段：深藍 PCB 底圖＋左側文字 ----------
   桌機：區塊高度跟底圖同比例（1920x560），整張圖不裁切；下緣用 clip-path 斜切。
   900px 以下：文字放在跟底圖左側同色的深藍區，底圖整張接在下面（上緣漸層融合）。
   注意：客戶給的底圖 home-middle-navy-pcb.jpg 左側已經「印好」同一段文字（x 160–770 / 1920）。
   需求單要求用網頁文字，所以疊一層 --hm-mask（左 44% 純深藍 #0a1a33，跟底圖該區顏色完全相同）把圖上的字蓋掉。
   之後若客戶補上無字版底圖，直接換檔並拿掉 --hm-mask 這一層即可。 */
#index .home-middle {
    --hm-navy: #0a1a33;
    --hm-mask: linear-gradient(90deg, #0a1a33 0, #0a1a33 44%, rgba(10, 26, 51, 0) 47%);
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 560;
    background:
        var(--hm-mask) center / 100% 100% no-repeat,
        url(../../img/2026/home-middle-navy-pcb.jpg) center / cover no-repeat,
        var(--hm-navy);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
    display: flex;
    align-items: center;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
    overflow: hidden;
}
#index .home-middle-text {
    box-sizing: border-box;
    width: 56%;
    padding: 0 0 6% 8.33%;   /* 左距 = 參考圖 160/1920；下方留給斜切 */
}
#index .home-middle-eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 clamp(14px, 1.6vw, 30px);
    color: #F5C431;
    font-size: clamp(12px, 1.12vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
#index .home-middle-eyebrow::before {
    content: '';
    flex: none;
    width: 2.2em;
    height: 3px;
    margin-right: 1.1em;
    background: #F5C431;
}
#index .home-middle-title {
    margin: 0;
    font-size: clamp(28px, 3.33vw, 64px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
#index .home-middle-title1,
#index .home-middle-title2 {
    display: block;
    font-weight: 800;   /* reset.css 把 span 設成 normal，要在 span 上再指定一次 */
}
#index .home-middle-title1 { color: #F0F4FA; }
#index .home-middle-title2 { color: #F5C431; }
#index .home-middle-sub {
    max-width: 22em;
    margin: clamp(14px, 1.8vw, 34px) 0 0;
    color: #A5B4CD;
    font-size: clamp(15px, 1.39vw, 26px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    #index .home-middle {
        aspect-ratio: auto;
        display: block;
        /* 上：深藍文字區；下：整張底圖（100% 寬、等比例），上緣漸層接到深藍 */
        background:
            linear-gradient(to bottom, var(--hm-navy) 0, rgba(10, 26, 51, 0) 18vw) left bottom / 100% 29.17vw no-repeat,
            var(--hm-mask) left bottom / 100% 29.17vw no-repeat,
            url(../../img/2026/home-middle-navy-pcb.jpg) left bottom / 100% 29.17vw no-repeat,
            var(--hm-navy);
        padding-bottom: 22vw;   /* 底圖高 29.17vw，文字區與底圖重疊一點點（左側本來就是深藍） */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
    }
    #index .home-middle-text {
        width: auto;
        padding: 48px 24px 0;
    }
    #index .home-middle-sub {
        max-width: 26em;
    }
}

/* ---------- H-03-1 三張 Service 小圖：拿掉底部白條 ----------
   標題 h2 已從 index.php 拿掉；卡片高度 = 圖片高度。
   圖片 1200x1000，用 6:5 比例取代各斷點寫死的高度，手機也不會被裁切。 */
#index .index-service-list {
    vertical-align: top;
}
#index .index-service-img {
    position: relative;
    height: auto;
    aspect-ratio: 6 / 5;
}
#index .index-service-img span {
    position: absolute;
    top: 0;
    left: 0;
}
/* 手機版卡片直排：原本卡片之間靠白條隔開，白條拿掉後補回間距，免得三張圖黏在一起 */
@media (max-width: 550px) {   /* rwd.css 在 550px 以下改成直排 */
    #index .index-service-list + .index-service-list {
        margin-top: 30px;
    }
}