/* =========================================================
   shared-typography.css
   用途：改版頁面共用標題三層樣式 + 統一段落間距
   適用：關於華城 / 投資人專區 / 華城技術 / 產品介紹…（逐步擴充）

   載入順序：
     main.css → menu.css → slide.css → shared-sidebar.css
     → [shared-subnav.css] → shared-typography.css → {unit}-content.css

   頁面標（一般）：.section-main .news-header-wrap > h2.section-title
   頁面標（次選單）：h2.subnav-title（見 shared-subnav.css）
   大標：h3.about-block-title > span.line
   中標：.about-page / .tech-page 內 h3:not(.about-block-title) > span.line

   覆蓋 main.css → article.css 舊版 .module-article h3（黃底線、大字距）
========================================================= */

/* =========================================================
   Design tokens
========================================================= */
:root {
  --title-primary:      var(--about-primary, var(--tech-primary, var(--side-primary, #0c596f)));
  --title-primary-deep: var(--about-primary-deep, var(--tech-primary-deep, var(--side-primary-deep, #083d4d)));
  --title-accent:       var(--about-accent, var(--tech-accent, var(--side-accent, #19a7b8)));
  --title-mid-color:    #1e293b;
  --title-line:         rgba(12, 89, 111, 0.12);

  /* 標題／段落間距（4px 倍數，全站統一） */
  --title-gap-page:         32px; /* 頁面標 → 內容區 / Tab → 內容 */
  --title-gap-block-after:  16px; /* 大標 → 內文 */
  --title-gap-block-before: 40px; /* 同頁第二個起大標上方 */
  --title-gap-mid-before:   28px; /* 中標上方（同區塊內） */
  --title-gap-mid-after:    12px; /* 中標 → 段落 */
  --title-gap-mid-tight:    12px; /* 大標直後第一個中標 */
  --title-gap-section:      48px; /* 主要區塊分隔 */
  --title-gap-para:         16px; /* 段落間距 */
}

/* =========================================================
   頁面標（.news-header-wrap + .section-title）
========================================================= */
.news-header-wrap {
  width: 100%;
  margin-bottom: var(--title-gap-page) !important;
}

.section-main .news-header-wrap .section-title {
  margin: 0;
  color: var(--title-primary-deep);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-bottom: 0;
  padding-bottom: 14px;
  position: relative;
  display: block;
  text-align: left;
}

.section-main .news-header-wrap .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, var(--title-primary), var(--title-accent));
  border-radius: 999px;
}

/* 次選單：Tab 列 → 內容區（標題→Tab 維持 18px，見 shared-subnav.css） */
.subnav {
  margin-bottom: var(--title-gap-page);
}

/* =========================================================
   大標（.about-block-title）— 左側漸層色條
========================================================= */
.about-block-title,
.about-page h3.about-block-title,
.tech-page h3.about-block-title {
  margin: 0 0 var(--title-gap-block-after) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--title-primary) !important;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

.about-block-title .line,
.about-page h3.about-block-title .line,
.tech-page h3.about-block-title .line {
  position: relative;
  display: inline-block;
  padding-left: 14px;
  padding-bottom: 0;
}

.about-block-title .line::before,
.about-page h3.about-block-title .line::before,
.tech-page h3.about-block-title .line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  background: linear-gradient(180deg, var(--title-primary), var(--title-accent));
  border-radius: 999px;
}

.about-block-title .line::after,
.about-page h3.about-block-title .line::after,
.tech-page h3.about-block-title .line::after {
  display: none;
}

/* 第一個大標：緊接頁面標／次選單，不加頂部間距 */
.section-main > .news-header-wrap ~ .about-page > .about-section:first-child .about-block-title,
.section-main > .news-header-wrap ~ .about-page > .about-block-title:first-child,
.section-main > .news-header-wrap ~ .about-ehs-content > .cause-block:first-child .about-block-title,
.section-main > .news-header-wrap ~ .about-media-content > section:first-child .about-block-title,
.section-main > .news-header-wrap ~ .about-sigma-content .about-section:first-child .about-block-title,
.section-main > .news-header-wrap ~ * .about-block-title:first-child,
.section-main > .subnav ~ * > .about-block-title:first-child,
.section-main > .subnav ~ * .tech-page > .tech-section:first-child .about-block-title,
.concept-panel.active .module-article > .about-block-title:first-child,
.concept-panel.active > .container-xxl > .container > .about-block-title:first-child {
  margin-top: 0 !important;
}

/* 同頁連續大標：區塊前留距 */
.about-block-title ~ .about-block-title {
  margin-top: var(--title-gap-block-before) !important;
}

/* =========================================================
   中標（.about-page / .tech-page 內一般 h3）
========================================================= */
.about-page h3:not(.about-block-title),
.tech-page h3:not(.about-block-title) {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--title-mid-color);
  margin-top: var(--title-gap-mid-before);
  margin-bottom: var(--title-gap-mid-after);
}

.about-block-title + h3:not(.about-block-title),
.tech-page .about-block-title + h3:not(.about-block-title) {
  margin-top: var(--title-gap-mid-tight) !important;
}

.about-page h3:not(.about-block-title) .line,
.tech-page h3:not(.about-block-title) .line {
  position: relative;
  padding-left: 0.75rem;
}

.about-page h3:not(.about-block-title) .line::before,
.tech-page h3:not(.about-block-title) .line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: var(--title-primary);
  border-radius: 999px;
}

/* =========================================================
   區塊分隔 & 內文段落
========================================================= */
.section-main hr.section-separator {
  margin: var(--title-gap-section) 0;
  border: 0;
  border-top: 1px solid var(--title-line);
  opacity: 1;
}

.section-main .about-page .about-section + .about-section,
.section-main .tech-page .tech-section + .tech-section {
  margin-top: var(--title-gap-section);
}

.section-main .about-page p,
.section-main .about-ehs-content p,
.section-main .about-media-content p,
.section-main .about-sigma-content p,
.section-main .concept-panel p,
.section-main .tech-page p {
  margin-top: 0;
  margin-bottom: var(--title-gap-para);
  line-height: 1.75;
}

.section-main .about-page p:last-child,
.section-main .about-ehs-content p:last-child,
.section-main .about-media-content p:last-child,
.section-main .about-sigma-content p:last-child,
.section-main .concept-panel p:last-child,
.section-main .tech-page p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   覆蓋 article.css 舊版 .module-article h3
========================================================= */
.module-article h3.about-block-title,
.about-concept-page .module-article h3.about-block-title {
  margin: 0 0 var(--title-gap-block-after) !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--title-primary) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.45 !important;
}

.module-article h3.about-block-title .line,
.module-article h3.about-block-title span.line,
.about-concept-page .module-article h3.about-block-title .line,
.about-concept-page .module-article h3.about-block-title span.line {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
}

.module-article h3.about-block-title .line::before,
.about-concept-page .module-article h3.about-block-title .line::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  background: linear-gradient(180deg, var(--title-primary), var(--title-accent));
  border-radius: 999px;
}

.module-article h3.about-block-title .line::after,
.about-concept-page .module-article h3.about-block-title .line::after {
  display: none !important;
}

.module-article h3:not(.about-block-title) {
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: normal !important;
  margin-top: var(--title-gap-mid-before);
  margin-bottom: var(--title-gap-mid-after);
}

.module-article h3.about-block-title + h3:not(.about-block-title),
.about-concept-page .module-article h3.about-block-title + h3:not(.about-block-title) {
  margin-top: var(--title-gap-mid-tight) !important;
}

.module-article h3:not(.about-block-title) .line,
.module-article h3:not(.about-block-title) span.line {
  border-bottom: none !important;
  padding-bottom: 0;
}

@media (max-width: 767.98px) {
  :root {
    --title-gap-page: 24px;
    --title-gap-block-before: 32px;
    --title-gap-mid-before: 24px;
    --title-gap-section: 36px;
  }

  .section-main .news-header-wrap .section-title {
    font-size: 1.65rem;
  }
}