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

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

.content-page__header {
  position: absolute;
  left: 100px;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  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: normal;
  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 Serif TC', serif;
  --slide-page-title-size: 50px;
  --slide-page-title-weight: 900;
  --slide-page-title-spacing: 4px;
  --slide-page-title-color: #333;
  --slide-page-title-line-width: 60px;
  --slide-page-title-line-height: 7px;

  --content-header-top: 80px;
  --content-header-gap: 30px;
  --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: 'Nata Sans', 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: 80px 100px 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: 'Nata Sans', 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: 'Nata Sans', 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);
}