/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Google Material Icons 基礎設定 */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 品牌背景色 */
.hero-gradient {
    background-color: #149db0;
}



.font-serif-tc { font-family: "Noto Serif TC", serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* 自訂主色文字 */
.text-secondary {
  color: #12393E;
}

/* 自訂主色文字 (Primary) */
.text-primary {
  color: #149DB0;
}

/* 產業卡片基礎設定 */
.industry-swiper .swiper-slide {
  width: 320px; 
  margin-right: 32px; 
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #6c757d;
  padding-bottom: 24px;
}

/* 在手機版 (小於 640px) 隱藏底線 */
@media (max-width: 639px) {
  .industry-swiper .swiper-slide {
    border-bottom: none;
  }
}

.industry-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 200px; 
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* --- 極簡引導按鈕 (無圓圈，有推進動畫) --- */
.view-case-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: #12393e;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.view-case-btn .arrow-icon {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

/* 滑鼠移至卡片時整體動畫 */
.swiper-slide:hover .view-case-btn {
  color: #149DB0;
}
.swiper-slide:hover .view-case-btn .arrow-icon {
  transform: translateX(8px);
}

/* 導航按鈕 (純線條圓形) */
.swiper-prev, .swiper-next {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid #6c757d;
  color: #6c757d;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s;
}
.swiper-prev:hover, .swiper-next:hover {
  background-color: #6c757d; color: #fff;
}

/* 分頁數字 01 --- 04 */
.swiper-pagination-fraction {
  font-size: 14px; color: #6c757d;
  display: flex; align-items: center; gap: 12px;
}
.swiper-pagination::after {
  content: ""; display: inline-block; width: 40px; height: 1px; background-color: #6c757d;
}

/* --- 產業方案深色背景專用樣式 --- */

/* 1. 卡片底部邊框調整為白色透明 */
.bg-secondary .industry-swiper .swiper-slide {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 2. 深色背景下的導航按鈕 */
.dark-nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.dark-nav:hover {
  background-color: white;
  color: #12393E;
  border-color: white;
}

/* 3. 深色背景下的分頁數字與橫線 */
.dark-pagination {
  color: white !important;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dark-pagination::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}

/* 4. 引導按鈕文字顏色修正 (深底用) */
.view-case-btn.light {
  color: white;
}

.view-case-btn.light .arrow-icon {
  border-color: rgba(255, 255, 255, 0.5); /* 雖然沒圓圈但保留結構屬性 */
}

.swiper-slide:hover .view-case-btn.light {
  color: #149DB0; /* Hover 時變品牌亮藍色 */
}

/* 修正瀏覽器自動填入 (Autofill) 的預設藍色背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /* 使用內陰影覆蓋底色，#f1f5f9 對應 Tailwind 的 slate-100 (比未填寫的 slate-50 稍深) */
    -webkit-box-shadow: 0 0 0px 1000px #f1f5f9 inset !important;
    
    /* 確保自動填入的文字顏色維持深色 (對應 text-slate-900) */
    -webkit-text-fill-color: #0f172a !important;
    
    /* 避免字體變形或背景閃爍的過渡效果設定 */
    transition: background-color 5000s ease-in-out 0s;
}