/* ============================================
   內頁通用版型 — Figma node 13:209
   ============================================ */

.content-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.content-page__header {
  position: absolute;
  left: 96px;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  z-index: 2;
}

.content-page__title,
.goals-page__title,
.ia-page__title,
.exec-page__title,
.mockup-page__title {
  margin: 0;
  font-family: var(--slide-page-title-font);
  font-size: var(--slide-page-title-size);
  font-weight: var(--slide-page-title-weight);
  line-height: 60px;
  letter-spacing: var(--slide-page-title-spacing);
  color: var(--slide-page-title-color);
  white-space: nowrap;
}

.content-page__title-line,
.goals-page__title-line,
.ia-page__title-line,
.exec-page__title-line,
.mockup-page__title-line {
  width: var(--slide-page-title-line-width);
  height: 0;
  margin: 0;
  border: none;
  border-top: var(--slide-page-title-line-height) solid var(--cover-red, #e22d2a);
}

.content-page__body {
  position: absolute;
  left: 100px;
  top: 232px;
  width: 1720px;
  height: 698px;
  z-index: 2;
}

/* ============================================
   內頁標題區 — 以 ia-page（前台網站架構）為標準（不含作品頁）
   ============================================ */

:root {
  /* 內頁主標題 — 以「專案目標」(.goals-page__title) 為全站標準 */
  --slide-page-title-font: 'Noto Sans TC', sans-serif;
  --slide-page-title-size: 50px;
  --slide-page-title-weight: 500;
  --slide-page-title-spacing: 7.5px;
  --slide-page-title-color: #333;
  --slide-page-title-line-width: 72px;
  --slide-page-title-line-height: 6px;

  --content-header-top: 86px;
  --content-header-gap: 34px;
  --content-subtitle-size: 24px;
  --content-subtitle-weight: 400;
  --content-subtitle-lh: 1.5;
  --content-subtitle-spacing: 0.5px;
  --content-subtitle-color: #333333;
  /* 標題 + 分隔線 + 副標題後，至主內容區的標準間距 */
  --content-body-top: 268px;
  --content-body-top-spaced: 300px;
  --content-body-top-with-extra: 318px;
}

.ia-page__header,
.goals-page__header,
.exec-page__header {
  top: var(--content-header-top);
  gap: var(--content-header-gap);
}

.ia-page__intro,
.goals-page__intro,
.exec-page__intro {
  margin: 0;
  max-width: 1720px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: var(--content-subtitle-size);
  font-weight: var(--content-subtitle-weight);
  line-height: var(--content-subtitle-lh);
  letter-spacing: var(--content-subtitle-spacing);
  color: var(--content-subtitle-color);
}

/* ============================================
   專案目標 — Figma node 24:559
   ============================================ */

.goals-page__header {
  position: absolute;
  left: 100px;
  display: flex;
  flex-direction: column;
  width: 1720px;
  z-index: 2;
}

.goals-page__diagram {
  z-index: 1;
}

.content-page--goals .goals-page__diagram {
  flex: 0 0 auto;
  width: 80%;
  height: auto;
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

/* ============================================
   內頁 flex 版面 — 說明與主內容分離（48px gap）
   ============================================ */

.content-page--goals,
.content-page--strategy,
.content-page--ia,
.content-page--scope {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 86px 96px var(--slide-footer-clearance);
  box-sizing: border-box;
  gap: 48px;
}

.content-page--goals .goals-page__header,
.content-page--strategy .goals-page__header,
.content-page--ia .ia-page__header,
.content-page--scope .exec-page__header {
  position: static;
  width: auto;
  flex-shrink: 0;
}

/* ============================================
   專案執行策略 — 三欄 ESG 策略
   ============================================ */

.strategy-page__body {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
}

.strategy-page__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  align-items: stretch;
}

.strategy-col {
  display: grid;
  grid-template-rows: 132px 40px minmax(220px, 1fr);
  align-items: center;
  padding: 28px 24px 32px;
  background: rgba(2, 21, 38, 0.04);
  border-radius: 16px;
}

.strategy-col__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 20px 16px;
  border: 2px solid var(--cover-red, #e22d2a);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.strategy-col__label,
.strategy-col__headline,
.strategy-col__box p {
  margin: 0;
  font-family: 'Noto Sans TC', sans-serif;
  color: #333;
}

.strategy-col__label {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1.1px;
  color: rgba(51, 51, 51, 0.72);
}

.strategy-col__headline {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 1.4px;
}

.strategy-col__arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--cover-red, #e22d2a);
}

.strategy-col__list {
  margin: 0;
  padding: 4px 0 0 28px;
  list-style: disc;
  align-self: start;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 1.1px;
  color: #333;
}

.strategy-col__list li {
  margin-bottom: 10px;
}

.strategy-col__list li:last-child {
  margin-bottom: 0;
}

.strategy-col__list li::marker {
  color: var(--cover-red, #e22d2a);
}

.strategy-col__list strong {
  font-weight: 700;
  color: var(--cover-red, #e22d2a);
}

/* 服務頁依 Figma Slides 3:172 的照片卡片；只作用於服務頁。 */
.content-page--service { --anim-ease: cubic-bezier(.22,1,.36,1); --content-subtitle-size: 32px; --content-subtitle-lh: 1.5; gap: 0; }
/* 卡片依內容自然等高，置中於副標與頁尾安全區之間。 */
.content-page--service .strategy-page__body { align-items: center; }
.content-page--service .strategy-page__columns { width: 1720px; margin: 0 auto; gap: 30px; }
.content-page--service .strategy-col { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.service-card__image { display: block; width: 100%; height: 300px; object-fit: cover; flex-shrink: 0; }
.service-card__content { display: flex; flex-direction: column; gap: 12px; padding: 28px 38px; }
.service-card__title { margin: 0; font-family: 'Noto Sans TC', sans-serif; font-size: 30px; font-weight: 700; line-height: 46px; letter-spacing: 1.5px; color: #333; }
.service-card__number { color: var(--cover-red, #e22d2a); margin-right: 10px; }
.service-card__body { margin: 0; font-family: 'Noto Sans TC', sans-serif; font-size: 24px; font-weight: 500; line-height: 40px; letter-spacing: 1.2px; color: rgba(51,51,51,.75); }

/* 培訓客戶卡：以名稱排版作為主視覺，不冒用商標或虛構課程照片。 */
.training-client__visual { height: 300px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between; background: #ededed; color: #292929; }
.training-client__visual span { font-size: 68px; line-height: 1; font-weight: 700; color: var(--cover-red); }
.training-client__visual strong { font-size: 52px; line-height: 1.3; letter-spacing: 3px; }
.content-page--training-clients .strategy-col:nth-child(2) .training-client__visual { background: #292929; color: #fff; }
.content-page--training-clients .service-card__content { padding-top: 32px; padding-bottom: 32px; }

/* 培訓客戶使用來源 Logo 原色、等比例置中，取代上方編號與文字。 */
.content-page--training-clients .training-client__visual { align-items: center; justify-content: center; background: #fff; }
.content-page--training-clients .strategy-col:first-child .training-client__visual { background: #292929; }
.content-page--training-clients .strategy-col:nth-child(2) .training-client__visual { background: #232323; }
.training-client__logo { display: block; width: 360px; max-width: 100%; height: 180px; object-fit: contain; }

/* 培訓客戶：官方標誌原色與素材實測底色，月份取代重複課程名稱。 */
.content-page--training-clients .strategy-col:nth-child(2) .training-client__visual { background: #252525; }
.content-page--training-clients .strategy-col:nth-child(2) .training-client__logo { width: 400px; height: 240px; }
.content-page--training-clients .strategy-col:nth-child(3) .training-client__visual { background: #9f0010; }
.content-page--training-clients .strategy-col:nth-child(3) .training-client__logo { width: 360px; height: auto; }
.content-page--training-clients .service-card__title { font-size: 36px; line-height: 50px; }
.content-page--training-clients .service-card__content { gap: 14px; }

/* 官網原始 SVG 無底色，以白色字標置於卡片底色上。 */
.content-page--training-clients .strategy-col:nth-child(2) .training-client__logo { width: 320px; height: auto; }

/* UXI 等比例放大約 14%，平衡三張客戶卡的標誌份量。 */
.content-page--training-clients .strategy-col:first-child .training-client__logo { width: 410px; height: 205px; }