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

/* ------------------------------------------------------------------
   P-08／P-09／P-10 會議室主圖 + 左側深藍斜角文字區
   桌機（≥1400px）：文字區疊在主圖左側，斜邊 3px 黃線，內文用 shape-outside 沿斜邊排。
   主圖高度 = max(圖片原比例, 文字所需高度)；超過原比例時（約 1400–1660px 寬）只裁掉圖片右側邊緣，會議室螢幕保持完整。
   較窄螢幕：主圖整張等比例顯示，文字區接在圖下方。
   ------------------------------------------------------------------ */
#products .p26-hero {
    position: relative;
    overflow: hidden;
    background-color: #0A1A33;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
#products .p26-hero-media img {
    display: block;
    width: 100%;
    height: auto;
}
#products .p26-hero-panel {
    position: relative;
    background-color: #0A1A33;
    border-top: 3px solid #F5C431;
}
#products .p26-hero-inner {
    max-width: 880px;
    padding: 36px 24px 40px;
    box-sizing: border-box;
}
#products .p26-hero-shape {
    display: none;
}
#products .p26-hero-eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    color: #F5C431;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#products .p26-hero-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    margin-right: 10px;
    background-color: #F5C431;
}
#products .p26-hero-logo img {
    display: block;
    width: 225px;
    max-width: 70%;
    height: auto;
}
#products .p26-hero-text {
    margin-top: 18px;
    color: #F0F4FA;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
}
#products .p26-hero-text p {
    margin: 0 0 9px;
}
#products .p26-hero-text p:last-child {
    margin-bottom: 0;
}
#products .p26-hero-text .p26-hl {
    color: #F5C431;
    font-weight: 600;
}

@media only screen and (min-width: 751px) {
    #products .p26-hero-inner {
        padding: 44px 40px 48px;
    }
    #products .p26-hero-text {
        font-size: 17px;
    }
}

@media only screen and (min-width: 1400px) {
    #products .p26-hero {
        /* --h：主圖高度；--a／--b：斜邊上端／下端的 x；--g：內文與斜邊的距離 */
        --h: max(31.25vw, 520px);
        --a: max(29.5vw, 560px);
        --b: calc(var(--a) + var(--h) * 0.36);
        --g: 34px;
        height: var(--h);
        background-color: transparent;
    }
    #products .p26-hero-media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #products .p26-hero-media img {
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }
    #products .p26-hero-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--b) + 3px);
        height: 100%;
        border-top: 0;
        background: none;
    }
    #products .p26-hero-panel::before,
    #products .p26-hero-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #products .p26-hero-panel::before {
        background-color: rgba(10, 26, 51, 0.93);
        -webkit-clip-path: polygon(0 0, var(--a) 0, var(--b) 100%, 0 100%);
        clip-path: polygon(0 0, var(--a) 0, var(--b) 100%, 0 100%);
    }
    #products .p26-hero-panel::after {
        background-color: #F5C431;
        -webkit-clip-path: polygon(var(--a) 0, calc(var(--a) + 3px) 0, calc(var(--b) + 3px) 100%, var(--b) 100%);
        clip-path: polygon(var(--a) 0, calc(var(--a) + 3px) 0, calc(var(--b) + 3px) 100%, var(--b) 100%);
    }
    #products .p26-hero-inner {
        position: relative;
        z-index: 1;
        width: var(--b);
        max-width: none;
        height: 100%;
        padding: 30px 0 26px 40px;
    }
    /* 讓內文沿著斜邊換行：右側放一個 float，形狀是斜邊右邊的三角形 */
    #products .p26-hero-shape {
        display: block;
        float: right;
        width: calc(var(--b) - var(--a) + var(--g));
        height: 100%;
        -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--g)) 100%);
        shape-outside: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--g)) 100%);
    }
    #products .p26-hero-text {
        margin-top: 16px;
        font-size: 16px;
    }
    #products .p26-hero-text p {
        margin-bottom: 8px;
    }
}

@media only screen and (min-width: 1700px) {
    #products .p26-hero-text {
        font-size: 17px;
    }
    #products .p26-hero-logo img {
        width: 250px;
    }
}

/* 1920 以上：文字區跟著主圖等比放大，不在超寬螢幕縮成一小塊 */
@media only screen and (min-width: 1921px) {
    #products .p26-hero {
        --g: 1.8vw;
    }
    #products .p26-hero-inner {
        padding: 1.6vw 0 1.4vw 2.1vw;
    }
    #products .p26-hero-eyebrow {
        font-size: 0.7vw;
        margin-bottom: 0.5vw;
    }
    #products .p26-hero-eyebrow::before {
        width: 1.5vw;
        height: 0.11vw;
        margin-right: 0.55vw;
    }
    #products .p26-hero-logo img {
        width: 13vw;
    }
    #products .p26-hero-text {
        margin-top: 0.9vw;
        font-size: 0.89vw;
    }
    #products .p26-hero-text p {
        margin-bottom: 0.45vw;
    }
}

/* ------------------------------------------------------------------
   P-11 ONE LIGHT, ONE TEAM（沿用舊 .products-modern 藍底）
   ------------------------------------------------------------------ */
#products .products-modern {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
#products .products-modern-p {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 750px) {
    #products .products-modern {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #products .products-modern-title {
        font-size: 24px;
    }
    #products .products-modern-p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 8px;
    }
}

/* ------------------------------------------------------------------
   P-14 結尾 CTA 圖（整張連到 /contact.php）
   ------------------------------------------------------------------ */
#products .p26-cta {
    display: block;
    line-height: 0;
}
#products .p26-cta img {
    display: block;
    width: 100%;
    height: auto;
}

/* 3-in-1、0-10V 這類詞不要在連字號處斷行 */
#products .p26-nb {
    white-space: nowrap;
    font-weight: inherit; /* reset.css 把 span 設回 normal */
}