/* ============================================
   全車系區塊 - 改為 Flex 排版，一次顯示所有車款
   （取代原本的 Swiper 輪播 + 左右箭頭）
   ============================================
   注意：車款名稱圖檔(.carsList-text)、車輛圖片(.carsList-img)、
   以及內層 .carsList a:nth-child(1) 的置中/尺寸規則，都已經定義在
   new_headerfooter.css 裡（例如 carsList-text 用固定高度 23px 縮放、
   carsList-img 用 width:90%; max-width:245px 縮放），這些設計本來就
   是正確的，這支檔案完全不覆蓋它們。

   這支檔案只負責「外層排版」：讓所有車款一次排在同一列、不使用
   Swiper 左右箭頭、依車款數量自動調整彼此間距、不出現任何捲軸。
   ============================================ */

.home-cars .carsListWrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

@media (min-width: 768px) {
  .home-cars .carsListWrap {
    padding: 0 49px;
  }
}

@media (min-width: 1200px) {
  .home-cars .carsListWrap {
    padding: 0 100px;
  }
}

/* 車款列：
   - 手機（<768px）：允許換行，一排顯示 2 台，避免螢幕太窄時
     被硬擠成同一排，導致車款名稱圖檔（固定高度、寬度不會縮小）
     互相重疊，甚至因為容器 overflow-x:hidden 把超出的車款裁切消失。
   - 平板/桌機（>=768px）：維持「同一排、不換行」，車輛之間的間距
     與每輛車的寬度透過 flex-shrink 自動等比例壓縮，
     確保不管有幾台車，都能剛好塞進同一行，不出現捲軸。
   - justify-content: center：不管顯示幾款車，整排車款都置中對齊，
     車款較少時左右兩側平均留白，而不是靠左、右側留一大塊空白。 */
.home-cars .carsListRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 4px;
  overflow: visible; /* 確保不出現任何捲軸 */
}

@media (min-width: 768px) {
  .home-cars .carsListRow {
    flex-wrap: nowrap;
    gap: 16px;
  }
}

/* 每個車款的外層寬度：
   - 手機：一排 2 台（扣掉間距後約 45~48%寬）
   - 平板/桌機：不管實際顯示幾款車，永遠用「假設有 6 個格子」
     去計算每格寬度（100% 扣掉 5 個間距後平均分成 6 份），
     這樣才能確保 4 款、5 款、6 款車顯示時大小完全一致，
     車款較少時只是右側多留白，而不是把車輛撐大或縮小。
     flex-grow / flex-shrink 都設為 0，寬度完全固定不隨數量變動；
     未來萬一車款超過 6 款，才需要再放寬這裡的設計。 */
.home-cars .carsListRow .carsList {
  flex: 0 1 45%;
  max-width: 47%;
  min-width: 0;
}

@media (min-width: 768px) {
  .home-cars .carsListRow .carsList {
    flex: 0 0 calc((100% - 5 * 16px) / 6);
    max-width: none;
  }
}