@charset "utf-8";
/* ==========================================================================
   首頁專屬樣式（css_index.css）

   只有 index.php 會載入這一支，內頁不要掛。
   內容是封面式首頁的版型：滿版形象圖背景、頁首的浮動定位、
   左側的 logo 與三行標語。

   ★ 為什麼選單／登入／語言切換不在這裡：
     那三個元件（.home-cover-nav / .home-cover-login / .home-cover-lang）
     內頁的頁首也在用（include/header.php 一份檔案同時服務兩種版型），
     搬過來的話內頁的選單會沒有樣式。它們留在 css_main.css。
     命名上有點混淆——叫 home-cover-* 卻是共用元件——那是既有命名，
     日後要正名的話記得三處一起改：header.php、css_main.css、about.php。

   載入順序：css_main.css 先、css_index.css 後，
   所以這裡的規則可以覆寫 css_main 的同名選擇器（例如 #header 的底色）。

   色票（取自 images/home-logo.png 與 images/banner.jpg）：
     #0085D4  品牌主藍      #5A5858  主文字深灰
     #A1D9F0  形象圖淺藍    #EAF6FC  形象圖載入前的底色
   ========================================================================== */

/* ==========================================================================
   首頁封面（home-cover）
   ——整張形象圖鋪滿視窗，logo 與標語疊在圖上，右上角是選單。
   這是設計稿指定給首頁的專屬版型，內頁另有一套（.container / .inner-wrap）。

   色票直接取自素材，不是憑印象配的：
     #0085D4  品牌主藍（images/home-logo.png 的 TECHNOLOGY 字樣）
     #5A5858  主文字深灰（同一張圖的 Bayard 字樣）
     #A1D9F0  形象圖左側漸層的淺藍
   ========================================================================== */

.home-cover-body {
    margin: 0;
    /* 封面頁不捲動；手機版內容可能較高，交給 .home-cover 的 min-height 處理 */
    overflow-x: hidden;
}

.home-cover {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #EAF6FC;   /* 形象圖載入前的底色，避免先閃一片白 */
}

/* ---------- 背景形象圖 ---------- */

.home-cover-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-cover-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    /* 圖比視窗寬時裁左右、窄時裁上下，永遠鋪滿不變形 */
    object-fit: cover;
    object-position: center center;
}

/* ---------- 右上角：主選單 + 登入 + 語言 ---------- */

/* #header 在公版原本帶著深色漸層背景（給一般內頁的頁首用），封面式首頁要讓形象圖
   整片透出來，所以這裡把背景清掉。選擇器加 #header 前綴是為了蓋過公版那條規則的
   優先級——不用 !important，免得之後內頁要覆寫時卡住。 */
#header.home-cover-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: none;
    box-shadow: none;
    border: 0;
}

.home-cover-header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    padding: 3.2vh 5vw 0;
    box-sizing: border-box;
}

/* ---------- 左側：logo + 標語 ---------- */

.home-cover-main {
    position: relative;
    z-index: 10;
    height: 100%;
}

.home-cover-brand {
    position: absolute;
    top: 42%;
    left: 6.5vw;
    transform: translateY(-50%);
    max-width: 46vw;
}

.home-cover-logo {
    margin: 0 0 6.5vh;
    line-height: 1;
}

.home-cover-logo img {
    display: block;
    width: min(34vw, 500px);
    height: auto;
}

/* 三段文字同一縮排：對齊 logo 圓標右側的 Bayard 字標 */
.home-cover-title,
.home-cover-slogan {
    padding-left: clamp(1.5rem, 4.6vw, 4.75rem);
}

.home-cover-title {
    margin: 0 0 3.2vh;
    color: #0085D4;
    font-size: clamp(1.625rem, 2.9vw, 3.125rem);
    /* 中文版這裡是 0.18em（設計稿把字距拉開），英文版不跟：
       英文是比例字型，字距一拉開反而讓單字內部散掉、單字之間的界線變模糊 */
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
}

.home-cover-slogan {
    margin: 0 0 1.1vh;
    color: #5A5858;
    font-size: clamp(1rem, 1.9vw, 1.9375rem);
    letter-spacing: 0;
    line-height: 1.55;
    white-space: nowrap;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {
.home-cover {
        /* 手機版形象圖是直式的，固定 100vh 會把產品裁掉，改成跟著內容長 */
        height: auto;
        min-height: 100vh;
    }

.home-cover-header-inner {
        justify-content: flex-end;
        gap: 18px;
        padding: 2.4vh 5vw 0;
    }

.home-cover-main {
        height: auto;
    }

.home-cover-brand {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: none;
        padding: 16vh 8vw 12vh;
    }

.home-cover-logo {
        margin-bottom: 4.5vh;
    }

.home-cover-logo img {
        width: min(62vw, 320px);
    }

.home-cover-title,
    .home-cover-slogan {
        padding-left: clamp(0.875rem, 4vw, 1.625rem);
        /* 窄畫面硬要一行會溢出，允許換行 */
        white-space: normal;
        /* 手機版形象圖是直式的，產品照壓在右半邊。中文標語短、碰不到，
           英文長一截會整行疊在燈上，所以限寬讓它提前換行 */
        max-width: 55vw;
    }

.home-cover-title {
        margin-bottom: 2.4vh;
        font-size: clamp(1.375rem, 5.4vw, 2rem);
        letter-spacing: 0;
    }

.home-cover-slogan {
        font-size: clamp(0.9375rem, 3.8vw, 1.25rem);
        /* 兩句標語各自換成兩行後，句與句的間距要大於行內行距，否則四行會糊成一團 */
        margin-bottom: 1.9vh;
    }
}