/* =============================================== */
/*  RESPONSIVE.CSS                                 */
/*  全站唯一的 media query 集中地                    */
/*                                                 */
/*  斷點:                                          */
/*  - Desktop:     1440px (基準)                   */
/*  - Tablet:      max-width 1100px                */
/*  - Mobile:      max-width 768px                 */
/*  - Small Mobile: max-width 480px                */
/*                                                 */
/*  每個斷點內按區塊順序排列:                       */
/*  variables → layout → header → hero → about →   */
/*  philosophy → business → clients → process →    */
/*  sourcing → contact → footer                    */
/* =============================================== */


/* =============================================== */
/*  BREAKPOINT 1: TABLET (max-width 1100px)        */
/* =============================================== */

@media (max-width: 1100px) {

  /* ---- variables 微調 ---- */
  :root {
    --fs-3xl: 2.5rem;     /* 區段標題縮小 */
    --fs-4xl: 3.2rem;     /* Hero 標題縮小 */
    --fs-5xl: 4.5rem;     /* watermark 縮小 */
    --section-py: var(--sp-9);
  }

  /* ---- layout ---- */
  .container {
    padding-inline: var(--sp-5);
  }

  /* ---- hero ---- */
  .hero-content {
    left: var(--sp-7);
    right: var(--sp-7);
    bottom: var(--sp-9);
  }

  .hero-scroll {
    right: var(--sp-7);
  }

  /* ---- about ---- */
  .about-grid {
    min-height: 600px;
  }

  .about-content {
    padding: var(--sp-9) var(--sp-7);
    padding-right: max(var(--sp-7), calc((100vw - var(--container-max)) / 2 + var(--sp-7)));
  }

  /* ---- philosophy ---- */
  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .philosophy-intro {
    position: static;
  }

  .philosophy-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ---- business (七卡 → 四欄) ---- */
  .business-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---- clients (五張 → 仍五張但縮小，準備斷下一階) ---- */
  .clients-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* ---- process (五步驟 → 平板改 3 欄) ---- */
  .process-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .step-body {
    padding: var(--sp-5) var(--sp-4) var(--sp-5);
  }

  /* ---- sourcing ---- */
  .sourcing-board {
    padding: var(--sp-6);
  }

  /* ---- contact ---- */
  .contact-info,
  .contact-form-wrap {
    padding: var(--sp-8) var(--sp-7);
  }

  /* ---- footer ---- */
  .footer-grid {
    gap: var(--sp-6);
    padding-block: var(--sp-8);
  }

  .footer-logo {
    height: 72px;
  }
}


/* =============================================== */
/*  BREAKPOINT 2: MOBILE (max-width 768px)         */
/* =============================================== */

@media (max-width: 768px) {

  /* ---- variables ---- */
  :root {
    --fs-2xl: 1.75rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.5rem;
    --fs-5xl: 3.5rem;
    --section-py: var(--sp-8);
    --container-pad: var(--container-pad-m);
    --header-h: var(--header-h-m);
  }

  /* ---- layout ---- */
  .section-head {
    margin-bottom: var(--sp-7);
  }

  /* ---- 1. HEADER: 顯示 hamburger，隱藏 nav-menu ---- */
  .nav-inner {
    gap: var(--sp-4);
  }

  .nav-logo img {
    height: 48px;
  }

  /* 手機版選單面板:
     - 滿版寬度 (left:0, right:0)，自動高度 (不滿屏)
     - 白色半透明背景，項目水平置中
     - 從 header 下方往下展開
     - 底部加細線分隔下方頁面 */
  .nav-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: auto;                  /* 自動高度，不再滿屏 */
    flex-direction: column;
    align-items: center;           /* 內容水平置中 */
    justify-content: flex-start;
    gap: 0;
    padding: var(--sp-6) var(--sp-5);
    background-color: rgba(255, 255, 255, 0.92);  /* 白色半透明 */
    backdrop-filter: blur(10px);                  /* 背景模糊增加層次 */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: var(--bw) solid var(--line);   /* 底部細線分隔頁面 */
    box-shadow: 0 8px 24px rgba(15, 37, 72, 0.08);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t), opacity var(--t);
    overflow-y: auto;
    max-height: calc(100vh - var(--header-h));    /* 安全網: 極小螢幕才滾動 */
    z-index: calc(var(--z-header) - 1);
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;           /* 項目水平置中 */
    gap: 0;
    margin-bottom: var(--sp-5);
    width: 100%;
  }

  .nav-list a {
    display: block;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-base);
    text-align: center;
    border-bottom: none;           /* 移除舊的分隔線 */
  }

  .nav-list a::after {
    display: none;
  }

  /* 「聯繫我們」按鈕區 — 在 nav-actions 內，居中 */
  .nav-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
  }

  .nav-actions .btn {
    width: auto;
    min-width: 180px;
    padding-inline: var(--sp-7);
  }

  /* 語言切換鈕: 手機版抽出選單，fixed 定位到漢堡/X 鈕左邊
     強制獨立顯示，不受 nav-menu opacity 影響 */
  .lang-switch {
    position: fixed;
    top: calc(var(--header-h) / 2);                  /* header 垂直中央 */
    right: calc(var(--sp-4) + 44px + var(--sp-3));   /* 漢堡/X 鈕寬度 + 間距 */
    transform: translateY(-50%);
    z-index: calc(var(--z-header) + 1);
    align-self: auto;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hamburger {
    display: flex;
  }

  /* ---- 2. HERO: 沉浸式 — 手機版調整 padding 與按鈕方向
         修正: 用 dvh 解決瀏覽器 UI 條動態高度，
         hero-content 加 top 上限防 eyebrow 被 header 切 ---- */
  .hero {
    height: 90vh;                /* 舊瀏覽器備援 */
    height: 100dvh;              /* 現代瀏覽器: 自動扣 UI 條，可放心滿屏 */
    min-height: 560px;
    max-height: none;
  }

  .hero-content {
    left: var(--sp-5);
    right: var(--sp-5);
    /* 安全 top: 確保內容頂端不會穿到 header 下方
       + sp-4 額外緩衝，eyebrow 永遠完整顯示 */
    top: calc(var(--header-h) + var(--sp-4));
    bottom: var(--sp-8);
    max-width: 100%;
    /* 內容靠下對齊，但有 top 邊界保護 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .hero-eyebrow {
    margin-bottom: var(--sp-4);
  }

  .hero-desc {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-6);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
  }

  .hero-actions .hero-btn {
    width: 100%;
  }

  .hero-scroll {
    right: var(--sp-5);
    bottom: var(--sp-5);
  }

  /* ---- 3. ABOUT: 圖上文下 (滿版背景 → 堆疊版型) ---- */
  .about-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .about-image {
    aspect-ratio: 3 / 4;
    max-width: 100%;
    margin-inline: 0;
  }

  /* 手機版圖片改為「底部羽化」(因為文字在下方而非右側)
     覆寫桌機版的右側 mask */
  .about-image img {
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 75%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 75%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0) 100%);
  }

  .about-content {
    padding: var(--sp-7) var(--sp-5);
    padding-right: var(--sp-5);
    margin-top: -40px;  /* 文字區往上推一點，跟圖片底部羽化自然銜接 */
  }

  .about-stats {
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
  }

  .stat-num {
    font-size: var(--fs-2xl);
  }

  /* ---- 4. PHILOSOPHY: 卡片改單欄 ---- */
  .philosophy-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .philo-card {
    padding: var(--sp-6) var(--sp-5);
  }

  /* ---- 5. BUSINESS: 七卡 → 兩欄 ---- */
  .business-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .biz-card {
    padding: var(--sp-5) var(--sp-4);
  }

  /* ---- 6. CLIENTS: 五張 → 直列堆疊 (1 欄) ---- */
  .clients-grid {
    grid-template-columns: 1fr;
  }

  .client-card {
    aspect-ratio: 16 / 9;
  }

  .client-overlay {
    padding: var(--sp-5) var(--sp-4);
  }

  /* ---- 7. PROCESS: 改單欄 (圖上文下卡片堆疊) ---- */
  .process-list {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    max-width: 440px;
    margin-inline: auto;
  }

  .step-media {
    aspect-ratio: 16 / 9;  /* 手機版單欄較寬，用 16:9 比例 */
  }

  .step-body {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }

  /* ---- 8. SOURCING ---- */
  .sourcing-board {
    padding: var(--sp-4);
  }

  .map-legend {
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
  }

  /* ---- 9. CONTACT: 上下排列 ---- */
  .contact-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .contact-info,
  .contact-form-wrap {
    padding: var(--sp-8) var(--sp-5);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }

  /* ---- 10. FOOTER: 單欄置中 ---- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding-block: var(--sp-8);
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-logo {
    height: 64px;
  }

  .footer-tagline {
    align-items: center;
  }

  .footer-tagline p {
    font-size: var(--fs-sm);
  }

  .footer-contact {
    text-align: center;
    align-items: center;
  }
}


/* =============================================== */
/*  BREAKPOINT 3: SMALL MOBILE (max-width 480px)   */
/* =============================================== */

@media (max-width: 480px) {

  /* ---- variables ---- */
  :root {
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2.1rem;
    --fs-5xl: 2.8rem;
    --section-py: var(--sp-7);
  }

  /* ---- hero ---- */
  .hero-content {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-7);
  }

  .hero-scroll {
    right: var(--sp-4);
    bottom: var(--sp-4);
  }

  /* ---- about ---- */
  .about-stats {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .stat {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
  }

  /* ---- business: 兩欄 → 單欄 ---- */
  .business-grid {
    grid-template-columns: 1fr;
  }

  /* ---- clients: 圖片變更扁 ---- */
  .client-card {
    aspect-ratio: 4 / 3;
  }

  /* ---- process ---- */
  .step-body {
    padding: var(--sp-5) var(--sp-4) var(--sp-5);
  }

  /* ---- contact ---- */
  .contact-info,
  .contact-form-wrap {
    padding: var(--sp-7) var(--sp-4);
  }

  /* ---- footer ---- */
  .footer-grid {
    padding-block: var(--sp-7);
  }
}


/* =============================================== */
/*  BREAKPOINT 4: LANDSCAPE PHONE (高度過矮時)      */
/*  避免 Hero 滿屏 100vh 在橫向手機上太擠           */
/* =============================================== */

@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 500px;
  }

  .hero-content {
    bottom: var(--sp-6);
  }
}