/* ==========================================================================
   About Us 頁樣式
   --------------------------------------------------------------------------
   全檔的 .cf-site .ab-page 前綴改成 .page-about .ab-page。

   .ab-page 保留不動 —— 它掛在 main 上，是設計代幣（CSS 變數）的掛載點，
   轉檔後仍然存在。

   .page-about 由 functions.php 的 body_class 掛在 body 上。

   圖片路徑 ../img/ 在主題裡剛好正確（CSS 與 img 同層）。
   ========================================================================== */

@charset "UTF-8";

/* ==========================================================================
   style.css —— About Us
   規格來源：使用者 2026-09-22 從線上實測的「Coolify 網站切版規格」＋ 2026-09-23 的設計稿
   --------------------------------------------------------------------------
   ★★ 這一頁走 WordPress 子主題那一套，跟 Solution／Te-HoloOrb 那種
      「獨立完整頁」是相反的，別套錯：

      - 只寫這一頁專屬的樣式
      - 不寫 :root、不寫 reset、不重新定義 .container / .btn（主題已經有了）
      - .container / .btn / .btn--pill 直接拿來用，只是不要改它們的 CSS
      - class 前綴用 ab-，BEM 寫成 ab-區塊__元素--狀態
      - 斷點只有一個方向：@media (max-width: 900px)（桌機優先）
      - 圖片路徑寫 img/檔名.png，轉檔時會換成 get_theme_file_uri()

   ★ 每條選擇器都加 .page-about .ab-page 兩層前綴。不是龜毛 ——
     主題既有規則多半是 .cf-site + 一個 class（2 個 class），
     我們寫 3 個 class 才穩穩蓋得過去，不用去猜誰寫在前面誰寫在後面。

   ★ 代幣一律寫成 var(--代幣, 備援值)。線上實測 --t-hero / --t-badge
     根本不存在，直接寫 var(--t-hero) 會「安靜失效」、字級整個掉回預設，
     而且畫面上不會有任何錯誤訊息。帶備援值的話：主題有就跟上、沒有也不會壞。

   --------------------------------------------------------------------------
   1. 這一頁的變數與共用小東西
   2. 區塊樣式
      2-1. OUR STORY
      2-2. WHAT DRIVES US
      2-3. HISTORY（輪播＋時間軸）
      2-4. LOOKING AHEAD
   3. RWD（max-width: 900px）
   編號跟 index.html 的區塊註解對得上。
   ========================================================================== */


/* ==========================================================================
   1. 這一頁的變數與共用小東西

   變數掛在 .ab-page 上而不是 :root —— 規格明文不准寫 :root，而且掛在這裡
   也不會外漏去影響主題其他頁面。
   ========================================================================== */
.page-about .ab-page {
  /* ← 區塊上下留白。四個區塊共用這一顆，要整頁鬆一點／緊一點改這裡就好。
       clamp(最小, 隨螢幕縮放, 最大)：手機 64px → 桌機最多 120px */
  --ab-pad: clamp(64px, 8vw, 120px);

  /* ← 兩欄版面中間的距離 */
  --ab-gap: var(--space-6, 3rem);

  --ab-blue: #1a73e8;              /* ← 藍色小標的顏色 */
  --ab-radius: 20px;               /* ← 大圖圓角 */
  --ab-placeholder: #f2f2f2;       /* 圖還沒放進來時圖框的底色 */

  --ab-history-gap: var(--space-4, 1.5rem);  /* ← 輪播卡片之間的距離 */
  --ab-history-per-view: 3;                  /* ← 一次顯示幾張（JS 會自己跟著算） */
  --ab-history-nav-size: 36px;               /* ← 箭頭直徑 */
  --ab-history-nav-gap: 24px;                /* ← 箭頭離卡片多遠 */
}

/* 藍色小標。
   ★ max-width: none 不能省 —— 主題有一條 p { max-width: 70ch }（約 623px），
     小標是 <p> 就會吃到它，在置中的區塊裡會變成「一塊 623px 寬的東西縮在左邊」，
     整段看起來偏左三百多 px。這是這個主題最容易中的陷阱，而且很難聯想。 */
.page-about .ab-page .ab-eyebrow {
  max-width: none;
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--t-small, 16px);
  font-weight: 700;
  color: var(--ab-blue);
}

/* 區塊大標。
   ★ 不要直接寫 font-size: var(--t-h) —— 線上的 --t-h 是 50px，但它在主題裡
     是當成 clamp 的「上限」在用的。直接套會得到固定 50px，手機上會爆版。 */
.page-about .ab-page .ab-story__title,
.page-about .ab-page .ab-drives__title,
.page-about .ab-page .ab-history__title,
.page-about .ab-page .ab-ahead__title {
  margin: 0 0 var(--space-4, 1.5rem);
  font-size: clamp(34px, 8vw, var(--t-h, 50px));
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text, #222);
}

/* 內文的共同外觀。只作用在這一頁自己的區塊裡，不會外漏。 */
.page-about .ab-page .ab-story__body p,
.page-about .ab-page .ab-drives__body p {
  max-width: none;                 /* 欄寬已經決定行長，不要再被 70ch 綁一次 */
  margin: 0 0 var(--space-4, 1.5rem);
  font-size: var(--t-body, 18px);
  line-height: 1.7;
  color: var(--color-text-muted, #666);
}

.page-about .ab-page .ab-story__body p:last-child,
.page-about .ab-page .ab-drives__body p:last-child {
  margin-bottom: 0;
}

/* 圖框共同外觀：先用淺灰底占位，圖載入後蓋掉。
   ★ margin: 0 不能省，<figure> 的瀏覽器預設有左右 40px 的外距。 */
.page-about .ab-page .ab-story__media,
.page-about .ab-page .ab-drives__media,
.page-about .ab-page .ab-history__media {
  margin: 0;
  overflow: hidden;
  background-color: var(--ab-placeholder);
}

.page-about .ab-page .ab-story__media img,
.page-about .ab-page .ab-drives__media img,
.page-about .ab-page .ab-history__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 填滿圖框，比例不符的部分裁掉 */
}

/* 只給螢幕閱讀器看的內容（畫面上完全看不到，但不是 display:none，
   display:none 會連螢幕閱讀器都讀不到）。 */
.page-about .ab-page .ab-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   2. 區塊樣式
   ========================================================================== */

/* --------------------------------------------------------------------------
   2-1. OUR STORY —— 左邊小標＋大標、右邊三段內文，下面一張滿版圖
   -------------------------------------------------------------------------- */
.page-about .ab-page .ab-story {
  padding-block: var(--ab-pad);
}

.page-about .ab-page .ab-story__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* ← 左右兩欄的寬度比例（設計稿約 1 : 2） */
  align-items: start;              /* 兩欄頂端對齊，不是上下置中 */
  gap: var(--ab-gap);
}

/* ← 大圖的圖框比例。設計稿上量到約 1.75，先用 16/9；
     實圖比例不一樣就改這一行，不改的話 object-fit: cover 會把圖裁掉。 */
.page-about .ab-page .ab-story__media {
  aspect-ratio: 16 / 9;
  margin-top: var(--ab-gap);       /* ← 文字到大圖的距離 */
  border-radius: var(--ab-radius);
}

/* --------------------------------------------------------------------------
   2-2. WHAT DRIVES US —— 左文字、右圖，兩欄上下置中對齊
   -------------------------------------------------------------------------- */
.page-about .ab-page .ab-drives {
  padding-block: var(--ab-pad);
}

.page-about .ab-page .ab-drives__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* ← 左右兩欄的寬度比例 */
  align-items: center;             /* 設計稿上文字是對齊圖片的上下中線 */
  gap: var(--ab-gap);
}

/* ← 這張是正方形（設計稿量到約 1.05）。比例不一樣就改這一行。 */
.page-about .ab-page .ab-drives__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--ab-radius);
}

/* --------------------------------------------------------------------------
   2-3. HISTORY —— 置中標題 ＋ 一次顯示三張的輪播（卡片下面帶時間軸）

   結構：.ab-history__carousel（定位基準，左右箭頭貼在它兩側）
           └ .ab-history__viewport（裁切窗，overflow: hidden）
               └ .ab-history__track（整排卡片，靠 translateX 左右滑）
                   └ .ab-history__item ×N
   -------------------------------------------------------------------------- */
.page-about .ab-page .ab-history {
  padding-block: var(--ab-pad);
}

.page-about .ab-page .ab-history__head {
  margin-bottom: var(--ab-gap);
  text-align: center;
}

/* ★ 置中的段落一定要補 margin-inline: auto。
     只寫 text-align: center 的話，因為主題的 p { max-width: 70ch } 讓這個框
     只有 623px 寬又貼在左邊，文字只會在那 623px 裡置中，整塊看起來偏左。 */
.page-about .ab-page .ab-history__lead {
  max-width: 60ch;
  margin: 0 auto;
  font-size: var(--t-body, 18px);
  color: var(--color-text-muted, #666);
}

/* ★ 左右各空出「箭頭直徑 ＋ 箭頭離卡片的距離」，箭頭就放在這塊留白裡。
   之前是把箭頭往容器外面推（負的 margin 那招），問題是外面有多少空間要看螢幕多寬：
   1920 上很寬鬆，但 1440 的筆電上容器已經佔滿，箭頭只剩 gutter 那 48px 可用，
   扣掉 36px 的箭頭本身就只剩 12px，再推就被擠出畫面。
   改成在裡面留位置之後，每個螢幕寬度的距離都一樣，也絕對不會跑出畫面。
   代價是卡片會窄一點（1440 上 427px → 392px）。 */
.page-about .ab-page .ab-history__carousel {
  position: relative;              /* 箭頭的定位基準 */
  padding-inline: calc(var(--ab-history-nav-size) + var(--ab-history-nav-gap));
}

.page-about .ab-page .ab-history__viewport {
  overflow: hidden;                /* 沒有這行會看到窗外多出來的卡片 */
}

.page-about .ab-page .ab-history__track {
  display: flex;
  gap: var(--ab-history-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.4s ease; /* ← 滑動速度 */
}

/* 每張卡片的寬度 =（窗寬 − 中間所有間距）÷ 顯示張數。
   所以改 --ab-history-per-view 就能換成一次顯示 2 張或 4 張，這裡不用動。 */
.page-about .ab-page .ab-history__item {
  flex: 0 0 calc(
    (100% - var(--ab-history-gap) * (var(--ab-history-per-view) - 1))
    / var(--ab-history-per-view)
  );
  min-width: 0;                    /* 不加的話長單字會把卡片撐爆 */
}

.page-about .ab-page .ab-history__media {
  aspect-ratio: 1 / 1;             /* ← 卡片圖是正方形 */
  border-radius: var(--ab-radius);
}

/* 時間軸那一列：一條橫線 ＋ 一顆圓點。
   線是 ::before、圓點是 ::after，::after 畫在後面所以會蓋在線上。 */
.page-about .ab-page .ab-history__marker {
  position: relative;
  height: 20px;                        /* 跟圓點一樣高，上下間距才算得準 */
  margin-block: var(--space-5, 2rem);  /* ← 圖到時間軸、時間軸到日期的距離 */
}

/* 橫線往左右各多長出半個間距，跟隔壁那張的線接起來變成一整條。
   最外側多出來的部分會被 .ab-history__viewport 的 overflow: hidden 切掉。 */
.page-about .ab-page .ab-history__marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--ab-history-gap) / -2);
  right: calc(var(--ab-history-gap) / -2);
  height: 1px;
  background-color: var(--color-border, #e0e0e0);
}

.page-about .ab-page .ab-history__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;                     /* ← 圓點大小 */
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #d9d9d9;       /* ← 圓點顏色 */
}

.page-about .ab-page .ab-history__date {
  max-width: none;
  margin: 0 0 var(--space-1, 0.25rem);
  font-size: var(--t-small, 16px);
  color: var(--color-text-muted, #666);
  text-align: center;
}

.page-about .ab-page .ab-history__name {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--t-body, 18px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #222);
  text-align: center;
}

.page-about .ab-page .ab-history__text {
  max-width: none;
  margin: 0;
  font-size: var(--t-small, 16px);
  line-height: 1.6;
  color: var(--color-text-muted, #666);
  text-align: center;
}

/* 左右箭頭。
   ★ 貼在 .ab-history__carousel 左右留白的最外側（left/right: 0 是對「內距框」算的，
     所以會落在留白的外緣）。箭頭到卡片的距離＝--ab-history-nav-gap。
   ★ 上下位置（--ab-history-nav-top）由 JS 依圖片實際高度算出來寫進來。
     圖是正方形、高度跟著欄寬跑，CSS 的 top: % 是對「高度」算的，算不出來。
   ★ V 形是用 border 轉 45 度畫的，不是外部 SVG 檔 ——
     file:// 預覽下載外部 SVG 會被當跨來源擋掉，而且是無聲失敗。 */
.page-about .ab-page .ab-history__nav {
  position: absolute;
  top: var(--ab-history-nav-top, 120px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ab-history-nav-size);
  height: var(--ab-history-nav-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #bce1ff;       /* ← 箭頭底色 */
  color: #14181f;                  /* V 形的顏色（用 currentColor 畫） */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.page-about .ab-page .ab-history__nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.page-about .ab-page .ab-history__nav--prev {
  left: 0;
  transform: translateY(-50%);
}

.page-about .ab-page .ab-history__nav--prev::before {
  margin-left: 3px;                /* V 形視覺置中的微調 */
  transform: rotate(135deg);
}

.page-about .ab-page .ab-history__nav--next {
  right: 0;
  transform: translateY(-50%);
}

.page-about .ab-page .ab-history__nav--next::before {
  margin-right: 3px;
  transform: rotate(-45deg);
}

.page-about .ab-page .ab-history__nav:hover {
  background-color: #32a1e6;       /* ← 滑過去的底色 */
  color: #ffffff;
}

/* 已經滑到頭的那一側：變淡而且不可點。 */
.page-about .ab-page .ab-history__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-about .ab-page .ab-history__nav:disabled:hover {
  background-color: #bce1ff;
  color: #14181f;
}

/* --------------------------------------------------------------------------
   2-4. LOOKING AHEAD —— 整區置中，最後兩顆按鈕
   -------------------------------------------------------------------------- */
.page-about .ab-page .ab-ahead {
  padding-block: var(--ab-pad);
  text-align: center;
}

/* 置中區塊裡的段落一樣要 margin-inline: auto，理由同 2-3 的 __lead。
   ← max-width 控制斷在第幾個字（ch＝字元寬度，不是像素），換文案要重對一次。 */
.page-about .ab-page .ab-ahead__text {
  max-width: 62ch;
  margin: 0 auto var(--space-3, 1rem);
  font-size: var(--t-body, 18px);
  line-height: 1.7;
  color: var(--color-text-muted, #666);
}

.page-about .ab-page .ab-ahead__actions {
  display: flex;
  flex-wrap: wrap;                 /* 手機上塞不下會自己換行 */
  justify-content: center;
  gap: var(--space-3, 1rem);
  margin-top: var(--space-5, 2rem);   /* ← 文字到按鈕的距離 */
}

/* 按鈕沿用主題的 .btn.btn--pill（形狀、字級、預設的淺藍底都是它的），
   ★ 但 hover 一定要自己寫：主題那顆好看的 hover 是掛在別的區塊 class 上的，
     只靠 .btn--pill 自己的 hover 會得到另一個顏色。 */
.page-about .ab-page .ab-ahead__btn:hover {
  background-color: #32a1e6;
  color: #ffffff;
}

/* CONTACT US：預設就是藍底白字（設計稿上兩顆顏色不一樣）。
   ← 設計稿沒給色碼，這裡先用品牌色表的 hover 藍 #32A1E6，要換改這兩行。 */
.page-about .ab-page .ab-ahead__btn--primary {
  background-color: #32a1e6;
  color: #ffffff;
}

.page-about .ab-page .ab-ahead__btn--primary:hover {
  background-color: #1a73e8;       /* 品牌主藍 */
  color: #ffffff;
}


/* ==========================================================================
   3. RWD —— 平板／手機（max-width: 900px）

   ★ 這一節必須放在檔案最後，這是技術限制不是慣例：media query 不會自動贏，
     被它覆蓋的規則一定要寫在它前面才蓋得掉。
   ========================================================================== */
@media (max-width: 900px) {

  /* 兩欄版面一律變單欄。WHAT DRIVES US 的圖會掉到文字下面
     （HTML 本來就是文字在前、圖在後，所以不用另外調順序）。 */
  .page-about .ab-page .ab-story__grid,
  .page-about .ab-page .ab-drives__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5, 2rem);
  }

  /* 輪播改成一次一張 —— 手機寬度塞三張的話每張只有一百出頭，字會爛掉。 */
  .page-about .ab-page {
    --ab-history-per-view: 1;
  }

  /* 手機不留箭頭的位置，改成壓在圖片上面 ——
     螢幕本來就窄，再左右各挖掉 60px 的話卡片會小到看不清楚。 */
  .page-about .ab-page .ab-history__carousel {
    padding-inline: 0;
  }

  .page-about .ab-page .ab-history__nav--prev {
    left: 8px;
  }

  .page-about .ab-page .ab-history__nav--next {
    right: 8px;
  }
}