/* ══════════════════════════════════════════════════════════════
   TIFAA 內頁樣式
   tf-base.css 之後載入，只放內頁專屬的東西。
   首頁與全站共用的變數、骨架、元件（.wrap / .row / .eyebrow / .title /
   .trule / .lead / .body / .secno / .freg）都在 tf-base.css，這裡不重複宣告。

   斷點只有兩檔，與 tf-base.css 一致：
       平板　@media (max-width:999.98px)
       手機　@media (max-width:689.98px)
   整份 CSS 只准出現這兩個數字。
   ══════════════════════════════════════════════════════════════ */


/* ══════ 內頁 Banner（全站共用規格）══════

   規格定案 2026-09-18，SOP Step 8 要求「首頁定版後先定內頁 Banner 再寫」。

   與首頁主視覺的差異化：
     首頁 .hero   min(78vh,680px)　左右兩欄，右欄是照片輪播，有印章與控制列
     內頁 .pbanner min(42vh,380px)　滿版單欄，一張底圖壓深色漸層，純文字

   深底用與 .hero .dk 完全相同的三層漸層與點陣紋理，維持同一個材質語言；
   底圖的調色與遮罩則沿用 .band / .cta 那一套，所以換任何一張圖白字都讀得到。

   這組樣式同時被三個地方使用：
     1. 內頁的 <section class="pbanner">（about、certification…）
     2. 分類封存頁　Blocksy 的 hero section type-2，見本檔最後一節
     3. 文章內頁　（尚未做） */
.pbanner{
  position:relative;overflow:hidden;
  min-height:min(42vh,380px);
  display:flex;flex-direction:column;justify-content:center;
  color:var(--on-dark);
  background:
    radial-gradient(130% 95% at 10% 6%, rgba(255,248,236,.13) 0%, transparent 58%),
    radial-gradient(90% 70% at 96% 96%, rgba(0,0,0,.4) 0%, transparent 60%),
    linear-gradient(152deg,#453D3E 0%,#2B2526 40%,#120F10 100%);
}
.pbanner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(242,240,234,.055) 1px,transparent 1px);
  background-size:11px 11px;
}
.pbanner > *{position:relative;}
.pbanner .in{padding-block:var(--s7);}

.pbanner .eyebrow{color:var(--on-dark-3);margin-bottom:var(--s4);}
.pbanner .eyebrow::after{background:var(--rule-dark);}
.pbanner .eyebrow .no{color:var(--seal-on-dark);}

.pbanner h1{
  font-family:var(--serif-tc);font-size:46px;line-height:1.3;font-weight:600;
  margin:0;letter-spacing:.06em;color:var(--on-dark);
}
.pbanner .brule{height:1px;width:64px;background:var(--seal-on-dark);margin:var(--s4) 0 var(--s4);}
.pbanner .bsub{
  font-size:16px;line-height:2.1;color:var(--on-dark-2);margin:0;max-width:56ch;
}


/* ══════ 內頁節標頭 ══════
   首頁的 .sec-head 是「標題滿 12 欄，右側輔助連結疊在 9-13 欄」。
   內頁的節比較多、每節都要能被掃到，所以改成左標題右內文的兩欄制：
   左欄只有編號與標題，右欄承載全部內文。視線由左向右一次落定。 */
.psec{padding-block:var(--sec-half);}
.psec .pbody{grid-column:6 / 13;}

/* 左欄只有編號與標題，右欄卻可能有六百多 px 的內容（組織架構那節最明顯），
   固定住的話左半邊會空一大塊。改成 sticky，標題跟著該節捲動，到節末才被推走，
   讀者在長內容裡永遠知道自己在哪一節。

   grid 預設 align-items:stretch 會把子項撐滿列高，sticky 就沒有移動空間，
   所以一定要配 align-self:start。
   top 是頁眉 72px 加一個 --s5 的呼吸，與 scroll-padding-top 的 88px 同一套邏輯。 */
.psec .phead{
  grid-column:1 / 5;
  position:sticky;top:calc(72px + var(--s5));align-self:start;
}

.psec .phead .title{font-size:38px;line-height:1.3;}
.psec .phead .trule{margin:var(--s4) 0 0;width:64px;background:var(--rule);}


/* ══════ 雙向價值：兩欄對照卡 ══════
   02-1 的「認證的雙向價值」。兩個對象並列，用 1px 界欄框住，
   左上角掛印朱編號。印朱在這裡是「經查驗的資料欄位」語意，符合規則。 */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);margin-top:var(--s6);}
.duo .card{
  border:1px solid var(--rule);background:var(--paper-raise);
  padding:var(--s5) var(--s4) var(--s4);position:relative;
}
.duo .card .no{
  font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--seal);
  display:block;margin-bottom:var(--s3);
  font-variant-numeric:lining-nums tabular-nums;
}
.duo .card h3{
  font-family:var(--serif-tc);font-size:22px;font-weight:600;letter-spacing:.06em;
  margin:0 0 var(--s3);color:var(--ink);line-height:1.45;
}
.duo .card p{
  margin:0;padding-top:var(--s3);border-top:1px solid var(--rule-soft);
  font-size:15px;line-height:2.05;color:var(--ink-2);
}


/* ══════ 核心任務：三欄編號條 ══════
   02-2 的三項核心任務。沿用首頁三階卡片 .bdg 的分隔語言（上緣墨線、
   標題下細線），但不放圖，改用印朱序號帶出「第幾項」。 */
.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--s6);}
.tasks .task{border-top:1px solid var(--ink);padding-top:var(--s4);}
.tasks .task .no{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--seal);
  font-variant-numeric:lining-nums tabular-nums;display:block;
}
.tasks .task h3{
  font-family:var(--serif-tc);font-size:24px;font-weight:600;letter-spacing:.06em;
  margin:10px 0 0;color:var(--ink);line-height:1.4;
}
.tasks .task p{
  margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule-soft);
  font-size:15px;line-height:2.0;color:var(--ink-2);
}


/* ══════ 治理數字 ══════
   02-3 的理監事結構。數字是要被讀出來的，所以字族走 --serif-tc 加
   lining-nums tabular-nums，不用 Cormorant（它的舊體數字會把 9 排成下沉的）。 */
.gov{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--s5);}
.gov .n{border-top:1px solid var(--rule);padding-top:var(--s3);}
.gov .n b{
  display:block;font-family:var(--serif-tc);font-size:40px;font-weight:600;
  line-height:1.1;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.gov .n span{
  display:block;margin-top:10px;font-size:13.5px;color:var(--ink-3);letter-spacing:.04em;
}

/* 會議與會計年度：條列式資料列，沿用頁尾 .freg 的兩端對齊 */
.gov-rows{margin-top:var(--s6);}
.gov-rows .fr{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:15px;line-height:1.9;
}
.gov-rows .fr:last-child{border-bottom:none;}
.gov-rows .fr span{color:var(--ink-3);white-space:nowrap;}
.gov-rows .fr b{font-weight:400;color:var(--ink-2);text-align:right;}


/* ══════ 協會資料表 ══════
   02-4 的六項。這是「經查驗的資料欄位」，項目名用印朱是規則允許的用途之一。
   立案字號與日期帶數字，字族走 --mono 並開 lining-nums tabular-nums。 */
.facts{margin-top:var(--s5);border-top:1px solid var(--ink);}
.facts .fr{
  display:grid;grid-template-columns:200px 1fr;gap:var(--s4);
  padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline;
}
.facts .fr:last-child{border-bottom:none;}
.facts .fr dt{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--seal);
  margin:0;
}
.facts .fr dd{
  margin:0;font-size:15.5px;line-height:1.9;color:var(--ink);letter-spacing:.02em;
}
.facts .fr dd.num{
  font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums;
  font-size:15px;color:var(--ink-2);
}


/* ══════ 平板　690 – 999.98px ══════ */
@media (max-width:999.98px){
  .pbanner{min-height:min(38vh,320px);}
  .pbanner .in{padding-block:var(--s6);}
  .pbanner h1{font-size:38px;}
  .pbanner .bsub{font-size:15.5px;}

  /* 節標頭改上下堆疊：兩欄制在 656px 的容器裡，左欄只剩 190px 放不下 38px 標題。
     堆疊之後標題在內文正上方，sticky 會擋住內容，要一起關掉。 */
  .psec .phead,.psec .pbody{grid-column:1 / 13;}
  .psec .phead{position:static;}
  .psec .pbody{margin-top:var(--s5);}
  .psec .phead .title{font-size:32px;}

  .gov{grid-template-columns:repeat(2,1fr);row-gap:var(--s5);}
  .facts .fr{grid-template-columns:150px 1fr;gap:var(--s3);}
}


/* ══════ 手機　≤ 689.98px ══════ */
@media (max-width:689.98px){
  .pbanner{min-height:min(34vh,260px);}
  .pbanner .in{padding-block:var(--s5);}
  .pbanner h1{font-size:29px;letter-spacing:.04em;}
  .pbanner .brule{margin:var(--s3) 0;}
  .pbanner .bsub{font-size:14.5px;line-height:2;}

  .psec .phead .title{font-size:27px;}

  .duo,.tasks{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s5);}
  .duo .card{padding:var(--s4) var(--s3);}
  .duo .card h3{font-size:20px;}
  .tasks .task h3{font-size:21px;}

  .gov{grid-template-columns:repeat(2,1fr);gap:var(--s4);}
  .gov .n b{font-size:32px;}

  /* 資料表在手機改上下堆疊，200px 的標籤欄在 390px 寬度下會把值擠成兩三個字一行 */
  .facts .fr{grid-template-columns:1fr;gap:8px;padding:16px 0;}
  .facts .fr dd{font-size:15px;}
  .gov-rows .fr{flex-wrap:wrap;}
  .gov-rows .fr b{text-align:left;}
}


/* ══════ Banner 底圖 ══════
   與首頁 .band / .cta 同一套做法：照片在下、深色漸層在上。
   照片先降飽和與亮度，再壓一層由左至右的深墨漸層，文字所在的左半邊最暗，
   右半邊保留較多影像細節。這樣不管換成哪張圖，白字都讀得到。 */
.pbanner .pb-bg{position:absolute;inset:0;z-index:0;}
.pbanner .pb-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  filter:grayscale(.62) sepia(.12) contrast(1.04) brightness(.52);
}
.pbanner .pb-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(28,24,25,.93) 0%,
    rgba(28,24,25,.82) 38%,
    rgba(28,24,25,.5) 72%,
    rgba(28,24,25,.34) 100%);
}
/* 點陣紋理要疊在照片之上，所以 z-index 要比 .pb-bg 高 */
.pbanner::before{z-index:1;}
.pbanner .in{z-index:2;}


/* ══════ 內頁配圖 ══════
   調色與首頁的 .pic / .bdg-pic 完全一致（grayscale + 微 sepia + 提對比），
   讓內頁的照片跟首頁看起來是同一批。hover 微縮放也沿用同一組曲線。 */
.pfig{margin:0;overflow:hidden;background:var(--paper-sunk);}
.pfig img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.22) contrast(1.05);
  transition:transform .8s cubic-bezier(.22,.8,.3,1);
}
.pfig:hover img{transform:scale(1.03);}

/* 節內滿寬的橫幅，用在段落之間當呼吸 */
.pfig-wide{margin-top:var(--s6);}
.pfig-wide img{height:380px;}

/* 右欄內的方圖，跟著 .pbody 的寬度走 */
.psec .pbody .pfig{margin-top:var(--s5);}
.psec .pbody .pfig img{height:300px;}

/* 組織架構：數字方塊與後面那段說明之間要有呼吸 */
.gov-note{margin-top:var(--s5);}


@media (max-width:999.98px){
  .pfig-wide img{height:300px;}
  .psec .pbody .pfig img{height:260px;}
}

@media (max-width:689.98px){
  .pbanner .pb-bg img{object-position:center 50%;}
  /* 手機的 Banner 只有 260px 高，漸層要更平均，否則右下角會亮得突兀 */
  .pbanner .pb-bg::after{
    background:linear-gradient(170deg,
      rgba(28,24,25,.82) 0%,
      rgba(28,24,25,.9) 55%,
      rgba(28,24,25,.94) 100%);
  }
  .pfig-wide{margin-top:var(--s5);}
  .pfig-wide img{height:220px;}
  .psec .pbody .pfig img{height:200px;}
}


/* ══════════════════════════════════════════════════════════════
   分類封存頁與文章內頁的標題區
   ══════════════════════════════════════════════════════════════

   「最新消息」在架構圖裡是 Archive 不是 Page，沒有 post_content 可以上稿，
   所以標題區走 Blocksy 的 hero section（08_文章版型.php 設定內容），
   外觀在這裡接管，長得跟內頁的 .pbanner 一模一樣。

   這樣分工的好處：標題與描述是客製器裡的兩個欄位，客戶日後要改文字
   不必找我們；而視覺完全由我們控制，改版時只要動這一段。

   Blocksy 輸出的結構：
     .hero-section[data-type="type-2"]
       └ .ct-container
           ├ h1.page-title
           └ .page-description
*/
/* ⚠ 特異度：Blocksy 在 global.css 輸出的是
     [data-prefix="categories"] .hero-section[data-type="type-2"]{background:var(--theme-palette-color-6)}
   那是 (0,3,0)，贏過單寫 .hero-section[data-type="type-2"] 的 (0,2,0)，
   我們的漸層會被整片紙白蓋掉（標題變成淺字壓淺底，幾乎看不見）。
   前面掛一個 body 屬性選擇器把特異度拉到 (0,3,1) 就穩穩贏過它。
   data-prefix 會隨頁面類型變（categories / single_blog_post / author…），
   所以不指定值，只要求這個屬性存在。 */
body[data-prefix] .hero-section[data-type="type-2"]{
  position:relative;overflow:hidden;
  min-height:min(42vh,380px);
  display:flex;flex-direction:column;justify-content:center;
  color:var(--on-dark);
  background:
    radial-gradient(130% 95% at 10% 6%, rgba(255,248,236,.13) 0%, transparent 58%),
    radial-gradient(90% 70% at 96% 96%, rgba(0,0,0,.4) 0%, transparent 60%),
    linear-gradient(152deg,#453D3E 0%,#2B2526 40%,#120F10 100%);
  padding-block:var(--s7);
  margin-bottom:var(--sec-gap);
}
/* 點陣紋理，與 .pbanner 同一組值 */
body[data-prefix] .hero-section[data-type="type-2"]::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(242,240,234,.055) 1px,transparent 1px);
  background-size:11px 11px;
}
/* 容器對齊 .wrap。
   ⚠ Blocksy 這裡輸出的是 <header class="entry-header ct-container-narrow">，
     不是 .ct-container。narrow 容器比內容區窄，會讓標題往中間縮一大截，
     跟內頁 Banner 的左邊界對不齊。直接鎖 .entry-header 最穩，
     兩個 class 日後改了也還在。 */
body[data-prefix] .hero-section[data-type="type-2"] .entry-header{
  position:relative;z-index:2;
  width:min(100% - 44px,var(--content));max-width:none;
  margin-inline:auto;padding-inline:0;
  /* Blocksy 會把客製器的 hero height 當成 min-height 套在這一層，
     外層 .hero-section 的高度就被內層撐開，比內頁 Banner 高一大截。
     高度統一由外層那條 min-height:min(42vh,380px) 控制。 */
  min-height:0;
}

/* 標題。對齊 .pbanner h1 */
body[data-prefix] .hero-section[data-type="type-2"] .page-title{
  font-family:var(--serif-tc);font-size:46px;line-height:1.3;font-weight:600;
  margin:0;letter-spacing:.06em;color:var(--on-dark);
  text-align:left;
}
/* 標題與描述之間那條印朱細線，對應 .pbanner .brule。
   Blocksy 沒有這個元素，用 ::after 生出來。 */
body[data-prefix] .hero-section[data-type="type-2"] .page-title::after{
  content:"";display:block;
  height:1px;width:64px;background:var(--seal-on-dark);
  margin:var(--s4) 0;
}
/* 描述。對齊 .pbanner .bsub */
body[data-prefix] .hero-section[data-type="type-2"] .page-description{
  font-size:16px;line-height:2.1;color:var(--on-dark-2);
  margin:0;max-width:56ch;text-align:left;
}
body[data-prefix] .hero-section[data-type="type-2"] .page-description *{margin:0;}

/* 麵包屑目前是關的（08 腳本），要開的話樣式已經備好 */
body[data-prefix] .hero-section[data-type="type-2"] .ct-breadcrumbs{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--on-dark-3);margin-bottom:var(--s4);
}
body[data-prefix] .hero-section[data-type="type-2"] .ct-breadcrumbs a{color:var(--on-dark-3);}
body[data-prefix] .hero-section[data-type="type-2"] .ct-breadcrumbs a:hover{color:var(--on-dark);}

@media (max-width:999.98px){
  body[data-prefix] .hero-section[data-type="type-2"]{min-height:min(38vh,320px);padding-block:var(--s6);}
  body[data-prefix] .hero-section[data-type="type-2"] .page-title{font-size:38px;}
  body[data-prefix] .hero-section[data-type="type-2"] .page-description{font-size:15.5px;}
}

@media (max-width:689.98px){
  body[data-prefix] .hero-section[data-type="type-2"]{min-height:min(34vh,260px);padding-block:var(--s5);}
  body[data-prefix] .hero-section[data-type="type-2"] .entry-header{width:calc(100% - 36px);}
  body[data-prefix] .hero-section[data-type="type-2"] .page-title{font-size:29px;letter-spacing:.04em;}
  body[data-prefix] .hero-section[data-type="type-2"] .page-title::after{margin:var(--s3) 0;}
  body[data-prefix] .hero-section[data-type="type-2"] .page-description{font-size:14.5px;line-height:2;}
}


/* ── 置頂聲明 ──
   客戶在 03-1 至 03-7 每份文件開頭都指定了這一句，而且明寫「置頂」，
   所以它在認證制度各分頁的內容最上方，不是頁尾。
   樣式取 TIFAA_首頁_v11.0.html:325 的 .disc，那是 v12 被誤刪前的原始寫法；
   不取 v10 版，v10 的 border-left:2px solid var(--seal) 是印朱裝飾線違規。 */
.disc-top{
  font-size:13.5px;line-height:1.95;color:var(--ink-3);
  margin:0;padding:var(--s4) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  letter-spacing:.01em;
}

@media (max-width:689.98px){
  .disc-top{font-size:12.5px;padding:var(--s3) 0;}
}