/* ==========================================================================
   page-vehicles.css — 在庫車輛 專屬樣式
   區塊：商品專區（搜尋 + 篩選）+ 車卡網格（重用 .vehicle-card）+ 分頁
   區塊標題（.section-heading）與內頁 Hero 在 component.css。
   ========================================================================== */

/* 本頁 Hero 固定高 284px、文字頂端 y=140px（覆蓋 component.css 預設） */
.page-hero {
  height: 284px;
  padding-top: 140px;
}

/* ===== 商品專區（搜尋 + 篩選） ===== */
.vehicles-search {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  background-color: var(--bg-color);
}

/* 搜尋 / 篩選整列：深色漸層底（依設計稿，同關於我們卡片漸層） */
.vehicles-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: linear-gradient(0deg, #141414 33%, #4c4c4c 100%, #7a7a7a 100%);
}

/* --- 搜尋框：白底圓角 60px + 黃色 icon 鈕 --- */
.vehicles-filter__search {
  display: flex;
  width: 100%;
  max-width: 82.5rem; /* 1319px */
  height: 48px;
  overflow: hidden;
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
}

.vehicles-filter__keyword {
  flex: 1;
  border: 0;
  padding: 0 var(--spacing-lg);
  background-color: var(--bg-color);
  font-size: var(--font-size-xl);
  color: var(--text-color);
}

.vehicles-filter__keyword::placeholder {
  color: #9d9d9d;
}

/* 黃色搜尋 icon 鈕 */
.vehicles-filter__search-btn {
  flex-shrink: 0;
  width: 7.6875rem; /* 123px */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  cursor: pointer;
}

/* --- 篩選下拉列 --- */
.vehicles-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md) 2.6875rem; /* 設計稿欄間 43px */
}

.vehicles-filter__field {
  display: flex;
  align-items: center;
  gap: 0.8125rem; /* 13px */
}

/* 標籤：白字 20px Medium */
.vehicles-filter__label {
  color: var(--text-color-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* 下拉：白底、168×40、placeholder 灰 + 箭頭 */
.vehicles-filter__select {
  position: relative;
  display: block;
  width: 10.5rem; /* 168px */
  height: 2.5rem;
  background-color: var(--bg-color);
}

.vehicles-filter__select select {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 2rem 0 var(--spacing-md);
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--text-color);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 自訂下拉箭頭 */
.vehicles-filter__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--spacing-md);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-color);
  border-bottom: 2px solid var(--text-color);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* 搜尋鈕：紅底白字 164×52 + icon */
.vehicles-filter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 10.25rem; /* 164px */
  height: 3.25rem; /* 52px */
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.vehicles-filter__submit:hover {
  background-color: var(--color-primary);
}

/* ===== 結果 + 車卡網格 ===== */
.vehicles-list {
  padding: 0 0 var(--spacing-3xl);
  background-color: var(--bg-color);
}

/* 搜尋結果（依設計稿）：「車輛搜尋結果」紅、「共 X 筆」黑，較大字級 */
.vehicles-list__count {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.vehicles-list__count-label {
  color: var(--color-primary-dark);
}

.vehicles-list__count-num {
  color: var(--text-color);
}

/* 車卡網格：3 欄、卡間距 24px（依設計稿） */
.vehicles-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2xl) var(--spacing-lg);
}

.vehicles-list__empty {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  color: var(--text-color-light);
}

/* ===== 分頁（依設計稿：數字圓形、當前黑填滿、其餘黑邊空心、Next 膠囊） ===== */
.vehicles-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

/* 預設：數字頁是 24×24 圓、1px 黑邊空心 */
.vehicles-list__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--text-color);
  border-radius: var(--border-radius-full);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  background-color: transparent;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

/* 當前頁：黑底白字實心圓 */
.vehicles-list__pagination .page-numbers.current {
  background-color: var(--text-color);
  color: var(--text-color-inverse);
}

/* hover：淺底反白 */
.vehicles-list__pagination a.page-numbers:hover {
  background-color: var(--text-color);
  color: var(--text-color-inverse);
}

/* Next › / 上一頁：黑框膠囊，較長、有 padding */
.vehicles-list__pagination .next.page-numbers,
.vehicles-list__pagination .prev.page-numbers {
  width: auto;
  height: 1.5rem;
  padding: 0 var(--spacing-md);
  border-radius: var(--border-radius-full);
}

/* ==========================================================================
   RWD（斷點由大到小：1024 / 768 / 480；頁面 RWD 寫在本檔避免被覆蓋）
   ========================================================================== */

/* ===== 平板（max-width: 1024px）：車卡 3 → 2 欄 ===== */
@media (max-width: 64rem) {
  .vehicles-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 平板直版 / 大手機（max-width: 768px） ===== */
@media (max-width: 48rem) {
  /* 篩選列：改直向、下拉撐寬 */
  .vehicles-filter__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .vehicles-filter__field {
    justify-content: space-between;
  }

  .vehicles-filter__select {
    width: 60%;
  }

  .vehicles-filter__submit {
    width: 100%;
  }
}

/* ===== 手機（max-width: 480px）：車卡 2 欄 ===== */
@media (max-width: 30rem) {
  .vehicle-card__price {
    margin-top: 12px;
  }
  /* Hero 高度依設計稿手機版車圖（覆蓋本頁桌機 284px） */
  .page-hero {
    height: 8.875rem; /* 142px */
    padding-top: 3.125rem; /* 50px */
  }

  /* 手機：車卡 2 欄、欄間 12px / 列間 24px（依設計稿） */
  .vehicles-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg) var(--spacing-md); /* 列 24 / 欄 16→設計12，取最接近階 */
  }

  /* 卡片可縮，避免圖片 min-content 撐寬軌道造成橫向溢出 */
  .vehicle-card {
    min-width: 0;
  }

  .vehicles-filter {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* 搜尋框：高 28px、關鍵字字 13px、黃鈕縮為 icon 寬 40px（設計） */
  .vehicles-filter__search {
    height: 1.75rem; /* 28px */
  }

  .vehicles-filter__keyword {
    font-size: var(--font-size-base); /* 13px */
  }

  .vehicles-filter__search-btn {
    width: 2.5rem; /* 40px */
  }

  /* 下拉列：每列 label↔下拉 橫排、label 13px 600、下拉高 24/字 12 */
  .vehicles-filter__field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.8125rem; /* 13px */
  }

  .vehicles-filter__label {
    font-size: var(--font-size-base); /* 13px */
    font-weight: var(--font-weight-semibold); /* 600 */
  }

  .vehicles-filter__select {
    width: 10.5rem; /* 168px */
    height: 1.5rem; /* 24px */
  }

  .vehicles-filter__select select {
    font-size: 0.75rem; /* 12px */
  }

  /* 搜尋鈕：設計 232×28、字 13px */
  .vehicles-filter__submit {
    width: 100%;
    height: 1.75rem; /* 28px */
    font-size: var(--font-size-base); /* 13px */
  }

  /* 結果數：設計 13px */
  .vehicles-list__count {
    font-size: var(--font-size-base); /* 13px */
  }

  /* 分頁：間距收為 8px、Next 膠囊維持自適應寬（設計約 81px） */
  .vehicles-list__pagination {
    gap: var(--spacing-sm); /* 8px */
  }
}