/* ==========================================================================
   精銳建設 · 精銳 WORLD EDM — 落地頁版面修正
   2026-08-25

   刻意獨立成一支檔案，不動客戶原本的 layout_240118.css。
   載入順序必須排在 layout_240118.css 之後。
   ========================================================================== */

/*-----------------------------------------------------
  #section3（夜景全景）頂端露白

  症狀：某些視窗比例、或瀏覽器縮放跨過斷點時，夜景圖上方出現一條白帶。

  根因：這一區的「元素高度」與「背景圖高度」由兩個不相干的變數決定 ——

    元素高度   = min-height，以 vh 計（63vh／65vh@≤1920／55vh@≤1680）
                 → 跟著「視窗高度」跑
    背景圖高度 = background-size: 100% 是「寬度貼齊元素、高度依比例換算」
                 → 跟著「元素寬度」跑

  兩者只有在作者當初那台螢幕的比例下才剛好對上（1440×900 時 495px vs 501px）。
  視窗一變高、或縮放讓寬度跨過 1680／1920 斷點使 min-height 從 55vh 跳到 65vh，
  元素就比圖高。又因為 background-position 是 bottom，圖片貼齊底部，
  多出來的空白落在頂端；而這一區沒有自己的背景色，於是透出 body ——
  body 是白的（bootstrap.min.css 在 layout_240118.css 之後載入，
  它的 body{background-color:#fff} 蓋掉了原本的 #000），所以露出來是白帶。

  修法：把元素高度改成由「和背景圖同一個變數」決定 —— 寬度 × 圖片比例。
  圖片 s3-new-bg-pc.jpg 是 3840×1336，因此 aspect-ratio 就設成 3840/1336。

  ⚠️ 這個比例是寫死的，跟 images/s3-new-bg-pc.jpg 的實際尺寸綁在一起。
     換圖或改尺寸時務必同步更新這裡，否則白帶會回來。
     （只是重新壓縮、尺寸不變的話不受影響。）
  這樣兩個高度永遠相等，任何視窗比例都不會有沒被蓋到的區域，
  也不必像 background-size: cover 那樣為了填滿而把全景圖左右裁掉。

  ≤1024px 不套用：該斷點原本就改用 s3-new-bg-mb.jpg 並指定
  background-size: cover（cover 一定填滿，本來就不會露白），
  50vh 的扁長裁切是刻意的設計，不要動它。
-----------------------------------------------------*/

@supports (aspect-ratio: 1) {
    #section3 {
        /* 原本的 63vh / 65vh / 55vh 一律讓位給 aspect-ratio */
        min-height: 0 !important;
        aspect-ratio: 3840 / 1336;
    }

    /* 手機沿用原本的行為。這裡刻意用與 layout_240118.css 完全相同的
       max-width: 1024px 界線，避免縮放產生小數寬度時兩條規則之間出現空隙。 */
    @media (max-width: 1024px) {
        #section3 {
            min-height: 50vh !important;
            aspect-ratio: auto;
        }
    }
}

/* 保險，不是修法本身：
   萬一日後又有哪個比例沒被上面算準，或使用者的瀏覽器舊到不支援 aspect-ratio，
   露出來的會是黑色而不是白色 —— 夜景圖上緣本來就是暗的天空，接得起來。 */
#section3 {
    background-color: #000;
}