/* ==========================================================================
   responsive.css — 響應式（RWD）共用層
   斷點：1440 / 1024 / 768 / 480（由大到小）
   只放「全站共用」的 RWD：變數覆寫 / header / nav / footer / 漢堡選單 /
   通用行動輪播 / 統一分頁點 / 共用區塊組件 / 標題字級 / 無障礙。
   頁面專屬 RWD（home-* / vehicle-* / page-*）寫在各自頁面 CSS。
   ========================================================================== */

/* ===== 大螢幕（max-width: 1440px） ===== */
@media (max-width: 90rem) {
  :root {
    --container-max-width: 95%;
  }
}

/* ===== 平板（max-width: 1024px）：導航收合為漢堡選單 ===== */
@media (max-width: 64rem) {
  :root {
    --spacing-3xl: 3rem;
    --spacing-4xl: 3.5rem;
    --font-size-4xl: 2rem;
  }

  /* 隱藏桌機導航、改用漢堡選單（下拉面板：依設計稿白底、置中、當前頁紅字） */
  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    background-color: var(--bg-color);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    /* 淡入 + 下滑動畫（取代生硬的 display 切換） */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base),
      visibility var(--transition-base);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .site-nav__list > li {
    border-bottom: 1px solid #ededed;
  }

  .site-nav__list > li:last-child {
    border-bottom: 0;
  }

  .site-nav__list a {
    display: block;
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
    color: var(--text-color);
    font-size: var(--font-size-lg);
    letter-spacing: 0.05em;
    transition:
      color var(--transition-base),
      background-color var(--transition-base);
  }

  /* 行動選單不要黃色底線（桌機的 ::after 點綴在此關閉） */
  .site-nav__list a::after {
    display: none;
  }

  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
  }

  /* 當前頁面：紅字加粗（依設計稿「關於我們」紅字） */
  .site-nav__list .current-menu-item > a,
  .site-nav__list .current_page_item > a,
  .site-nav__list .current-menu-ancestor > a,
  .site-nav__list .is-current > a {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
  }

  .menu-toggle {
    display: flex;
  }

  /* 漢堡 → 叉叉（開啟時）：三條 2px、間距 5px，相鄰中心距 7px */
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 頁尾與聯絡 CTA 改為直向堆疊 */
  .site-footer__columns {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .site-footer__map {
    width: 100%;
    margin-left: 0;
  }

  .contact-cta__inner {
    grid-template-columns: 1fr;
  }
}

/* ===== 手機（max-width: 480px） ===== */
@media (max-width: 30rem) {
  :root {
    /* 內文依設計稿縮為 13px（手機版內文13）；標題類維持既有對稿尺寸 */
    --font-size-base: 0.8125rem; /* 13px（設計 手機版內文13） */
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.75rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 2.5rem;
    --header-height: 2rem; /* 32px：手機緊湊 header（下拉選單以此對齊，依設計稿） */
  }

  .section-header {
    margin-bottom: var(--spacing-xl);
  }

  /* 區塊標題群（首頁等共用 .section-header）：設計稿手機版中英主副標皆 14px、標題↔副標 2px */
  .section-header__heading,
  .section-header__en {
    font-size: var(--font-size-sm); /* 14px */
  }

  .section-header__en {
    margin-top: 0.125rem; /* 2px（設計稿標題↔副標 gap） */
  }

  /* --- 手機 Header：依設計稿收為 32px 高、Logo 置中、漢堡靠右 --- */
  .site-header__inner {
    position: relative;
    min-height: 0;
    height: var(--header-height); /* 32px */
    padding: 0 var(--spacing-md);
    min-width: 0;
  }

  /* Logo 絕對置中（依設計稿手機版 logo 在 header 正中央） */
  .site-header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .site-header__brand,
  .site-header__brand img {
    height: 1.5rem; /* 24px，配合 32px header（依設計稿手機 Logo） */
    width: auto;
    min-width: 0;
  }

  /* 漢堡鈕靠右、縮小為 16×16、bar 間距 gap 5px（依設計稿手機版） */
  .menu-toggle {
    margin-left: auto;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    gap: 5px;
  }

  /* 線條粗度 1px（依設計稿手機版） */
  .menu-toggle__bar {
    height: 1px;
  }

  /* ==========================================================================
     手機版 Footer（依設計稿）：
     順序：Logo 置中 → 分隔線 → 聯絡 → 雙店 → 地圖 → 社群 → Copyright
     ========================================================================== */
  .site-footer {
    font-size: 0.75rem; /* 12px（設計 footer 基準） */
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 19.125rem; /* 306px */
    max-width: 100%;
    margin: 0 auto;
    gap: 1.25rem; /* 20px：Logo 群 ↔ 資訊群 */
    padding: var(--spacing-2xl) var(--spacing-lg) 0;
  }

  .site-footer__brand {
    order: 1;
    align-self: center;
    margin-bottom: var(--spacing-sm); /* Logo ↔ 分隔線 8px */
  }

  .site-footer__logo {
    height: 1.5rem; /* 24px */
  }

  .site-footer__divider {
    order: 2;
    width: 100%;
    margin: 0;
  }

  /* 三欄塌成直向堆疊：聯絡 / 雙店 / 地圖，gap 28px（設計） */
  .site-footer__cols {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem; /* 28px */
    width: 16.25rem; /* 260px */
  }

  /* 聯絡：三列 gap 16px（設計） */
  .site-footer__contact {
    gap: var(--spacing-md); /* 16px */
  }

  /* 記得加小老鼠 紅標：112×20（設計） */
  .site-footer__line-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem; /* 112px */
    height: 1.25rem; /* 20px */
    margin-left: 0.6875rem; /* 11px */
    padding: 0;
  }

  /* 雙店：上下堆疊 gap 24px、字 13px（設計） */
  .site-footer__stores {
    flex-direction: column;
    gap: var(--spacing-lg); /* 24px */
    font-size: var(--font-size-base); /* 13px */
  }

  .site-footer__store-head {
    gap: 0.4375rem; /* 7px */
    margin-bottom: 0.5625rem; /* 9px（標題列 ↔ 地址） */
  }

  /* 店名框：84×32、13px/600（設計） */
  .site-footer__store-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem; /* 84px */
    height: 2rem; /* 32px */
    padding: 0;
    font-size: var(--font-size-base); /* 13px */
    font-weight: var(--font-weight-semibold); /* 600 */
  }

  .site-footer__store-address {
    font-size: 0.75rem; /* 12px */
  }

  /* 地圖：260×103（設計） */
  .site-footer__map {
    max-width: 16.25rem; /* 260px */
    aspect-ratio: 260 / 103;
  }

  /* 社群：移到地圖下方、置中、gap 22px、圖示約 25px（設計） */
  .site-footer__social {
    order: 4;
    align-self: center;
    gap: 1.375rem; /* 22px */
  }

  .site-footer__social a {
    width: 1.5938rem; /* ~25.5px */
    height: 1.5938rem;
  }

  /* Copyright：與內容相距 48px、置中、12px（設計） */
  .site-footer__copyright {
    margin-top: 3rem; /* 48px */
    padding: 0 var(--spacing-md) var(--spacing-xl);
    font-size: 0.75rem; /* 12px */
    text-align: center;
    line-height: 1.6;
  }

  .site-footer__copyright-line {
    display: block;
  }

  .site-footer__copyright-line + .site-footer__copyright-line::before {
    content: none;
  }
}

/* ==========================================================================
   通用行動輪播（手機：共用區塊一頁 2 張、可左右拖曳、分頁點）
   桌機不受影響（僅 .is-carousel 由 JS 在手機斷點加上）。
   ========================================================================== */
@media (max-width: 48rem) {
  /* 輪播容器：只裁左右橫向溢出；上下加 padding 給卡片陰影緩衝空間（不被裁）。
     分頁點以負 margin 拉出容器底部，避免落在 overflow 裁切區而被切掉。 */
  [data-carousel] {
    overflow: hidden;
    /* 左右 6px、上下留白，讓卡片陰影不被裁切（JS 以內容寬計算，padding 不影響每頁張數） */
    padding: var(--spacing-sm) 6px;
  }

  [data-carousel].is-carousel {
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }

  [data-carousel].is-carousel.is-dragging {
    cursor: grabbing;
  }

  /* 軌道：覆蓋原本格狀，改為單列可位移 */
  [data-carousel].is-carousel [data-carousel-track] {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--spacing-md);
    will-change: transform;
    /* 放開後平滑貼齊（拖曳中由 JS 設 is-dragging 關閉過場、即時跟手） */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-carousel].is-carousel [data-carousel-track].is-dragging {
    transition: none;
  }

  /* 每張卡：一頁 2 張 */
  [data-carousel].is-carousel [data-carousel-track] > * {
    flex: 0 0 calc((100% - var(--spacing-md)) / 2);
    min-width: 0;
  }

  /* 拖曳時避免圖片搶走指標事件（仍可點連結） */
  [data-carousel].is-carousel [data-carousel-track] img {
    pointer-events: none;
  }

  /* 分頁點容器置中留白 */
  [data-carousel] [data-carousel-dots] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
  }

  /* 分頁點基本樣式（區塊各自的 .dot 樣式優先；此為通用後備） */
  [data-carousel-dots] .dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #d0d0d0;
    cursor: pointer;
    transition: background-color var(--transition-base);
  }

  [data-carousel-dots] .dot.is-active {
    background-color: var(--color-primary);
  }
}

/* ==========================================================================
   共用區塊（實績案例/好評推薦/常見問題/延伸閱讀）行動版校正（依設計稿匯出 CSS）
   ========================================================================== */
@media (max-width: 30rem) {
  /* 黑色標題列：設計 32px 高、標題 13px/600 置中、紅膠囊「展開」鈕 */
  .section-bar {
    height: 2rem; /* 32px */
    padding: 0 var(--spacing-sm);
  }

  .section-bar__title {
    font-size: var(--font-size-base); /* 13px */
    font-weight: var(--font-weight-semibold); /* 600 */
    line-height: 22px;
    letter-spacing: 0;
  }

  .section-bar__toggle {
    right: 0.375rem;
    gap: 6px;
    height: 1.375rem;
    padding: 0 0.625rem;
    border-radius: 60px;
    font-size: 12px;
  }

  .section-bar__toggle-icon {
    width: 5px;
    height: 6px;
  }

  /* 卡片標題/名稱：設計 13px、line-height 22px */
  .case-card__name {
    font-size: var(--font-size-base);
    line-height: 22px;
  }
}

/* ==========================================================================
   行動版預設標題字級（內容區/未指定字級的標題；元件 class 字級不受影響）
   依設計稿手機較小:h1≈22 / h2≈20 / h3≈18 / h4≈16
   ========================================================================== */
@media (max-width: 48rem) {
  h1 {
    font-size: 1.375rem;
  } /* 22px */
  h2 {
    font-size: 1.25rem;
  } /* 20px */
  h3 {
    font-size: 1.125rem;
  } /* 18px */
  h4 {
    font-size: 1rem;
  } /* 16px */
}

/* ==========================================================================
   統一分頁點樣式（所有輪播 / 區塊共用，依設計稿匯出 CSS）
   inactive 5px #898989、active 10px 紅、容器 gap 10px、置中
   ========================================================================== */
.home-vehicles__dots,
.home-news__dots,
[data-carousel-dots],
.section-case-studies__dots,
.section-reviews__dots,
.section-extended-reading__dots,
.vehicle-cases__dots,
.vehicle-related__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.home-vehicles__dot,
.home-news__dots .dot,
[data-carousel-dots] .dot,
.section-case-studies__dots .dot,
.section-reviews__dots .dot,
.section-extended-reading__dots .dot,
.vehicle-cases__dots .dot,
.vehicle-related__dots .dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #898989;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    width var(--transition-base),
    height var(--transition-base);
}

/* 當前頁：淺紅大圓（::before）在後、紅心（::after）疊在上，兩者皆置中。
   用兩個偽元素，避免負 z-index 偽元素被畫在自身背景之上而蓋住紅心。 */
.home-vehicles__dot.is-active,
.home-news__dots .dot.is-active,
[data-carousel-dots] .dot.is-active,
.section-case-studies__dots .dot.is-active,
.section-reviews__dots .dot.is-active,
.section-extended-reading__dots .dot.is-active,
.vehicle-cases__dots .dot.is-active,
.vehicle-related__dots .dot.is-active {
  width: 5px;
  height: 5px;
  background-color: transparent;
  position: relative;
  box-shadow: none;
}

/* 後方：淺紅、較大的圓 */
.home-vehicles__dot.is-active::before,
.home-news__dots .dot.is-active::before,
[data-carousel-dots] .dot.is-active::before,
.section-case-studies__dots .dot.is-active::before,
.section-reviews__dots .dot.is-active::before,
.section-extended-reading__dots .dot.is-active::before,
.vehicle-cases__dots .dot.is-active::before,
.vehicle-related__dots .dot.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: rgba(200, 16, 46, 0.25);
}

/* 上方：置中的紅心（5px） */
.home-vehicles__dot.is-active::after,
.home-news__dots .dot.is-active::after,
[data-carousel-dots] .dot.is-active::after,
.section-case-studies__dots .dot.is-active::after,
.section-reviews__dots .dot.is-active::after,
.section-extended-reading__dots .dot.is-active::after,
.vehicle-cases__dots .dot.is-active::after,
.vehicle-related__dots .dot.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* ==========================================================================
   無障礙偏好
   ========================================================================== */

/* 降低動態效果 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}