/**
 * 滙富投資 (Huei Fu Investment) - web_v2.1 響應式佈局 (RWD)
 * 導覽列規則：
 * 1. 桌面寬螢幕 (≥ 1150px)：全尺寸橫排導覽 + 雙 Action 按鈕。
 * 2. 中型螢幕 (901px ~ 1149px)：自動縮小間距與字級，保持全部點選項目橫排可見，不隱藏任何功能。
 * 3. 手機/窄螢幕 (≤ 900px)：切換為 Header (Logo + 預約諮詢按鈕 + ☰ 選單按鈕) + 右側滑出抽屜選單 (包含所有完整可點選項目)。
 * 4. 全尺寸 (1920, 1440, 1280, 1024, 768, 430, 390, 360) 零橫向捲軸。
 */

/* ==========================================================================
   1. 中型螢幕過渡調整 (Breakpoint: 901px ~ 1150px)
   ========================================================================== */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-links {
    gap: 12px;
  }
  .nav-link {
    font-size: 0.84rem;
    padding: 4px 0;
  }
  .nav-actions-desktop {
    gap: 6px;
  }
  .nav-actions-desktop .nav-btn,
  .nav-actions-desktop .btn-secondary-outline,
  .nav-actions-desktop .btn-primary-brand,
  .nav-actions-desktop .nav-btn-line {
    height: 34px;
    padding: 0 8px;
    font-size: 0.78rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   2. 手機與窄螢幕斷點 (Breakpoint: ≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {
  /* 隱藏桌面橫向選單與桌面 Action 按鈕 */
  .nav-links {
    display: none !important;
  }
  .nav-actions-desktop {
    display: none !important;
  }

  /* 顯示手機端 Header 控制區 */
  .mobile-nav-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .mobile-quick-book {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    height: 34px;
    padding: 0 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-toggle:hover {
    background: #FFFFFF;
    border-color: var(--brand-green);
    color: var(--brand-green);
  }

  .hamburger-icon {
    font-size: 1.1rem;
    line-height: 1;
  }

  .hamburger-text {
    font-size: 0.82rem;
  }

  /* 區塊內距調整 */
  .section-padding {
    padding: 60px 0;
  }

  /* Hero 區塊切換為單欄垂直流動 */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-main-title {
    font-size: 2.1rem;
    line-height: 1.35;
  }

  .hero-desc {
    margin: 16px auto 24px;
    font-size: 0.98rem;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-ecosystem {
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
  }

  .hero-ecosystem-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* 四大優勢切換為 2 欄 */
  .advantages-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 36px;
  }

  /* 方案卡片切換為 1 欄 */
  .pricing-cards-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto 32px;
  }

  .pricing-card.featured {
    transform: none;
  }

  /* 團隊卡片切換為 1 欄 */
  .team-cards-grid-2col {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin: 0 auto 32px;
  }

  /* 服務流程四步曲 */
  .service-flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 評估引流卡片 */
  .assessment-container-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 傳承金字塔 */
  .pyramid-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 頁尾佈局 */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ==========================================================================
   3. 手機直向尺寸 (Breakpoint: ≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .hero-main-title {
    font-size: 1.85rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-cta-group .btn-primary-brand,
  .hero-cta-group .btn-secondary-outline {
    width: 100%;
    justify-content: center;
  }

  .pillar-nav-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border-bottom: none;
  }

  .pillar-nav-btn {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 0.92rem;
  }

  .pillar-nav-btn.active::after {
    display: none;
  }

  .pillar-nav-btn.active {
    background: var(--brand-green);
    color: #FFFFFF;
    border-color: var(--brand-green);
  }

  .pillar-overview-box {
    padding: 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .partner-network-grid {
    grid-template-columns: 1fr;
  }

  .service-flow-grid {
    grid-template-columns: 1fr;
  }

  .pyramid-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-cta-btns-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .footer-cta-btns-group button {
    width: 100%;
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
  }

  .comparison-table {
    min-width: 580px;
  }
}

/* ==========================================================================
   4. 小型手機尺寸 (Breakpoint: ≤ 430px, 390px, 360px)
   ========================================================================== */
@media (max-width: 430px) {
  .advantages-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .advantage-item-card {
    padding: 16px;
  }

  .page-hero-title {
    font-size: 1.6rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .pricing-card {
    padding: 24px 18px;
  }

  .team-profile-card {
    padding: 20px 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .team-person-focus {
    justify-content: center;
  }

  .modal-dialog {
    padding: 24px 18px;
    margin: 12px;
    max-height: 90vh;
  }
}
/* 核心服務與等權重方案 RWD */
@media (max-width: 900px) {
  .services-grid-3col {
    grid-template-columns: 1fr !important;
  }
  .pricing-cards-grid-equal {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin: 0 auto;
  }
  .partner-network-grid-clean {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .partner-network-grid-clean {
    grid-template-columns: 1fr !important;
  }
}
