/* =========================================
   樣式 B：置中對齊 (已修復無法置中問題)
========================================= */
.title-center {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* =========================================
   水平擴展卡片 (Horizontal Expansion Cards)
========================================= */
.expansion-container {
  display: flex;
  width: 100%;
  height: 500px;
  /* 桌機版固定高度 */
  gap: 16px;
}

.expansion-card {
  position: relative;
  flex: 1;
  /* 收縮狀態的比例 */
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  /* 平滑的彈性展開動畫 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 展開狀態的比例 */
.expansion-card.active {
  flex: 5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* 暗色漸層遮罩：確保白色文字在任何圖片上都清晰可見 */
.expansion-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.expansion-card.active .expansion-overlay {
  opacity: 0.9;
  /* 展開時稍微加深遮罩，提升閱讀性 */
}

/* 文字內容容器 (加入固定寬度) */
.expansion-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 550px;
  /* 關鍵修正 1：鎖定寬度，防止動畫過程中的文字蠕動重排 */
  max-width: 90vw;
  /* 避免螢幕過小時超出邊界 */
  padding: 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.expansion-icon {
  background-color: #ffdc19;
  color: #000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
  transition: transform 0.4s ease;
}

.expansion-card:not(.active) .expansion-icon {
  transform: scale(0.8);
}

.expansion-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  line-height: 1.3;
  white-space: normal;
  /* 關鍵修正 2：移除 nowrap，讓固定寬度自然斷行 */
  transition: all 0.4s ease;
}

.expansion-card.active .expansion-title {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

/* 內文描述 (加入微上浮與延遲動畫) */
.expansion-desc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(15px);
  /* 隱藏時稍微往下沉 */
  transition: opacity 0.2s ease, max-height 0.4s ease, transform 0.2s ease;
  /* 收合時快速消失 */
}

.expansion-card.active .expansion-desc {
  opacity: 1;
  max-height: 200px;
  margin-top: 10px;
  transform: translateY(0);
  /* 展開時回到原位 */
  /* 關鍵修正 3：透明度與位移延遲 0.2 秒 (ease 0.2s)，讓外框先展開，文字再優雅浮現 */
  transition: opacity 0.5s ease 0.2s, max-height 0.5s ease, transform 0.5s ease 0.2s;
}

/* =========================================
   手機版 RWD 斷點 (轉為垂直擴展)
========================================= */
@media (max-width: 991px) {
  .expansion-container {
    flex-direction: column;
    height: auto;
    min-height: 600px;
  }

  .expansion-content {
    width: 100%;
    /* 手機版垂直排列，恢復滿版寬度 */
    padding: 20px;
  }

  .expansion-card {
    height: 80px;
    flex: none;
  }

  .expansion-card.active {
    height: 300px;
    flex: none;
  }

  .expansion-icon {
    display: none;
  }

  .expansion-title {
    font-size: 1.2rem;
  }

  .expansion-card.active .expansion-title {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   擴展卡片 - 專屬角色徽章 (Role Badge)
   ========================================================================== */
.expansion-role-badge {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffdc19;
  /* 使用 CONNECT 品牌黃，在深色背景下極具質感與辨識度 */
  margin-top: 0;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  /* 半透明底色 */
  padding: 6px 14px;
  border-radius: 30px;
  /* 現代感膠囊圓角 */
  backdrop-filter: blur(6px);
  /* 國際級毛玻璃特效 */
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* 極細的高光邊框 */
  letter-spacing: 0.5px;
}

/* 針對卡片內容文字的排版微調，讓行距更舒適 */
.expansion-desc p {
  line-height: 1.7;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ==========================================================================
   擴展卡片 - 手機版高度塌陷與文字截斷修復 (Mobile Overflow & Spacing Fix)
   ========================================================================== */
@media (max-width: 991px) {

  /* 1. 釋放卡片高度限制：取消過大的 min-height，讓卡片完全貼合內容的高度 */
  .expansion-card.active {
    height: auto !important;
    min-height: 300px !important;
    /* 降低基礎高度，消滅底部過多的黑底死角 */
  }

  /* 2. 內容容器間距微調：縮減 bottom padding，讓視覺更緊湊 */
  .expansion-content {
    padding: 24px 20px 24px 20px !important;
    position: relative;
    bottom: auto;
    /* 確保內容順著排版流，不被強制壓在底部 */
  }

  /* 3. 擴大閱讀視野：將可視範圍從 45vh 加長到 60vh */
  .expansion-desc {
    max-height: 60vh;
    /* 讓文字區塊能往下延伸，充分利用剛剛省下來的空間 */
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 0;
  }

  /* 4. 國際級 SaaS 細緻滾動條美化 (Webkit) */
  .expansion-desc::-webkit-scrollbar {
    width: 4px;
  }

  .expansion-desc::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .expansion-desc::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
  }

  .expansion-desc::-webkit-scrollbar-thumb:hover {
    background: #ffdc19;
  }
}

/* ==========================================================================
   擴展卡片 - 專屬圖片放大按鈕 (Zoom Button)
   ========================================================================== */
.expansion-zoom-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(17, 24, 39, 0.6);
  /* 深灰色半透明底 */
  backdrop-filter: blur(8px);
  /* 現代毛玻璃 */
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: zoom-in;
  z-index: 10;
  opacity: 0;
  /* 預設隱藏 */
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 只有當卡片展開 (active) 時，按鈕才會浮現 */
.expansion-card.active .expansion-zoom-btn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 滑鼠懸停時的品牌色高光互動 */
.expansion-zoom-btn:hover {
  background: #ffdc19;
  /* CONNECT 品牌黃 */
  color: #111827;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(255, 220, 25, 0.3);
  border-color: transparent;
}

/* 手機版微調：確保按鈕不會太貼邊 */
@media (max-width: 991px) {
  .expansion-zoom-btn {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   修復：橫向擴展卡片 (Expansion Cards) 的放大鏡 Icon (全域 SVG 替換)
   ========================================================================== */

/* 1. 強制隱藏原本破圖的 FontAwesome 標籤 */
.expansion-zoom-btn i {
  display: none !important;
}

/* 2. 確保按鈕本身使用 Flexbox 讓內容完美置中 */
.expansion-zoom-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 3. 利用 CSS 偽元素直接注入最高解析度的純白 SVG 放大鏡 (+號) */
.expansion-zoom-btn::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  /* 💡 直接將 SVG 轉為 Data URI 寫在 CSS 裡，連圖檔都不用上傳！ */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

/* 懸停時放大鏡微微放大，增加互動手感 */
.expansion-zoom-btn:hover::after {
  transform: scale(1.15);
}

/* ==========================================================================
   現代化痛點/亮點卡片 (Modern Painpoint Cards) - CONNECT 品牌黃色系
   ========================================================================== */
.modern-painpoint-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  /* 💡 增加 border-color 的過渡動畫 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* 💡 懸停互動效果：上浮 + CONNECT 黃色科技光暈 */
.modern-painpoint-card:hover {
  transform: translateY(-8px);
  /* 替換為 CONNECT 黃色 (255, 220, 25) 光暈，並保留一點底層黑影增加立體感 */
  box-shadow: 0 12px 30px rgba(255, 220, 25, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: rgba(255, 220, 25, 0.6);
  /* 邊框微微亮起黃色 */
}

.modern-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
  cursor: pointer;
}

/* 圖片懸停微放大 */
.modern-painpoint-card:hover .modern-card-img {
  transform: scale(1.05);
}

.modern-card-body {
  padding: 30px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.modern-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
  line-height: 1.4;
}

.modern-card-text {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ==========================================================================
   圖片燈箱專屬樣式 (Image Lightbox) - 來自 HTML 內的整合
   ========================================================================== */
#imageLightbox {
  border: none;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
  overflow: visible;
}

#imageLightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}