/* cps-about-page.css
 * 一般內頁：關於國際橡塑展等（.about-page）
 * 間距對齊 Module: Text and Image Block (Example 2) / tib2（CoDesign）
 * 全部掛在 .about-page 下，不改 cmscss_v2，亦不與 cps-news-page.css 共用選擇器
 * 預覽頁：../../css/cps-about-page.css
 * CMS 上線請同步上傳至 CDN：CPS27/Files/css/cps-about-page.css
 */

/* Tab 橙條 → 首個標題：統一 50px（與 v2 .tib2-panel 一致） */
.about-page .tib2-panel {
  padding-top: 50px;
}

/* 預設塊距跟 tib2（標題 ↔ 活動資訊等，不要 50） */
.about-page .tib2-panel > *:not(:last-child) {
  margin-bottom: 30px;
}

/* 主辦／贊助／支持／十六大等：僅非首塊時與上一塊 50px（展品範圍等 Tab 首塊勿再疊 50） */
.about-page .tib2-panel > .tib2-intro:has(> .text-content):not(:first-child),
.about-page .tib2-panel > .about-theme-zones:not(:first-child) {
  margin-top: 50px;
}

/* 標題區／主辦贊助支持：標題 ↔ 下方內容統一 25px（覆蓋 tib2-intro 預設 gap 30） */
.about-page .tib2-panel > .tib2-intro:has(> .font-h2 + .text-lg),
.about-page .tib2-panel > .tib2-intro:has(> .event-info-list),
.about-page .tib2-panel > .tib2-intro:has(> .font-h2):has(> .text-content) {
  gap: 25px;
}

.about-page .tib2-panel > .tib2-intro:has(> .font-h2 + .text-lg):not(:last-child),
.about-page .tib2-panel > .tib2-intro:has(> .event-info-list):not(:last-child) {
  margin-bottom: 25px;
}

.about-page .tib2-intro > .font-h2 {
  margin: 0;
}

.about-page .text-image-container > ul {
  flex: 1 1 0;
  min-width: 0;
}

/* 正文段落空一行：對齊 CoDesign / .text-content */
.about-page .text-content p + p {
  margin-top: 23.4px;
}

/* 十六大／展品範圍／歷史等主題區：標題↔子標↔列表，統一 25px */
.about-page .about-theme-zones {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.about-page .about-theme-zones > .font-h2,
.about-page .about-theme-zones > .font-h3,
.about-page .about-theme-zones > .text-lg {
  margin: 0;
}

.about-page .about-theme-sub {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.about-page .about-theme-sub > .font-h3 {
  margin: 0;
}

/* 子塊內連續正文：淨間距 10px（抵消 flex gap 25 → -15）；標題↔首段仍用 gap 25 */
.about-page .about-theme-sub > p {
  margin: 0;
}

.about-page .about-theme-sub > p + p {
  margin-top: -15px;
}

/* UFI：小標 ↔ Logo ↔ 正文皆不要空行（抵消 flex gap 25） */
.about-page .about-theme-sub > .font-h3 + p:has(> .about-ufi-logo) {
  margin-top: -25px;
}

.about-page .about-theme-sub > p:has(> .about-ufi-logo) + p {
  margin-top: -25px;
}

.about-page .about-ufi-logo {
  display: block;
  height: 70px;
  width: auto;
  max-width: 100%;
}

/* 頁頂標題「關於國際橡塑展 / About CHINAPLAS」隱藏（只影響含 .about-page 的內頁） */
.page-container:has(> .about-page) > .font-h2.my-b-xl {
  display: none;
}

/* event-info 包在 tib2-intro 裡，對不上金樣的直屬選擇器；單行與圖示垂直置中 */
.about-page .event-info-item {
  align-items: center;
}

/* 活動資訊改加粗版（覆蓋 v2 Event Info Regular） */
.about-page .event-info-list .event-info-content,
.about-page .event-info-list .event-info-content p,
.about-page .event-info-list .event-info-content .text-lg {
  font-weight: 700;
}

/* 本頁不需要 tab 固定置頂；保留 relative 讓圓角偽元素定位正常 */
.about-page .psteps-tabs-bar {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px; /* 四個 Tab 間距一律 20，避免文案長短造成視覺不均 */
}

/* 強制四欄等分（width:0 + flex:1），間距只靠 gap，後面幾個不會忽大忽小 */
.about-page .psteps-tabs-bar > .psteps-tab {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 僅點列行距：Adsale / 協會等 li（用戶確認 10px）；其餘走 CoDesign */
.about-page ul li + li {
  margin-top: 10px;
}

@media (max-width: 1350px) {
  /* 移動端：模組間 40px；小模組內部 20px */
  .about-page .tib2-panel {
    padding-top: 40px;
  }

  .about-page .tib2-panel > *:not(:last-child) {
    margin-bottom: 20px;
  }

  /*
   * 大模組 40：參觀說明→主辦、主辦→贊助、主題區等
   * （清掉上一塊 mb，只留單一 mt 40，避免疊加）
   */
  .about-page .tib2-panel > .tib2-intro:has(> .event-info-list):not(:last-child),
  .about-page .tib2-panel > .tib2-intro:has(> .text-content):not(:last-child) {
    margin-bottom: 0;
  }

  .about-page .tib2-panel > .tib2-intro:has(> .text-content):not(:first-child),
  .about-page .tib2-panel > .tib2-intro:has(> .event-info-list) + .tib2-intro,
  .about-page .tib2-panel > .about-theme-zones:not(:first-child) {
    margin-top: 40px;
  }

  /* 小模組 20：標題↔副標↔活動資訊內、標題↔列表 */
  .about-page .tib2-panel > .tib2-intro,
  .about-page .tib2-panel > .tib2-intro:has(> .font-h2 + .text-lg),
  .about-page .tib2-panel > .tib2-intro:has(> .event-info-list),
  .about-page .tib2-panel > .tib2-intro:has(> .font-h2):has(> .text-content) {
    gap: 20px;
  }

  /* 展名介紹 → 活動資訊：小模組 20 */
  .about-page .tib2-panel > .tib2-intro:has(> .font-h2 + .text-lg):not(:last-child) {
    margin-bottom: 0;
  }

  .about-page .tib2-panel > .tib2-intro:has(> .font-h2 + .text-lg) + .tib2-intro {
    margin-top: 20px;
  }

  .about-page .about-theme-zones,
  .about-page .about-theme-sub {
    gap: 20px;
  }

  /* 連續正文淨間距仍 10px（抵消 flex gap 20 → -10） */
  .about-page .about-theme-sub > p + p {
    margin-top: -10px;
  }

  .about-page .about-theme-sub > .font-h3 + p:has(> .about-ufi-logo),
  .about-page .about-theme-sub > p:has(> .about-ufi-logo) + p {
    margin-top: -20px;
  }

  .about-page .text-content p + p {
    margin-top: 20.8px;
  }

  /* 移動端 Tab 改回直排，勿沿用桌面等分 */
  .about-page .psteps-tabs-bar {
    flex-direction: column;
    gap: 10px;
  }

  .about-page .psteps-tabs-bar > .psteps-tab {
    flex: none;
    width: 100%;
  }

  /* 本頁手機版圖文間距；不寫進 cmscss_v2，避免影響其他頁 */
  .about-page .text-image-container,
  .about-page .text-image-container.is-reverse {
    gap: 10px;
  }
}