/* ================================================================
   Board Sea Technology — 內頁共用元件

   design-b 是單頁設計，所以這些內頁才需要的東西她沒做過：
   頁首區、麵包屑、表格、篩選列、分頁、chevron 步驟條、文章內文。
   本檔逐一補上，**全部從她既有的 token 推導，不發明任何數值**
   （DESIGN.md 硬約束 ⑥：缺 token 就停下來回報，不可就地發明）。

   由 _head.php 依 $page['css'] 載入，排在 01–05 之後。首頁不載。

   ── 沿用的硬約束（她的交接契約，內頁一樣要守）──
   ①  :root 以外禁止字面 hex / rgb() / hsl() / 非階梯 px
   ③  :focus-visible 一律 3px ring ＋ 2px 間距，禁裸 outline:none
   ④  觸控目標 ≥44px，相鄰間距 ≥8px
   ⑤  document.scrollWidth 不得超過 clientWidth
   ⑦  法律連結與聯絡管道無真實目的地時一律 EmptyState（非 <a>、無 href）
   ⑩  Marcellus 禁 faux bold
   一般 hover 位移預算 0px、禁 scale()；:active 一律 translateY(--motion-press-offset)
   ================================================================ */


/* ── 內頁頁首 ────────────────────────────────────────────────────
   每支內頁 <main> 的第一個區塊，由 component('page-hero') 產生。

   字級走 --type-role-page-title-*，那是 h1 階的 role 別名。
   首頁的 <h1>（HERO 標題）用的是 h2 階，內頁大標比它高一級——
   這是 DESIGN.md h1._unassigned 寫好的用途，不是新發明的字級。
   別名會自動跟著四斷點的 scale 覆寫走，所以本檔不需要任何 media query。 */
.page-hero {
  padding-block: var(--section-padding-block);
  background-color: var(--surface-page);
  border-block-end: var(--border-width-hairline) solid var(--border-hairline);
}

.page-hero__title {
  font-family: var(--type-role-page-title-family);
  font-size: var(--type-role-page-title-size);
  line-height: var(--type-role-page-title-line-height);
  letter-spacing: var(--type-role-page-title-letter-spacing);
  font-weight: var(--type-role-page-title-weight);
  /* ⑩ Marcellus 只有 400，禁止瀏覽器代為加粗 */
  font-synthesis: none;
  color: var(--text-primary);
  margin-block: var(--section-head-gap) 0;
}

/* eyebrow 直接沿用她的 .eyebrow，這裡只補與大標之間的節奏 */
.page-hero .eyebrow + .page-hero__title {
  margin-block-start: var(--section-head-gap);
}

.page-hero__lead {
  margin-block-start: var(--space-5);
}


/* ── 麵包屑 ──────────────────────────────────────────────────────
   由 component('breadcrumb') 產生，同時輸出 BreadcrumbList JSON-LD。

   ⚠️ 分隔線用 --text-secondary 不用 --decorative-only：後者對白只有 2.49:1，
      她明文禁止用於**任何文字**。分隔符雖然是裝飾用途，但它確實是會被渲染的字。
   ⚠️ 連結加 padding-block 是為了滿足 ④（觸控目標 ≥44px）。
      caption 行高 20–24px ＋ 上下各 12px ＝ 44–48px，視覺字級不變。 */
.crumbs {
  font-family: var(--type-role-breadcrumb-family);
  font-size: var(--type-role-breadcrumb-size);
  line-height: var(--type-role-breadcrumb-line-height);
  letter-spacing: var(--type-role-breadcrumb-letter-spacing);
  font-weight: var(--type-role-breadcrumb-weight);
  color: var(--text-secondary);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;              /* ⑤ 窄寬度下換行，不產生水平捲動 */
  align-items: center;
  gap: 0 var(--space-2);        /* ④ 相鄰觸控目標間距 ≥8px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.crumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--text-secondary);
  /* 分隔符是排版符號不是內容，讀屏靠 <ol> 的語意就夠了 */
  speak: never;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-3);
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--motion-duration-hover) var(--motion-easing-standard);
}

/* hover 位移預算 0px、禁 scale()：只換色與底線 */
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: var(--space-1);
  }
}

/* :active 一律走 --motion-press-offset，該 token 在 reduced-motion 下自動歸零，
   所以這裡不需要自己寫一份 media query */
.crumbs a:active {
  transform: translateY(var(--motion-press-offset));
}

/* ③ 焦點環：3px ring ＋ 2px 間距，全站同一套 */
.crumbs a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-on-light);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-alias-control);
}

.crumbs [aria-current="page"] {
  color: var(--text-secondary);
}


/* ── CTA 帶 ──────────────────────────────────────────────────────
   視覺全部沿用既有元件（section--navy / eyebrow--on-inverse /
   section-title--on-inverse / prose--on-inverse / btn--on-inverse），
   這裡只補版面：置中、限寬、垂直節奏。 */
.cta-band__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--section-head-gap);
}

.cta-band__in .prose {
  /* 置中時 max-width 要吃 auto margin 才會真的置中 */
  margin-inline: auto;
}

.cta-band__in .btn {
  margin-block-start: var(--space-4);
}


/* ── chevron 步驟條（中央廚房準則 H-2）────────────────────────────
   「任何流程／步驟一律用 chevron 步驟條」是公司準則，不是這個設計的選擇。
   目前 5 處：services.php ×1、service-detail.php ×4。

   ⚠️ 風格上要注意：她的設計語彙偏圓（所有控件 --radius-alias-control 是 999px），
      而 chevron 是硬角。這兩者本來就有張力——2026-08-14 daniel 就曾為了同樣的
      理由指定覆寫 H-2，把首頁的交付四階段改成「階段軌道」。這裡先照準則做，
      視覺上不合再由 daniel 裁決要不要比照辦理。

   ⚠️ overflow-x: auto 是必要的：步驟多的時候（事件響應有七階）不能讓整頁
      產生水平捲動（硬約束 ⑤），捲動要關在元件裡面。
   ⚠️ 箭頭深度取 --space-3（12px，在間距階梯上），不是隨手挑的數字。 */
/* ⚠️ chevron 只能靠底色分辨，**必須放在 --surface-page（白）的區塊上**。
   clip-path 會把 border 連同斜角一起裁掉，所以不能用邊線補救；
   放到 section--subtle 上就會同色疊同色而消失（實測踩過）。 */
.ck-flow-stepper {
  --ck-arrow: var(--space-3);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* ④ 不能只靠滑動手勢（WCAG 2.5.1），並且允許垂直捲動穿透 */
  touch-action: pan-y pan-x;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
}

.ck-flow-step {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 左側留出箭頭咬合的空間 */
  padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + var(--ck-arrow));
  /* ④ 觸控目標 ≥44px：space-3 ×2 ＋ meta 行高 ≈ 44–48px */
  min-block-size: var(--space-8);
  background-color: var(--surface-subtle);
  color: var(--text-body);
  font-family: var(--type-role-meta-family);
  font-size: var(--type-role-meta-size);
  line-height: var(--type-role-meta-line-height);
  letter-spacing: var(--type-role-meta-letter-spacing);
  text-decoration: none;
  /* 兩端切成箭頭：右側凸出、左側凹入，並排時互相咬合 */
  clip-path: polygon(
    0 0,
    calc(100% - var(--ck-arrow)) 0,
    100% 50%,
    calc(100% - var(--ck-arrow)) 100%,
    0 100%,
    var(--ck-arrow) 50%
  );
  transition: background-color var(--motion-duration-hover) var(--motion-easing-standard);
}

/* 第一節左邊不咬合，切平 */
.ck-flow-step:first-child {
  padding-inline-start: var(--space-5);
  clip-path: polygon(
    0 0,
    calc(100% - var(--ck-arrow)) 0,
    100% 50%,
    calc(100% - var(--ck-arrow)) 100%,
    0 100%
  );
}

/* 最後一節右邊切平 */
.ck-flow-step:last-child {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    var(--ck-arrow) 50%
  );
}

.ck-flow-step:first-child:last-child {
  clip-path: none;
}

.ck-flow-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-5);
  color: var(--text-eyebrow);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ hover 只換文字色，**底色刻意不動**。
   她的語意層在淺底只有 --surface-page / --surface-subtle / --surface-inverse，
   subtle 與 inverse 之間沒有中間階，也就是**「淺底 hover 底色」這顆 token 不存在**。
   硬約束 ⑥ 說缺 token 要停下來回報、不可就地發明，所以這裡不自己調一個灰。
   已列入回報清單；補上 token 之後再把 background-color 加回來。 */
@media (hover: hover) and (pointer: fine) {
  .ck-flow-step:hover {
    color: var(--text-primary);
  }
}

.ck-flow-step:active {
  transform: translateY(var(--motion-press-offset));
}

/* ③ clip-path 會把 outline 一起裁掉，所以焦點改用內描邊 box-shadow，
   視覺結果與 3px ring ＋ 2px 間距等價 */
.ck-flow-step:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-on-light);
}


/* ── 階段格 ──────────────────────────────────────────────────────
   步驟條下方的說明卡。auto-fit 讓欄數隨寬度變，不寫死欄數。
   ⚠️ minmax 的下限用 --card-min-inline-size（她 S5 卡片列已定義的 token），
      不另外發明一個寬度。 */
/* ⚠️ 欄寬下限用 --card-row-scroll-width：那是她 S5 服務卡的欄寬，
   四個斷點都有覆寫（380 / 320 / 280），語意上就是「一張卡多寬」。
   自己編一個 260px 會多出一個沒人維護的數字，也不會跟著斷點走。
   min(100%, …) 是為了守住硬約束 ⑤：容器比一欄還窄時不撐出水平捲動。 */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-row-scroll-width)), 1fr));
  gap: var(--space-5);
}

/* ⚠️ 白底 ＋ 髮絲邊，不是灰底。
   灰底（--surface-subtle）放在 section--subtle 上會同色疊同色**整個看不見**——
   實測踩過。改成白底之後：放白底區靠邊線讀得出來、放淺灰區靠白底讀得出來，
   兩種底都成立，元件不必知道自己被放在哪一種區塊上。 */
.phase,
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--surface-page);
  border: var(--border-width-hairline) solid var(--border-hairline);
  border-radius: var(--radius-alias-media);
}

.phase > p {
  margin: 0;
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  color: var(--text-body);
}


/* ── 卡片格 ──────────────────────────────────────────────────────
   首頁 S5 是橫向捲動的 .card-rail，內頁列表要的是格狀。
   **卡片本體完全沿用 .card**（她已設計好），這裡只換排列容器，
   所以兩邊視覺一致，改卡片樣式一次生效。 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-row-scroll-width)), 1fr));
  gap: var(--space-6);
}


/* ── 篩選列 / 分頁 ───────────────────────────────────────────────
   兩者都是**控件**，所以直接用她的按鈕詞彙，不另做一套 pill：
     未選中 → .btn .btn--secondary（透明底＋髮絲邊）
     選中   → .btn .btn--primary  （深藍實心）
   這樣做的好處是零新 token、觸控目標自動達標
   （--btn-padding-block 是 12px，她標為「mobile 44px 觸控餘裕 0 的硬下限」），
   而且日後按鈕改版篩選列會跟著變。

   ⚠️ 未選中態沒有 hover 樣式，這是刻意的：她在 .btn--secondary 的註解寫著
      「狀態矩陣未列 hover/active/disabled 明確值，**本輪不發明**，
        需要態時回頭出規格」。同一堵牆，做法保持一致。 */
.filterbar {
  display: flex;
  flex-wrap: wrap;              /* ⑤ 窄寬度換行，不撐出水平捲動 */
  align-items: center;
  gap: var(--space-2);          /* ④ 相鄰觸控目標間距 ≥8px */
}

.filterbar + .filterbar {
  margin-block-start: var(--space-3);
}

/* 「N of M」的計數，屬於附屬資訊不是控件 */
.filterbar__count {
  margin-inline-start: auto;
  font-family: var(--type-role-meta-family);
  font-size: var(--type-role-meta-size);
  line-height: var(--type-role-meta-line-height);
  letter-spacing: var(--type-role-meta-letter-spacing);
  color: var(--text-secondary);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}


/* ── 新聞列表（內頁）────────────────────────────────────────────
   .news-row 本體完全沿用她首頁 S4 那套，這裡只補列表容器與空狀態。 */
.news-list--page {
  margin-block-start: var(--space-8);
}

/* ⑦ 沒有結果時是 EmptyState：不可做成連結、不可有 hover */
.news-empty {
  padding-block: var(--space-9);
  text-align: center;
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  color: var(--text-secondary);
}

/* 案例的「客戶 · 地區 · 年份」，與摘要區隔開來（只有案例才有這一行） */
.news-row__excerpt--meta {
  color: var(--text-secondary);
}


/* ── 資訊面板格 ──────────────────────────────────────────────────
   .panel 的盒子樣式與 .phase 共用（見上方）。這裡只給排列容器。
   用於：contact 的辦公室、about 的合作夥伴等沒有圖片的資訊卡。 */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-row-scroll-width)), 1fr));
  gap: var(--space-5);
}

.panel__title {
  margin: 0;
  font-family: var(--type-role-card-title-family);
  font-size: var(--type-role-card-title-size);
  line-height: var(--type-role-card-title-line-height);
  letter-spacing: var(--type-role-card-title-letter-spacing);
  font-weight: var(--type-role-card-title-weight);
  font-synthesis: none;
  color: var(--text-primary);
}

.panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--type-role-meta-family);
  font-size: var(--type-role-meta-size);
  line-height: var(--type-role-meta-line-height);
  color: var(--text-body);
}

.panel__list a {
  color: var(--text-link);
  /* ④ 電話與信箱是觸控目標 */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-8);
}

.panel__list a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-on-light);
  outline-offset: var(--focus-ring-offset);
}

/* 附註文字（狀態、計數之類的附屬資訊） */
.anno {
  font-family: var(--type-role-meta-family);
  font-size: var(--type-role-meta-size);
  line-height: var(--type-role-meta-line-height);
  letter-spacing: var(--type-role-meta-letter-spacing);
  color: var(--text-secondary);
}


/* ── 表格 ────────────────────────────────────────────────────────
   ⚠️ .tbl-wrap 的 overflow-x 是必要的：表格欄多的時候不能讓**整頁**
      產生水平捲動（硬約束 ⑤），捲動要關在容器裡面。
   ⚠️ 分隔線用 --border-hairline（純裝飾，1.22:1）；表頭底下那條是結構線，
      用 --border-functional（4.54:1，≥3:1 才能承載功能語意）。 */
.tbl-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  touch-action: pan-y pan-x;
}

.tbl {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  color: var(--text-body);
}

.tbl th {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-width-hairline) solid var(--border-functional);
  font-family: var(--type-role-eyebrow-family);
  font-size: var(--type-role-eyebrow-size);
  line-height: var(--type-role-eyebrow-line-height);
  letter-spacing: var(--type-role-eyebrow-letter-spacing);
  font-weight: var(--type-role-eyebrow-weight);
  text-transform: var(--type-role-eyebrow-transform);
  color: var(--text-eyebrow);
  white-space: nowrap;
}

.tbl td {
  padding: var(--space-4);
  border-block-end: var(--border-width-hairline) solid var(--border-hairline);
  vertical-align: baseline;
}

.tbl tbody tr:last-child td {
  border-block-end: 0;
}

/* 數量欄：等寬數字，欄位才不會因為位數不同而跳動 */
.tbl .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary);
}

/* 該列的主鍵欄位 */
.tbl .is-key {
  color: var(--text-primary);
}

/* 夥伴名單：一排 .tag，換行不撐出水平捲動 */
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}


/* ── 圖說 ────────────────────────────────────────────────────────
   .media 有 aspect-ratio ＋ overflow:hidden，圖說塞進去會被裁掉，
   所以外層包一個 .figure，.media 只負責圖框。 */
.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.figure__cap {
  font-family: var(--type-role-meta-family);
  font-size: var(--type-role-meta-size);
  line-height: var(--type-role-meta-line-height);
  letter-spacing: var(--type-role-meta-letter-spacing);
  color: var(--text-secondary);
}

.figure__plate {
  color: var(--text-eyebrow);
  font-weight: var(--font-weight-bold);
  margin-inline-end: var(--space-2);
}


/* ── 文章內文（news-detail）──────────────────────────────────────
   body_blocks 有五種型別：text / link / img-single / img-left / img-right / img-pair。
   前三種是單欄，left/right 是文繞圖，pair 是並排兩張。 */
.artmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-block-end: var(--space-5);
}

/* 案例的規格列：Scale / Hardware / Region / Customer。
   用 <dl>，讓讀屏能把「欄位名 → 值」配成對。 */
.artspec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-row-scroll-width)), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6);
  padding-block: var(--space-5);
  border-block: var(--border-width-hairline) solid var(--border-hairline);
}

.artspec__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.artspec__row dd {
  margin: 0;
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  color: var(--text-primary);
}

.artbody {
  margin-block-start: var(--space-7);
}

/* 內文段落走 paragraph 角色；max-width 由該角色的 token 控（≈72 字元/行） */
.artbody > p {
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  letter-spacing: var(--type-role-paragraph-letter-spacing);
  max-inline-size: var(--type-role-paragraph-max-width);
  color: var(--text-body);
  margin-block: 0 var(--space-5);
}

.artfig {
  margin-block: var(--space-6);
}

/* 文繞圖：寬螢幕才浮動，窄螢幕維持單欄（⑤ 不製造水平溢出）。
   斷點沿用她 tablet 的分界 1023px。 */
@media (min-width: 1024px) {
  .artfig--left,
  .artfig--right {
    inline-size: 50%;
    max-inline-size: 50%;
  }

  .artfig--left {
    float: inline-start;
    margin-inline-end: var(--space-6);
  }

  .artfig--right {
    float: inline-end;
    margin-inline-start: var(--space-6);
  }
}

/* 浮動之後要收尾，否則後面的區塊會爬上來 */
.artbody::after {
  content: "";
  display: block;
  clear: both;
}

/* 並排兩張圖：窄螢幕自動疊成單欄 */
.artpair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-row-scroll-width)), 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}


/* 可點的資訊面板（相關服務卡）。
   ⚠️ hover 只加深邊線、不動底色 —— 淺底 hover 底色那顆 token 仍然不存在
      （見 chevron 那段的說明）。--border-hairline → --border-functional
      兩顆都是既有 token，且後者 4.54:1 足以承載狀態語意。 */
.panel--link {
  text-decoration: none;
  transition: border-color var(--motion-duration-hover) var(--motion-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
  .panel--link:hover {
    border-color: var(--border-functional);
  }
}

.panel--link:active {
  transform: translateY(var(--motion-press-offset));
}

.panel--link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-on-light);
  outline-offset: var(--focus-ring-offset);
}

/* 內文條列（服務內頁的重點清單） */
.prose-list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--type-role-paragraph-family);
  font-size: var(--type-role-paragraph-size);
  line-height: var(--type-role-paragraph-line-height);
  color: var(--text-body);
}