/* =========================================================
   about03-concept.css
   載入：shared-typography.css 之後
   頁面：about_concept.aspx
========================================================= */

/* ==========================
   上半：企業理念（使命／核心價值／四大考驗）
   ========================== */

/* 小圓角標籤：企業理念與遠景 */
.about-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.8);
  color: #ffffff;
}

/* 使命文字 */
.about-mission {
  font-weight: 500;
}

/* 核心價值 tag 列表 */
.about-tag-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about-tag-list li {
  font-size: 1.1rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

/* 區塊外圍間距 */
.about-section {
  margin-top: 3rem;
}

/* ---- 四大考驗卡片 ---- */

.about-four-tests {
  position: relative;
}

.about-card {
  position: relative;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.75rem 1.5rem;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.about-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.about-card p {
  margin-bottom: 0;
  color: #4b5563;
}

.about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.about-card:hover::before {
  opacity: 1;
}

/* ---- 四大考驗歷史 Accordion ---- */

.about-history {
  margin-top: 2.5rem;
}

.about-history-header p {
  color: #6b7280;
}

.about-accordion .accordion-button {
  border-radius: 0.75rem;
}

.about-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #0d6efd, #00b4d8);
  color: #ffffff;
}

.about-accordion .accordion-button:focus {
  box-shadow: none;
}

.about-accordion .accordion-body {
  background: #ffffff;
  border-radius: 0 0 0.75rem 0.75rem;
}

/* ---- 區塊分隔線（企業理念 vs 理念願景） ---- */

.section-separator {
  border: 0;
  height: 1px;
  margin: 3rem auto;
  max-width: 1040px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(148, 163, 184, 0.7),
    transparent
  );
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

/* ==========================
   下半：理念願景 Vision 區塊
   ========================== */

.vision-block {
  position: relative;
  padding-bottom: 3rem;
}

/* ---- 經營團隊卡片列 ---- */

.vision-team-row {
  margin-bottom: 2.5rem;
}

.vision-team-card {
  background: #ffffff;
  border-radius: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* 經營團隊照片放大 */
.vision-team-card img {
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 4px solid #f3f4f6;
}

.vision-team-card .card-text small {
  color: #4b5563;
}

.vision-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(59, 130, 246, 0.7);
}

/* ---- 理念願景內文 ---- */
/* 不要卡片感，與上半段落對齊 */

.vision-text {
  max-width: 100%;
  margin: 0 0 3rem 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  line-height: 1.85;
  color: #495057;
}

.vision-text p {
  color: #495057;
  margin-bottom: 1rem;
}

/* ---- 三欄經營目標：官方年報風 ---- */

.vision-goals-row {
  margin-top: 0.5rem;
}

.vision-goal-card {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vision-goal-card::before {
  content: none;
}

/* 卡片上方藍底標題列（短程／中程／長程） */
.vision-goal-card .pic {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  color: #1d4ed8;
  border-bottom: 1px solid rgba(209, 213, 219, 0.8);
}

/* 內層 ul：左右不要靠邊，條列清楚 */
.vision-goal-card > ul,
.vision-goal-card ul.list-unstyled {
  padding-left: 2rem !important;
  padding-right: 1.4rem !important;
  margin: 0 !important;
}

/* 條列內容：年報級排版 */
.vision-goal-card ul li {
  position: relative;
  margin-bottom: 0.9rem;
  line-height: 1.7;
  color: #374151;
  font-size: 0.95rem;
  list-style: none;
}

/* 藍色圓點 */
/* 條列內容：統一行高，不再用 padding-top 做分隔 */
.vision-goal-card ul li {
  position: relative;
  margin: 0.8rem 0;          /* 每個 li 上下留一樣的距離 */
  padding-left: 1rem;
  line-height: 1.7;
  color: #374151;
  font-size: 0.95rem;
  list-style: none;
}

/* 藍色圓點：以文字行高為基準垂直置中 */
.vision-goal-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;                /* 依字高定位 */
  width: 6px;
  height: 6px;
  background: #1d4ed8;
  border-radius: 50%;
}

/* 分隔線改用 ::after 畫，不影響 padding */
.vision-goal-card ul li + li {
  position: relative;
}

.vision-goal-card ul li + li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.45rem;             /* 線畫在兩個 li 中間 */
  border-top: 1px solid #e5e7eb;
}

/*** 企業社會責任 ***/
.csr-block p,
.csr-intro p {
  font-size: 0.98rem;
  line-height: 1.9;
  color: #4b5563;
  max-width: 820px;
}

/* 共用 CSR 卡片外觀 */
.csr-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem 1.75rem 1.75rem 1.75rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.csr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  border-color: rgba(59, 130, 246, 0.7);
}

/* 首張 CSR 排名圖片：微圓角即可 */
.csr-img-main {
  border-radius: 0.75rem;
}

/* 圓形獎項照片 */
.csr-card-circle {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.csr-photo-circle img {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  max-width: 260px;
  border: 6px solid #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

/* RWD 微調 */
@media (max-width: 767.98px) {
  .csr-card {
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  }

  .csr-photo-circle img {
    max-width: 220px;
  }
}

/* =========================================================
   about_concept.aspx — Tab 分頁（report-panel 模式）
   版型：shared-sidebar.css + shared-subnav.css
   行為：js/about-concept-tabs.js
========================================================= */

/* 切換分頁時捲軸出現/消失不推擠次選單 */
.about-concept-page {
  scrollbar-gutter: stable;
}

.about-concept-page .subnav {
  margin-bottom: var(--title-gap-page, 32px);
}

.about-concept-page .subnav-item::after {
  pointer-events: none;
}

.about-concept-page .concept-panels {
  width: 100%;
}

.about-concept-page .concept-panel {
  display: none;
  width: 100%;
}

.about-concept-page .concept-panel.active {
  display: block;
}

/* 三個 Tab 內容區頂部對齊（與理念願景相同結構） */
.about-concept-page .concept-panel > .container-xxl.about-page {
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
}

.about-concept-page .concept-panel > .container-xxl.about-page > .container > :first-child {
  margin-top: 0;
}

/* 大標 margin-top 見 shared-typography.css */

/* 中標／內文與 .row > [class*="col-"] 左右內距對齊（12px） */
.about-concept-page .concept-panel .module-article {
  --concept-content-x: 12px;
}

.about-concept-page .concept-panel .module-article > .about-block-title,
.about-concept-page .concept-panel .module-article > .about-section,
.about-concept-page .concept-panel .module-article > .vision-text {
  padding-left: var(--concept-content-x);
  padding-right: var(--concept-content-x);
}

.about-concept-page .module-article h3:not(.about-block-title) {
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: normal;
}

.about-concept-page .concept-panel .vision-block,
.about-concept-page .concept-panel .concept-block,
.about-concept-page .concept-panel .csr-block {
  margin-top: 0;
}

.about-concept-page .concept-panel .vision-block {
  padding-bottom: 3rem;
}

.about-concept-page .concept-panel .concept-block,
.about-concept-page .concept-panel .csr-block {
  padding-bottom: 0;
}

/* 作用中分頁強制可見（防 WOW visibility:hidden） */
.about-concept-page .concept-panel.active,
.about-concept-page .concept-panel.active * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 舊版巢狀 container 結構：中和 Bootstrap 置中留白 */
.about-concept-page .section-main .container-xxl.about-page,
.about-concept-page .section-main .container-xxl.about-page > .container,
.about-concept-page .section-main .container-xxl.about-page > .container > .row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.about-concept-page .section-main .container-xxl.about-page > .container > .row > [class*="col-"],
.about-concept-page .section-main .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

.about-concept-page .section-main .section-title {
  margin-top: 0;
}

.about-concept-page .section-main .row {
  margin-left: 0;
  margin-right: 0;
}