/* ==========================================================================

   SAiGEN Methodology Page - Desktop Card Style & Mobile Single-Row Adaptation

   ========================================================================== */

:root {
  --bs-body-font-family: "Inter", sans-serif;

  --bs-body-bg: #f7f9fb;

  --bs-body-color: #191c1e;
}

.font-serif {
  font-family: "Playfair Display", Georgia, serif;
}

/* 容器基本設定 */

.roadmap-tabs-wrapper {
  background: #f8fafc;

  border: 1px solid rgba(0, 0, 0, 0.06);

  display: flex;

  flex-wrap: nowrap; /* 手機版強制單排不換行 */

  width: 100%;

  overflow-x: auto; /* 若手機螢幕極窄時支援平滑橫向微調 */
}

/* 單個 Tab 按鈕預設樣式（手機版：精簡化、垂直或緊湊排列以確保同排） */

.roadmap-tab {
  background: transparent;

  color: #64748b;

  flex: 1 1 0%; /* 5 個按鈕平均分配空間 */

  text-align: center;

  border-radius: 0.75rem;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  padding: 8px 4px !important;
}

.roadmap-tab .roadmap-icon-badge {
  width: 28px;

  height: 28px;

  background: #f1f5f9;

  color: #0f1c36;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Playfair Display", serif;

  font-weight: 700;

  font-size: 0.8rem;

  margin: 0 auto;
}

.roadmap-tab .roadmap-text-box {
  display: none; /* 手機版預設隱藏詳細英文，保持單排簡潔 */
}

.roadmap-tab.active {
  background: #0f1c36 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 15px rgba(15, 28, 54, 0.15);
}

.roadmap-tab.active .roadmap-icon-badge {
  background: #ffffff;

  color: #0f1c36;
}

/* 🌟 針對大螢幕（平板與桌機版 / 992px以上）完全還原圖片中的精緻卡片風格 */

@media (min-width: 992px) {
  .roadmap-tabs-wrapper {
    background: #f8fafc;

    padding: 1rem !important;

    gap: 12px !important;

    overflow-x: visible;
  }

  .roadmap-tab {
    background: transparent;

    text-align: left;

    padding: 1rem !important;

    border-radius: 0.75rem;
  }

  .roadmap-tab.active {
    background: #ffffff !important;

    color: #191c1e !important;

    box-shadow: 0 10px 30px rgba(15, 28, 54, 0.08);

    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .roadmap-tab .roadmap-icon-badge {
    width: 36px;

    height: 36px;

    background: #0f1c36;

    color: #f7d5a4;

    font-size: 1rem;

    margin: 0;
  }

  .roadmap-tab.active .roadmap-icon-badge {
    background: #0f1c36;

    color: #f7d5a4;
  }

  .roadmap-tab .roadmap-text-box {
    display: block; /* 桌機版完整顯示英文主標與中文說明 */
  }

  .roadmap-tab .tab-title {
    font-size: 0.95rem;

    font-family: "Playfair Display", Georgia, serif;

    letter-spacing: -0.2px;
  }

  .roadmap-tab .tab-sub {
    font-size: 0.7rem;

    color: #64748b;
  }
}

/* 內容面板切換動畫 */

.roadmap-panel {
  display: none;

  animation: fadeInPanel 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.roadmap-panel.active {
  display: block;
}

@keyframes fadeInPanel {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* 高級微互動卡片懸停感 */

.transition-hover {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-hover:hover {
  transform: translateY(-5px);

  box-shadow: 0 1.2rem 2.5rem rgba(15, 28, 54, 0.08) !important;
}

/* 輔助顏色常數 */

.bg-secondary {
  background-color: #725b38 !important;
}

.text-secondary {
  color: #725b38 !important;
}

.text-xxs {
  font-size: 0.65rem;
}
.static-navy-filter-bg {
  transform: none !important;
  filter: brightness(0.88) contrast(108%) saturate(75%) hue-rotate(-8deg);
  -webkit-filter: brightness(0.88) contrast(108%) saturate(75%) hue-rotate(-8deg);
}