/* =======================================================================
   「公司沿革」「公司榮耀」（英文版）重新分頁後，年度區塊的樣式掛勾。

   背景：原站每個年度區塊在 Elementor 裡是逐一元件各自產生一條以亂數 id
   為選擇器的 CSS 規則（例如 `.elementor-1674 .elementor-element-51590a1
   .elementor-heading-title{font-size:30px;...}`），實測全站每一個年度、
   每一頁、每個語言版本的「值」完全一致：
   - 桌機標題（年份數字）：30px、weight 400、黑字 #000000
   - 桌機條列文字：16px、weight 500
   - 手機版年份文字／條列文字：weight 400、灰字 #7C7B7B（比桌機淡，原站
     設計上手機版本來就比桌機版低調）
   - 表頭列（「年份」／「內容」兩個色塊）：底色 #3870D3；桌機文字 24px、
     粗體、letter-spacing 10px、白字；手機文字一般粗細、白字
   - 兩欄寬度不是預設的 50/50：桌機（表頭列＋資料列）都是 30/70（年份欄窄、
     內容欄寬），手機都是 20/80，且每一列資料下方有 1px 分隔線（表頭列
     沒有）；桌機版條列項目的圖示是「靠右」對齊（`--e-icon-list-icon-align:
     right`，圖示大小 14px），同一年度有多筆事件時，項目之間還有一條
     `#A27A7A` 的分隔線——手機版沒有這條項目間分隔線、圖示也維持預設靠左。
     這些欄寬/分隔線/圖示對齊全部一樣是逐一元件各自一條 id 規則表達、
     全站數值一致，跟字級/顏色是同一種「重新產生就對不上」的狀況。
   _mirror/rebuild-timeline-pages.js 重新分頁時一定會把內容重新產生、
   換一批全新的亂數 id，原本那些以 id 為選擇器的規則永遠對不上（不是
   「這次沒接好」，是這個機制本質上就對不上），所以改成在產生的 HTML
   上掛固定 class（`ndb-timeline-*`），直接用同一套已驗證過的值表達，
   不依賴、也不偽造任何原始 widget id。

   選擇器特異度刻意抬高（多疊 class）：要蓋過 Elementor 全站共用的
   `.elementor-widget-heading .elementor-heading-title` 等 kit 層級預設
   規則，光靠「後載入」不夠保險，选择器本身特異度要贏過它們。
   ======================================================================= */

.ndb-timeline .ndb-timeline-col-30 { width: 30%; }
.ndb-timeline .ndb-timeline-col-70 { width: 70%; }
.ndb-timeline .ndb-timeline-col-20 { width: 20%; }
.ndb-timeline .ndb-timeline-col-80 { width: 80%; }
.ndb-timeline .ndb-timeline-row-divider > .elementor-element-populated {
  border-style: solid;
  border-width: 0 0 1px 0;
}

/* ⚠ 底色掛在「欄內容容器」（.elementor-widget-wrap）而不是「欄」本身，跟原站一致。
   桌機版兩者範圍相同、看不出差別，但手機版的 wrap 左右各有 1px 外距（見下方
   @media 區塊），掛在欄上會多塗到那 1px，藍色塊左右各寬 1px。 */
.ndb-timeline .ndb-timeline-header-col > .elementor-widget-wrap,
.ndb-timeline .ndb-timeline-header-col-mobile > .elementor-widget-wrap {
  background-color: #3870D3;
}
/* 表頭列兩欄／資料列的年份欄，欄內容要水平＋垂直都置中：資料列年份欄
   尤其重要——同一年度事件筆數不同、整列高度不一，年份欄本身內容矮，
   沒有這條會貼齊欄頂而不是置中在整列高度中間。內容欄（條列文字）原站
   沒有這個設定，維持預設頂端對齊，不能連內容欄一起套。
   ⚠ 真正決定上下位置的是 align-content，不是 align-items：Elementor 的
   `.elementor-widget-wrap` 本身全站預設 `flex-wrap:wrap`（見
   elementor.frontend.min.css），一旦 flex-wrap 不是 nowrap，容器內即使
   只有一個項目也算「一行」，align-items 只管「項目在該行內」怎麼擺，
   真正決定「這一行在容器裡靠上/置中/靠下」的是 align-content（預設
   flex-start）。第一次只補了 align-items/justify-content，align-content
   維持預設 flex-start，看起來就是貼齊欄頂，這是本輪才抓到的教訓。 */
.ndb-timeline .ndb-timeline-header-col > .elementor-widget-wrap,
.ndb-timeline .ndb-timeline-header-col-mobile > .elementor-widget-wrap,
.ndb-timeline .ndb-timeline-heading-col > .elementor-widget-wrap {
  align-content: center;
  align-items: center;
  justify-content: center;
}
/* 表頭列文字本身行高比色塊實際想要的高度高，原站用 -40px 負值下邊界把
   色塊「收」回原本的高度（只有桌機版才需要，手機版沒有這條） */
.ndb-timeline .ndb-timeline-header-label .elementor-widget-container {
  margin-bottom: -40px;
}
.ndb-timeline .ndb-timeline-header-label p {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 10px;
  color: #FFFFFF;
}
.ndb-timeline .ndb-timeline-header-label-mobile p {
  text-align: center;
  font-weight: 400;
  color: #FFFFFF;
}
.ndb-timeline .ndb-timeline-heading {
  text-align: center;
}
.ndb-timeline .ndb-timeline-heading .elementor-heading-title {
  font-size: 30px;
  font-weight: 400;
  color: #000000;
}
.ndb-timeline .ndb-timeline-list {
  --e-icon-list-icon-size: 14px;
  --e-icon-list-icon-align: right;
  --e-icon-list-icon-margin: 0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);
  --icon-vertical-align: flex-start;
  --icon-vertical-offset: 8px;
  /* ⚠ 使用者確認過的取捨：原站條列文字容器右邊有 1px padding、條列
     widget 本身寬度是 99.871%（不是 100%）——都是 Elementor 編輯器對
     這個 widget 調過寬度控制項留下的歷史殘留數字，不是刻意設計，且
     不是每個年度的原始 widget 都有（同一頁 10 個桌機條列 widget，只有
     部分帶這個值，沒有規律可循）。這兩個值唯一的實際效果，是中文密排
     文字在寬度剛好卡在邊界的極少數行，斷行位置會跟原站差一個字（實測
     這一頁 24 筆事件裡只有 2 筆受影響），以及多筆事件間分隔線右端有
     不到 2px、肉眼看不出來的位移；不影響列高、圖示位置，也不會外溢到
     其他區塊。使用者評估這個差異可以接受，故意簡化成乾淨的整數
     （`100%`／`0`），不追求連這種編輯器操作殘留數字都要複製。
     ⚠ 之後如果又有人回報「跟原站斷行位置對不上」，這就是原因，不是
     新的迴歸；除非又要追求逐字元跟原站一致，否則不需要修。 */
  width: 100%;
  max-width: 100%;
}
.ndb-timeline .ndb-timeline-list .elementor-widget-container {
  padding: 0;
}
.ndb-timeline .ndb-timeline-list .elementor-icon-list-item > .elementor-icon-list-text {
  font-size: 16px;
  font-weight: 500;
}
/* ⚠ 這條看起來像沒作用（位移 0、模糊 0 的陰影），實際上會讓文字看起來「深一點」：
   0 位移 0 模糊的 text-shadow 會在字形正下方疊一層 30% 黑的同形狀色塊，字身被
   文字本體蓋住，但反鋸齒邊緣那圈半透明像素會被墊深，整體視覺效果等同輕微加粗／
   加深。原站每一個桌機條列 widget 都有這條 per-id 規則（history 三語 + en 版
   awards 全部都有，圖片版的 zh/cn awards 沒有），漏掉的話使用者會回報「文字顏色
   好像淡了一點」——實測就是這麼被抓到的，色碼其實完全一樣，差的是這層陰影。 */
.ndb-timeline .ndb-timeline-list .elementor-icon-list-text {
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
/* 同一年度有多筆事件時，項目之間的分隔線（手機版沒有這條） */
.ndb-timeline .ndb-timeline-list .elementor-icon-list-item:not(:last-child):after {
  content: "";
  border-block-start-style: solid;
  border-block-start-width: 1px;
  border-color: #A27A7A;
}
.ndb-timeline .ndb-timeline-year-mobile p {
  font-weight: 400;
  color: #7C7B7B;
}
.ndb-timeline .ndb-timeline-list-mobile {
  --e-icon-list-icon-size: 14px;
  --icon-vertical-align: flex-start;
  --icon-vertical-offset: 8px;
}
.ndb-timeline .ndb-timeline-list-mobile .elementor-icon-list-item > .elementor-icon-list-text {
  font-weight: 400;
  color: #7C7B7B;
}

/* ---- 手機版專屬（原站這批規則全部包在 @media(max-width:767px) 裡）------------
   ⚠ 這一段是「量測方法本身」差點漏掉的一批：手機版區塊在桌機寬度下是
   display:none，但 getComputedStyle 照樣讀得到值——讀到的卻是「媒體查詢沒生效
   時」的值（例如原站的 border-width 會讀成瀏覽器預設的 medium=3px、text-align
   讀成 start），拿去跟新站比會得到一整排「看起來有差、其實是量錯」的假差異，
   反過來也會把真正的差異蓋掉。手機版的規則一律要把視窗調到 767px 以下、而且
   重新載入頁面之後再量（`resize_window` 不會觸發 Elementor 的版寬 JS 重算，
   見上面第五輪的教訓）。 */
@media (max-width: 767px) {
  /* 手機版 12 個 text-editor（10 個年份 + 2 個表頭標籤）共用同一組設定。
     margin-bottom:-26px 跟桌機表頭的 -40px 是同一種手法：文字行高比視覺上想要
     的區塊高度高，用負邊界把區塊收回來，缺這條每一列都會多出 26px。 */
  .ndb-timeline .ndb-timeline-year-mobile,
  .ndb-timeline .ndb-timeline-header-label-mobile {
    text-align: center;
    font-size: 16px;
  }
  .ndb-timeline .ndb-timeline-year-mobile > .elementor-widget-container,
  .ndb-timeline .ndb-timeline-header-label-mobile > .elementor-widget-container {
    margin: 0 0 -26px 0;
    padding: 0;
  }
  /* 手機版兩欄的欄內容容器：原站 padding 歸零（Elementor 預設是 10px），
     年份欄左右各留 1px、內容欄往左貼 -1px（讓兩欄的 1px 分隔線疊在一起，
     不會變成 2px）；表頭列的內容欄則是左右各 1px，跟資料列不同。 */
  .ndb-timeline .ndb-timeline-col-20 > .elementor-widget-wrap,
  .ndb-timeline .ndb-timeline-col-80 > .elementor-widget-wrap {
    padding: 0;
  }
  .ndb-timeline .ndb-timeline-col-20 > .elementor-widget-wrap {
    text-align: center;
    margin: 0 1px;
  }
  .ndb-timeline .ndb-timeline-col-80 > .elementor-widget-wrap {
    margin: 0 0 0 -1px;
  }
  .ndb-timeline .ndb-timeline-header-col-mobile.ndb-timeline-col-80 > .elementor-widget-wrap {
    margin: 0 1px;
  }
  /* 手機版「內容欄」也要垂直置中（桌機版刻意只有年份欄置中、內容欄靠上，
     這是原站桌機/手機本來就不同的地方，不能把桌機那套直接套過來）；
     水平方向則維持靠左，所以表頭列內容欄要蓋掉上面共用的 justify-content:center。 */
  .ndb-timeline .ndb-timeline-col-80 > .elementor-widget-wrap {
    align-content: center;
    align-items: center;
    justify-content: flex-start;
  }
  /* 只有資料列的內容欄有 z-index:0，表頭列那欄沒有（同樣是原站的不對稱，
     照抄就好；z-index:0 會建立堆疊環境，多套到表頭會跟原站不一致）。 */
  .ndb-timeline .ndb-timeline-col-80:not(.ndb-timeline-header-col-mobile) {
    z-index: 0;
  }
  /* ⚠ 手機表頭「只有第二欄（內容欄）的標籤」有 text-shadow，第一欄（年份欄）沒有
     ——這是原站編輯器留下的不對稱，不是我們漏抄。已逐語言/逐頁確認過方向一致：
     zh「大事紀要」、en「CONTENT」/「AWARDS」、cn「大事纪要」都是第二欄那個，
     年份欄那個一律沒有，所以可以安心用欄位選擇器區分。 */
  .ndb-timeline .ndb-timeline-header-col-mobile.ndb-timeline-col-80 .ndb-timeline-header-label-mobile p {
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
  }
  .ndb-timeline .ndb-timeline-list-mobile > .elementor-widget-container {
    margin: 0 3px 0 5px;
  }
  .ndb-timeline .ndb-timeline-list-mobile .elementor-icon-list-item > .elementor-icon-list-text {
    font-size: 16px;
  }
}

/* 分頁按鈕（« ‹ [頁碼] › »）原站每顆按鈕都有 width:auto;max-width:auto
   的 per-id 覆蓋，蓋掉 kit 層級預設的 `.elementor-element{width:100%}`。
   跟年度區塊同樣的問題：按鈕是重新產生的、id 全新，原規則對不上，
   於是每顆按鈕都變成 100% 寬（撐滿整列），widget-wrap 的 flex-wrap:wrap
   在「每個項目都接近滿版寬」的狀況下，5 顆按鈕全部各自換行，視覺上就是
   排版變成直的一排（使用者截圖抓到的症狀）。這裡直接用 class 選擇器
   （`.elementor-widget-button` 本身在按鈕標記上已經有這個 class，不需要
   額外掛 marker class）補回 auto 寬度即可，不需要逐顆按鈕 id 比對。 */
.ndb-timeline .elementor-widget-button {
  width: auto;
  max-width: auto;
  align-self: center;
}
/* 按鈕之間的間距（原站每顆按鈕的 widget-container 右邊有 4px margin）、
   以及整排按鈕在欄內要水平＋垂直置中（原站按鈕列的欄同樣是
   align-content/align-items/justify-content 三個都設 center，跟表頭列／
   年份欄是同一套機制）——這兩條跟寬度一樣，都是按鈕重新產生後 id 對不上
   原規則才漏掉的，不是新問題，是同一輪修 width:auto 時漏看的另外兩條。 */
.ndb-timeline .elementor-widget-button > .elementor-widget-container {
  margin: 0 4px 0 0;
}
.ndb-timeline .ndb-timeline-nav-col > .elementor-widget-wrap {
  align-content: center;
  align-items: center;
  justify-content: center;
}

/* 字型依語言（跟原站各語言版本的實測值一致，非本次新決定） */
.ndb-timeline-lang-zh .ndb-timeline-header-label p,
.ndb-timeline-lang-zh .ndb-timeline-header-label-mobile p,
.ndb-timeline-lang-zh .ndb-timeline-heading .elementor-heading-title,
.ndb-timeline-lang-zh .ndb-timeline-list .elementor-icon-list-item > .elementor-icon-list-text,
.ndb-timeline-lang-zh .ndb-timeline-year-mobile p,
.ndb-timeline-lang-zh .ndb-timeline-list-mobile .elementor-icon-list-item > .elementor-icon-list-text {
  font-family: "Noto Sans TC", Noto Sans Symbols;
}
.ndb-timeline-lang-cn .ndb-timeline-header-label p,
.ndb-timeline-lang-cn .ndb-timeline-header-label-mobile p,
.ndb-timeline-lang-cn .ndb-timeline-heading .elementor-heading-title,
.ndb-timeline-lang-cn .ndb-timeline-list .elementor-icon-list-item > .elementor-icon-list-text,
.ndb-timeline-lang-cn .ndb-timeline-year-mobile p,
.ndb-timeline-lang-cn .ndb-timeline-list-mobile .elementor-icon-list-item > .elementor-icon-list-text {
  font-family: "Noto Sans SC", Noto Sans Symbols;
}
.ndb-timeline-lang-en .ndb-timeline-header-label p,
.ndb-timeline-lang-en .ndb-timeline-header-label-mobile p,
.ndb-timeline-lang-en .ndb-timeline-heading .elementor-heading-title,
.ndb-timeline-lang-en .ndb-timeline-list .elementor-icon-list-item > .elementor-icon-list-text,
.ndb-timeline-lang-en .ndb-timeline-year-mobile p,
.ndb-timeline-lang-en .ndb-timeline-list-mobile .elementor-icon-list-item > .elementor-icon-list-text {
  font-family: "Noto Sans Symbols", Noto Sans Symbols;
}