/* ===========================================================
   案例內頁 —— 敘事型 case study（第一個案子：BeNour 本蘊）

   版面文法取自 cinco.design/work/stelo-by-dexcom：
   **滿版、硬邊、大量留白、不對稱**。沒有卡片、沒有圓角、沒有陰影框 ——
   那些是 SaaS 元件庫的語彙，會把作品集讀成產品頁。
   圖片一律出血到視窗邊緣或壓在整片色場上，文字收在窄欄、刻意偏離中軸。

   色系：Lumina 為骨（紙／墨 token），BeNour 為內容（漸層、代號、深色段差）。
   全部用 cs- 前綴，避免被 main.css 更通用的祖先規則蓋掉。
   =========================================================== */

.is-case main { position: relative; z-index: 1; }

/* --- 骨架 ------------------------------------------------- */
.cs-g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 28px);
  padding-inline: var(--gutter);
}
.cs-sec  { padding-block: clamp(80px, 12vw, 200px); }
.cs-sec--tight { padding-block: clamp(48px, 7vw, 104px); }

/* 深色段：文字另成一套（沿用首頁 Work 深底那組實測過的值） */
.cs-dark { background: #16181C; color: #C9CDDD; }
.cs-dark .label { color: #A6ABC4; }
.cs-dark .cs-h2, .cs-dark b { color: #FFFFFF; }
.cs-dark .cs-lede { color: #C9CDDD; }

.cs-eyebrow { margin-bottom: var(--s-3); }
.cs-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.06;
  max-width: 15ch;
  margin-bottom: var(--s-3);
}
.cs-lede { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.cs-note { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; max-width: 42ch; }
.cs-cap  { margin-top: var(--s-2); }

/* 滿版圖：一律出血、硬邊、cover */
.cs-shot { display: block; width: 100%; height: auto; }
.cs-bleed img {
  width: 100%;
  height: clamp(340px, 62vh, 760px);
  object-fit: cover;
  /* 方形的原稿裁成橫幅，重心要往上一點，不然主體被切成一條腰帶 */
  object-position: center 44%;
}

/* --- 01 主圖 ----------------------------------------------
   底圖是生成的海峽浪花，漂浮的盒子是**真實交付稿去背**疊上去的。
   （2026-09-03：當初是紅線要求，該紅線已廢除；維持合成是技術選擇 ——
    盒面文字不會被模型重刻歪掉 —— 不是義務。） */
.cs-hero {
  position: relative;
  min-height: clamp(460px, calc(100svh - var(--header-h)), 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0B1E2A;
}
.cs-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cs-hero__bg::after { content: ''; }
.cs-hero::after {          /* 讓盒子與海面之間有空氣，不然貼在一起讀成貼紙 */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 46%, rgba(6,20,28,.42) 0%, rgba(6,20,28,0) 70%);
  pointer-events: none;
}
.cs-hero__box {
  position: relative;
  z-index: 1;
  width: min(46vw, 620px);
  height: auto;
  filter: drop-shadow(0 42px 60px rgba(3, 14, 20, .55));
}

/* --- 02 敘述 ----------------------------------------------
   CINCO 的骨架：客戶名 → 兩行標題 → 二至三段內文 → 服務項目。
   刻意不置中、不做卡片 —— 卡片會讓它讀成一則公告。 */
.cs-say__col   { grid-column: 3 / 10; }
.cs-say__client{ margin-bottom: var(--s-4); }
.cs-say__head {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  white-space: pre-line;          /* data-en/tc 用 
 斷句 */
  margin-bottom: var(--s-5);
}
.cs-say__p { font-size: var(--fs-body); line-height: 1.78; color: var(--ink-soft); margin-bottom: var(--s-3); max-width: 62ch; }
.cs-say__svc { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: 3px; font-weight: 600; font-size: var(--fs-small); }
.cs-say__facts {
  grid-column: 10 / 13;
  align-self: end;
  display: grid;
  gap: 4px;
  font-size: var(--fs-small);
  border-top: 1px solid rgba(27, 36, 64, .22);
  padding-top: var(--s-2);
}
.cs-say__facts div { display: grid; gap: 2px; margin-bottom: var(--s-2); }

/* --- 03 五盒 ----------------------------------------------
   底色設成產品照的實際背景，去背後的盒子擺上去接不出邊界。
   高低錯開是為了破掉「五個等高矩形」的貨架感。 */
.cs-line { background: #FFFBFA; padding-block: clamp(64px, 9vw, 140px); }
.cs-line__row {
  list-style: none; margin: clamp(32px, 5vw, 72px) 0 0; padding-inline: var(--gutter);
  display: grid; gap: clamp(10px, 1.8vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.cs-line__row li { display: grid; gap: var(--s-2); justify-items: center; min-width: 0; }
.cs-line__row img { width: 100%; height: auto; }

/* --- 04 代號（深色段）------------------------------------- */
.cs-code__head { grid-column: 1 / 6; }
.cs-code__list { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
.cs-code__list li {
  display: grid;
  gap: 4px var(--s-3);
  padding: clamp(18px, 2.2vw, 30px) 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.cs-code__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cs-code__list b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  letter-spacing: .04em;
  line-height: 1;
}
.cs-code__cn { font-size: var(--fs-body); }
.cs-code__en {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase; color: #A6ABC4;
}
.cs-code__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* --- 05 Persona ------------------------------------------
   一格一個人。圖出血到視窗的一邊，文字收在另一邊的窄欄，左右交替。 */
.cs-per { display: grid; gap: clamp(64px, 9vw, 140px); }
.cs-per__row { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; }
.cs-per__fig { margin: 0; min-width: 0; }
.cs-per__fig img { width: 100%; height: clamp(360px, 52vw, 640px); object-fit: cover; }
.cs-per__txt { display: grid; gap: var(--s-2); align-content: center; min-width: 0; padding-inline: var(--gutter); }
.cs-per__code { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.cs-per__code b { font-size: 1.5em; letter-spacing: .03em; margin-right: .4em; }
.cs-per__ta    { font-size: var(--fs-small); color: var(--ink-soft); }
.cs-per__claim {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 600; line-height: 1.35;
  padding-left: var(--s-2);
  border-left: 3px solid var(--c);
  margin-block: var(--s-1);
}
.cs-per__ing  { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; max-width: 40ch; }
.cs-per__tags { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.cs-per__tags li {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em;
  padding: 5px 10px; border: 1px solid var(--c);
}

/* --- 06 色彩 ----------------------------------------------
   漸層是 CSS 算的，不是圖檔（visual-guide §2.5）。
   五條疊成一面牆、之間不留縫 —— 那才讀得出「一道光譜」。 */
.cs-cis { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--fs-small); }
.cs-cis li { display: grid; grid-template-columns: 26px auto 1fr; gap: var(--s-2); align-items: center; }
.cs-cis i  { width: 26px; height: 26px; border: 1px solid rgba(27, 36, 64, .2); }
.cs-cis span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-soft); }

.cs-wall { margin-top: clamp(48px, 7vw, 96px); }
.cs-wall__band {
  min-height: clamp(160px, 22vw, 260px);
  display: grid;
  align-content: center;
  justify-items: end;
  padding: clamp(20px, 3vw, 40px) var(--gutter);
  background: linear-gradient(96deg,
    var(--c) 0%,
    color-mix(in oklab, var(--c) 46%, #F7F2E8) 42%,
    #F9F4EA 72%);
}
.cs-wall__band--iri {
  background: linear-gradient(96deg,
    #F6D9E8 0%, #B05B94 22%, #8E7FC8 44%, #7FC6D8 62%, #F9F4EA 86%);
}
.cs-wall__txt { max-width: 38ch; text-align: right; }
.cs-wall__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.cs-wall__name span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-soft); margin-left: .6em; }
.cs-wall__say { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; margin-top: var(--s-1); }

/* --- 07 ORC 全幅色帶 -------------------------------------- */
.cs-band {
  display: grid; place-items: center;
  min-height: clamp(320px, 46vw, 620px);
  padding: var(--gutter);
  background:
    radial-gradient(120% 88% at 50% 118%, rgba(199, 231, 236, .30) 0%, rgba(11, 30, 42, 0) 62%),
    linear-gradient(178deg, #08161F 0%, #10394A 46%, #156779 74%, #0A2430 100%);
  color: #FFFFFF; text-align: center;
}
.cs-band__brand { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: 1; }
.cs-band__code  { font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.7rem); letter-spacing: .44em; text-indent: .44em; margin-top: var(--s-2); color: #DCEAEE; }

/* --- 08 陳列 ---------------------------------------------- */
.cs-shelf__pair { display: grid; gap: clamp(12px, 2vw, 28px); margin-top: clamp(20px, 3vw, 40px); }
/* <figure> 的瀏覽器預設 margin 是 1em 40px —— 不歸零的話圖永遠填不滿格 */
.cs-shelf__pair figure, .cs-scene__side figure { margin: 0; }
.cs-shelf__pair img { width: 100%; height: clamp(260px, 34vw, 460px); object-fit: cover; }
.cs-shelf__txt { grid-column: 1 / 7; }

/* --- 09 情境 ---------------------------------------------- */
.cs-scene__big { grid-column: 1 / 9; margin: 0; }
.cs-scene__big img { width: 100%; height: auto; }
.cs-scene__side { grid-column: 9 / 13; align-self: end; display: grid; gap: var(--s-3); }
.cs-scene__side img { width: 100%; height: auto; }
.cs-scene__side figure { display: grid; gap: var(--s-2); }

/* --- 10 完稿到印刷（深色段）------------------------------- */
.cs-print__head { grid-column: 1 / 7; margin-bottom: clamp(32px, 5vw, 64px); }
.cs-print__grid { display: grid; gap: clamp(12px, 2vw, 28px); grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: var(--gutter); }
.cs-print__grid figure { margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.cs-print__grid img { width: 100%; height: 100%; object-fit: cover; }
.cs-print__a { grid-column: 1 / 8; }
.cs-print__b { grid-column: 8 / 13; align-self: end; }
.cs-print__c { grid-column: 3 / 9; margin-top: clamp(20px, 3vw, 40px); }

.cs-die { display: grid; gap: clamp(12px, 2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-top: clamp(40px, 6vw, 88px); padding-inline: var(--gutter); }
.cs-die figure { margin: 0; display: grid; gap: var(--s-2); }
.cs-die img { width: 100%; height: auto; }

.cs-spec { width: 100%; border-collapse: collapse; margin-top: clamp(40px, 6vw, 88px); font-size: var(--fs-small); }
.cs-spec caption { text-align: left; padding-bottom: var(--s-2); }
.cs-spec th, .cs-spec td { text-align: left; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cs-spec th { font-family: var(--font-display); font-weight: 600; letter-spacing: .03em; width: 6em; color: #FFFFFF; }
.cs-spec td:nth-child(2) { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; }
.cs-spec td:last-child { color: #A6ABC4; }

/* --- 11 收尾 ---------------------------------------------- */
.cs-end__head { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; max-width: 18ch; }
.cs-end__act  { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* --- 斷點 -------------------------------------------------- */
@media (min-width: 760px) {
  .cs-cis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-code__list li { grid-template-columns: 10px 5.5em minmax(0, 1fr) minmax(0, 1.15fr); align-items: baseline; }
  .cs-code__dot { align-self: center; }

  /* Persona：圖出血到視窗一邊，文字收在另一邊，左右交替 */
  .cs-per__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cs-per__row--flip .cs-per__fig { order: 2; }
  .cs-per__row .cs-per__txt { padding-inline: clamp(24px, 4vw, 72px) var(--gutter); }
  .cs-per__row--flip .cs-per__txt { padding-inline: var(--gutter) clamp(24px, 4vw, 72px); }

  .cs-shelf__pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-inline: var(--gutter); }
  .cs-shelf__pair figure:last-child { align-self: end; }
}

@media (min-width: 1000px) {
  /* 五格併成一排「全家福」：格與格之間不留縫、還互相疊一點，
     單張才夠大。留縫的話五個 238px 的小盒子讀起來像商品清單，不是作品。 */
  .cs-line__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding-inline: clamp(16px, 2.4vw, 48px);
  }
  .cs-line__row li { margin-inline: -3%; }
  .cs-line__row li:nth-child(1) { z-index: 1; }
  .cs-line__row li:nth-child(2) { z-index: 2; transform: translateY(-30px); }
  .cs-line__row li:nth-child(3) { z-index: 3; }
  .cs-line__row li:nth-child(4) { z-index: 4; transform: translateY(-20px); }
  .cs-line__row li:nth-child(5) { z-index: 5; transform: translateY(-48px); }
  .cs-line__row .label { transform: translateY(6px); }
}

@media (max-width: 759px) {
  .cs-say__col, .cs-say__facts, .cs-code__head, .cs-code__list,
  .cs-scene__big, .cs-scene__side, .cs-shelf__txt, .cs-print__head,
  .cs-print__a, .cs-print__b, .cs-print__c { grid-column: 1 / -1; }
  .cs-say__facts { margin-top: var(--s-5); }
  .cs-per__fig img { height: clamp(300px, 76vw, 460px); }
  .cs-wall__band { justify-items: start; }
  .cs-wall__txt { text-align: left; }
}

/* --- 中文排版：ch 對中文無效，一律換 em ------------------- */
[lang="zh-Hant"] .cs-h2        { letter-spacing: 0; max-width: 14em; font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
[lang="zh-Hant"] .cs-lede      { max-width: 24em; }
[lang="zh-Hant"] .cs-note      { max-width: 22em; }
[lang="zh-Hant"] .cs-say__head { letter-spacing: 0; font-size: clamp(1.9rem, 3.9vw, 3.1rem); line-height: 1.26; }
[lang="zh-Hant"] .cs-say__p    { max-width: 32em; }
[lang="zh-Hant"] .cs-per__ing  { max-width: 22em; }
[lang="zh-Hant"] .cs-wall__txt { max-width: 20em; }
[lang="zh-Hant"] .cs-end__head { letter-spacing: 0; max-width: 13em; }