/* ==========================================================================
   component.css — 可重用組件
   區塊標題 / 內頁 Hero / 車輛卡片 / 底部 CTA / 按鈕
   以及 4 個共用內容組件（實績案例 / 好評推薦 / 常見問題 / 延伸閱讀）
   ========================================================================== */

/* ===== 按鈕 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--text-color-inverse);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--text-color-inverse);
}

/* 「更多」按鈕（依設計稿：164×48、#A8141D、圓角 10px、文字 20px Medium、內 gap 28px） */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  min-width: 10.25rem;
  height: 3rem;
  padding: 0 var(--spacing-lg);
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  border-radius: var(--border-radius-btn);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-base);
}

.btn-more:hover {
  background-color: var(--color-primary);
  color: var(--text-color-inverse);
}

.btn-more img {
  width: 0.5rem;
  height: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   區塊標題（依設計稿）：中文主標在上、英文副標（Bodoni）在下
   置中款（成交案例等）可選底部細灰線
   ========================================================================== */
.section-header {
  margin-bottom: var(--spacing-2xl);
}

.section-header--center {
  text-align: center;
}

/* 中文主標：24px Medium 黑 */
.section-header__heading {
  color: var(--text-color);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* 英文副標：Bodoni 24px、字距略開、首字大寫感 */
.section-header__en {
  display: block;
  margin-top: var(--spacing-xs);
  font-family: var(--font-family-en);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--text-color);
  letter-spacing: 0.04em;
}

/* 底部細灰線（置中款橫跨） */
.section-header__rule {
  display: block;
  height: 1px;
  margin-top: var(--spacing-lg);
  background-color: var(--border-color);
}

/* ==========================================================================
   內頁區塊標題（依設計稿）：中文主標 + 右側紅線；副標前置黃色小色塊
   ========================================================================== */
/* 外層容器：包住標題列 + 副標，整體靠左、寬度收斂到內容（紅線自動延伸到副標尾端）
   依設計稿兩種變體：
   - 短版（商品專區）：副標短，紅線自然短
   - 長版（品牌簡介）：副標長，紅線自然長 */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  width: max-content;
  max-width: 100%;
}

/* 置中款（首頁等用 .section-header；內頁區塊標題若需要置中可加此 modifier） */
.section-heading--center {
  margin-left: auto;
  margin-right: auto;
}

/* 標題列：中文主標 + 紅線（紅線 flex:1 撐到副標尾端） */
.section-heading__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
}

/* 主標：紅 #A8141D、24px Medium */
.section-heading__title {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* 紅漸層線：自動撐滿標題右側剩餘空間（淡 → 濃 #830606，依設計稿） */
.section-heading__line {
  flex: 1;
  min-width: 0;
  height: 4px;
  background-image: linear-gradient(to right, rgba(131, 6, 6, 0.1), #830606);
}

/* 副標列：前置紅漸層色塊（32×4）+ 文字 */
.section-heading__lead {
  display: flex;
  align-items: center;
  gap: 1.4375rem; /* 23px */
  color: var(--text-color);
  font-size: var(--font-size-xl);
  margin: 0;
  white-space: nowrap;
}

.section-heading__mark {
  flex-shrink: 0;
  width: 2rem;
  height: 4px;
  background-image: linear-gradient(to left, rgba(131, 6, 6, 0.1), #830606);
}

/* ==========================================================================
   內頁 Hero 橫幅
   ========================================================================== */
/* 內頁 Hero：固定高度（依設計稿原始 px），寬度撐滿視窗。
   圖片用 cover 填滿（保比例、可能裁切兩端）。
   文字區用 flex column + padding-top（依設計稿 y 座標）對齊位置。
   預設高 360px（about / valuation），其他頁可在 page CSS override。 */
.page-hero {
  position: relative;
  width: 100%;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 156px;
  background-color: var(--bg-color-darker);
  background-image: var(--hero-bg); /* 由 PHP inline 變數帶入桌機圖 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--text-color-inverse);
}

/* 文字區：正常文檔流，由父層 padding-top 控制上方留白 */
.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 50rem;
  padding: 0 var(--spacing-lg);
}

/* 標題：王漢宗中明 40px 白、置中、陰影（依設計稿） */
.page-hero__title {
  font-family: "HanWangMingHeavy", var(--font-family-heading);
  font-size: var(--font-size-4xl);
  color: var(--text-color-inverse);
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-lg);
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.5));
}

/* 副標：20px 白 */
.page-hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--text-color-inverse);
  margin: 0;
}

/* ==========================================================================
   車輛卡片（首頁輪播 + 在庫頁網格共用）
   ========================================================================== */
.vehicle-card {
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

.vehicle-card__image {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--bg-color-gray);
}

.vehicle-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-card__body {
  padding: var(--spacing-md) 0 0;
}

/* 資訊列：左資訊 + 右價格（stretch 讓價格標撐滿全高） */
.vehicle-card__info {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--spacing-md);
}

/* 左側文字區可收縮，車名才能 ellipsis、價格標不會被擠出卡片（窄卡時尤甚） */
.vehicle-card__text {
  min-width: 0;
  flex: 1 1 auto;
}

.vehicle-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  min-width: 0; /* 讓子項可收縮，車名才能 ellipsis 不換行 */
}

/* 品牌標籤膠囊：1px #A8141D 邊框、圓角 60px、文字 16px #A8141D（依設計稿） */
.vehicle-card__tag {
  flex-shrink: 0;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--border-radius-full);
  color: var(--color-primary-dark);
  font-size: var(--font-size-base);
}

/* 車名：20px Medium #A8141D（依設計稿） */
.vehicle-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-dark);
  min-width: 0; /* flex 子項可收縮 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 車名連結：繼承標題樣式，hover 加底線提示可點 */
.vehicle-card__name-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.vehicle-card__name-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* 規格：16px #000（依設計稿） */
.vehicle-card__specs {
  color: var(--text-color);
  font-size: var(--font-size-base);
  margin: 0;
}

/* 紅色斜角價格標：白字 Bold、撐滿資訊列全高、文字垂直置中（依設計稿，左上斜切） */
.vehicle-card__price {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md)
    var(--spacing-2xl);
  clip-path: polygon(1.75rem 0, 100% 0, 100% 100%, 0 100%);
}

.vehicle-card__divider {
  margin: var(--spacing-md) 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

/* 查看車輛：右對齊、1px 黑框、16px 黑字、長箭頭（依設計稿） */
.vehicle-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  width: fit-content;
  margin-left: auto;
  padding: var(--spacing-xs) var(--spacing-lg);
  border: 1px solid var(--text-color);
  color: var(--text-color);
  font-size: var(--font-size-base);
  transition:
    border-color var(--transition-base),
    color var(--transition-base);
}

.vehicle-card__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.vehicle-card__link img {
  width: 2.5rem;
  height: auto;
}

/* 手機：車卡整體縮小（一頁 2 張 / 列表 2 欄共用） */
@media (max-width: 30rem) {
  /* 圖：設計稿滿版卡（300寬）圖高 194.3px（比例 300/194.3） */
  .vehicle-card__image {
    aspect-ratio: 300 / 194.3;
  }

  .vehicle-card__body {
    padding-top: var(--spacing-sm);
  }

  /* 名稱群（品牌標籤+車名+規格）為一組在上、價格改放下方（非右側同列） */
  .vehicle-card__info {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 車名：設計 13px line-height 22px、標籤↔車名 gap 3.9px */
  .vehicle-card__name {
    font-size: var(--font-size-base);
    line-height: 1.692;
  }

  .vehicle-card__name-row {
    gap: 0.244rem; /* 3.9px（標籤↔車名） */
    margin-bottom: 0.325rem; /* 5.2px（標籤群↔規格） */
  }

  /* 品牌標籤膠囊：設計 70×18px、圓角 39px、字 12px、0.7px 紅框 */
  .vehicle-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.375rem; /* 70px */
    height: 1.125rem; /* 18px */
    padding: 0;
    border-width: 0.7px;
    border-radius: 2.444rem; /* 39.13px */
    font-size: 0.75rem; /* 12px */
  }

  /* 規格：設計 12px */
  .vehicle-card__specs {
    font-size: 0.6rem;
  }

  /* 紅斜角價格標：放名稱群下方、靠右；尺寸 123×42px（依設計） */
  .vehicle-card__price {
    align-self: flex-end;
    width: 7.6875rem; /* 123px */
    height: 2.625rem; /* 42px */
    padding: 0 var(--spacing-md);
    justify-content: center;
  }

  /* 價格直接貼著分隔線（依設計，無間隔） */
  .vehicle-card__divider {
    margin: 0 0 var(--spacing-sm);
  }

  /* 查看車輛：設計框 118.7×23.5px、字 13px、文字↔箭頭 17.6px、長底線箭頭 32×4.8px */
  .vehicle-card__link {
    gap: 1.1rem; /* 17.6px */
    width: 7.419rem; /* 118.7px */
    height: 1.469rem; /* 23.5px */
    padding: 0;
    font-size: var(--font-size-base);
  }

  .vehicle-card__link img {
    width: 2rem; /* 32px 長底線箭頭 */
  }
}

/* ==========================================================================
   底部 CTA（想賣車? / 想買車?）依設計稿 285:24751
   左紅斜切色塊 + 右灰斜切色塊 + 中央車圖 + 兩顆斜切「了解更多」鈕
   ========================================================================== */
/* CTA 本體：無外框、無底色（綠底是 Figma 畫布，非元件一部分） */
.bottom-cta {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  aspect-ratio: 1400 / 340;
}

/* 中央藍寶堅尼正面車圖（透明 PNG，置於上方，露出車頭在色帶上） */
.bottom-cta__car {
  position: absolute;
  top: 0;
  left: 50%;
  width: 43%;
  max-width: 570px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* 左右兩半：絕對定位於容器下半部（色帶 + 標題） */
.bottom-cta__side {
  position: absolute;
  top: 35%;
  display: flex;
  align-items: center;
  width: 37%;
  height: 84px;
  padding: 0 11%;
  color: var(--text-color-inverse);
  text-decoration: none;
  z-index: 1;
}

.bottom-cta__side--sell {
  left: 0;
  justify-content: right;
}

.bottom-cta__side--buy {
  right: 0;
  justify-content: left;
}

/* 斜切色帶：絕對鋪滿側欄底層 */
.bottom-cta__band {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* 左色帶：紅色，左濃 #830606 → 右淡（外側深、向中央車圖漸淡，依設計稿） */
.bottom-cta__side--sell .bottom-cta__band {
  transform: skewX(9.97deg);
  background-image: linear-gradient(
    to left,
    #830606 1.85%,
    #7e3434 50.2%,
    rgba(255, 211, 211, 0) 102.78%
  );
}

/* 右色帶：灰黑，右濃 #141414 → 左淡（外側深、向中央車圖漸淡，依設計稿） */
.bottom-cta__side--buy .bottom-cta__band {
  transform: skewX(-9.97deg);
  background-image: linear-gradient(
    to right,
    #141414 1.85%,
    #4c4c4c 50.2%,
    rgba(122, 122, 122, 0) 102.78%
  );
}

/* 標題「想賣車?/想買車?」依設計稿用襯線斜體（中文楷體 / Bodoni 英文） */
.bottom-cta__title {
  position: relative;
  z-index: 1;
  font-family: "Bodoni Moda", "Noto Serif TC", "PMingLiU", "DFKai-SB", serif;
  font-size: 2.5rem; /* 40px 依設計稿 */
  font-weight: var(--font-weight-normal);
  font-style: italic;
  color: var(--text-color-inverse);
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 標題+按鈕群組：包住兩者，按鈕相對此容器絕對定位（依設計稿） */
.bottom-cta__group {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* 「了解更多」膠囊鈕（連結，貼群組角落 + 旋轉，依設計稿） */
.bottom-cta__btn {
  position: absolute;
  display: block;
  z-index: 3;
  overflow: hidden;
  border-radius: 9999px; /* 讓光閃過時被裁切在膠囊形狀內 */
  transition: transform var(--transition-base);
}

.bottom-cta__btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* 一道斜光：偽元素，從按鈕左邊滑到右邊 */
.bottom-cta__btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  opacity: 0;
}

.bottom-cta__btn:hover::after {
  animation: bottom-cta-shine 0.8s ease-out;
}

@keyframes bottom-cta-shine {
  0% {
    left: -60%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* 左：紅鈕貼群組左下角、稍微向右下傾（依設計稿 rotate 6.72deg） */
.bottom-cta__side--sell .bottom-cta__btn {
  left: -95px;
  top: 100%;
  transform: translateY(-30%) rotate(6.72deg);
  transform-origin: top left;
}

.bottom-cta__side--sell .bottom-cta__btn:hover {
  transform: translateY(-30%) rotate(5.72deg) scale(1.02);
}

/* 右：灰鈕貼群組右下角、稍微向左下傾（依設計稿 rotate -4.52deg） */
.bottom-cta__side--buy .bottom-cta__btn {
  right: -95px;
  top: 100%;
  transform: translateY(-30%) rotate(-6.72deg);
  transform-origin: top right;
}

.bottom-cta__side--buy .bottom-cta__btn:hover {
  transform: translateY(-30%) rotate(-5.72deg) scale(1.02);
}

/* 尊重使用者偏好：減少動畫時關閉光閃 */
@media (prefers-reduced-motion: reduce) {
  .bottom-cta__btn:hover::after {
    animation: none;
  }
}

/* === RWD === */
@media (max-width: 48rem) {
  /* 依手機設計稿：整體約 375×240.7（ratio≈1.558）、車圖較大置中偏上 */
  .bottom-cta {
    aspect-ratio: 375 / 240.7;
    margin: 42px auto 60px;
  }

  /* 車圖：設計 273.5×174.6 ≈ 寬 73%、置中偏上（top 22/240.7≈9%） */
  .bottom-cta__car {
    width: 73%;
    max-width: 273.5px;
    top: 9%;
  }

  /* 依手機設計稿：想賣車（紅帶+鈕）在車圖左上、想買車（灰帶+鈕）在右下，對角配置 */
  .bottom-cta__side {
    width: 60%;
    height: 56px;
  }

  /* 想賣車：左上角。容器 z-index:auto（不建立 stacking context），
     讓內部色帶/按鈕各自與車圖（z-index:2）比較層級：色帶在車下、按鈕在車上。 */
  .bottom-cta__side--sell {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    z-index: auto;
    justify-content: flex-start;
  }

  /* 紅色漸層色帶：手機版 skewX(9.97deg) + rotate(45deg)（依指定變形） */
  .bottom-cta__side--sell {
    transform: rotate(-4deg);
    height: 34px;
    width: 196px;
    justify-content: end;
  }

  /* 色帶壓在黑跑車之下（z-index < 車圖 2） */
  .bottom-cta__side--sell .bottom-cta__band {
    z-index: 1;
  }

  /* 按鈕浮在黑跑車之上（z-index > 車圖 2） */
  .bottom-cta__side--sell .bottom-cta__group,
  .bottom-cta__side--sell .bottom-cta__btn {
    z-index: 4;
  }

  .bottom-cta__side--sell .bottom-cta__btn {
    left: -80px;
    top: 90%;
  }

  /* 想買車：右下角（設計 gray-btn top:86% right:5%） */
  .bottom-cta__side--buy {
    top: auto;
    bottom: 6%;
    right: 0;
    left: auto;
    justify-content: flex-start;
    height: 34px;
    width: 196px;
    transform: rotate(4deg);
  }

  .bottom-cta__side--buy .bottom-cta__btn {
    transform: translateY(-56%) rotate(-8.5deg);
    right: -75px;
  }

  /* 標題「想賣車?/想買車?」：設計 16px HanWang */
  .bottom-cta__title {
    font-size: 1rem; /* 16px */
  }

  /* 想賣車（紅）文字向左傾、想買車（灰）文字向右傾（依設計稿傾斜） */
  .bottom-cta__side--sell .bottom-cta__title {
    transform: rotate(-4.5deg);
  }

  .bottom-cta__side--buy .bottom-cta__title {
    transform: rotate(4.5deg);
  }

  /* 了解更多膠囊鈕：設計字 13px Inter */
  .bottom-cta__btn {
    width: 100px;
    height: 32px;
  }

  /* 手機：膠囊鈕收回色帶下方緣內；紅鈕向右傾、灰鈕向左傾（依設計稿）
     覆寫桌機 top:100%/left:-95px 等外溢定位，避免跑出容器 */
  .bottom-cta__side--sell .bottom-cta__btn {
    transform: translateY(-60%) rotate(12.5deg);
    transform-origin: top left;
  }

  .bottom-cta__side--sell .bottom-cta__btn:hover {
    transform: translateY(-20%) rotate(4.5deg) scale(1.02);
  }

  .bottom-cta__side--buy {
    justify-content: flex-start;
  }

  .bottom-cta__side--buy .bottom-cta__btn {
    top: 100%;
    transform-origin: top right;
  }

  .bottom-cta__side--buy .bottom-cta__btn:hover {
    transform: translateY(-20%) rotate(-4.5deg) scale(1.02);
  }

  /* 區塊標題：手機改為可換行、寬度自適應，避免 max-content + nowrap 撐破版面 */
  .section-heading {
    width: auto;
    max-width: 100%;
    align-items: center;
  }

  .section-heading__lead {
    white-space: normal;
  }
}

@media (max-width: 30rem) {
  .section-heading__row {
    justify-content: center;
  }
  .bottom-cta__title {
    font-size: 1rem;
  }

  /* 內頁 Hero（全部內頁共用）：依設計稿手機版
     車背景圖高約 142px、標題卡疊於其上；主標 16px、副標 13px line-height 22px
     背景切換為手機專用圖（--hero-bg-mobile，無則回退桌機 --hero-bg） */
  .page-hero {
    height: 8.875rem; /* 142px（設計車圖高，各頁可覆寫） */
    padding-top: 3.125rem; /* 50px：標題卡浮在車圖中下（設計 top≈50） */
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }

  .page-hero__inner {
    justify-items: center;
  }

  .page-hero__title {
    font-size: 1rem; /* 16px */
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-sm); /* 8px */
  }

  .page-hero__subtitle {
    font-size: var(--font-size-base); /* 13px */
    line-height: 1.692; /* 22px */
    max-width: 274px;
  }

  /* 內頁區塊標題（在庫/案例/估價/展售據點/最新消息共用）：
     設計稿手機版 標題 13px 600、副標 13px line-height 22px、漸層線固定 100px */
  .section-heading__title {
    font-size: var(--font-size-base); /* 13px */
    font-weight: var(--font-weight-semibold); /* 600 */
  }

  .section-heading__line {
    flex: 0 0 6.25rem; /* 設計固定 100px（覆蓋桌機 flex:1 撐滿） */
  }

  .section-heading__lead {
    font-size: var(--font-size-base); /* 13px */
    line-height: 1.692; /* 22px */
  }

  /* 分頁（案例 / 最新消息共用）：設計稿手機 當前 24 黑底白、其他 25 白底黑框、字 13px */
  .pagination {
    gap: var(--spacing-sm); /* 8px */
  }

  .pagination__page {
    width: 1.5625rem; /* 25px */
    height: 1.5625rem;
    border: 1px solid #1e1e1e;
    font-size: var(--font-size-base); /* 13px */
    color: #1e1e1e;
  }

  /* 當前頁：24×24 黑底白字、無框 */
  .pagination__page.is-active {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    border-color: transparent;
  }

  /* Next：設計 81×25、字 13px */
  .pagination__next {
    height: 1.5625rem; /* 25px */
    font-size: var(--font-size-base); /* 13px */
    color: #1e1e1e;
  }
}

/* ==========================================================================
   共用組件區塊間距
   ========================================================================== */
.section-case-studies,
.section-reviews,
.section-faq,
.section-extended-reading {
  padding: var(--spacing-3xl) 0;
  background-color: var(--bg-color);
}

/* ==========================================================================
   .section-bar — 黑色橫條標題列（實績案例 / 好評推薦 / 常見問題 共用）
   依設計稿：1162×44 漸層黑底 + 標題置中 20px Medium 白 + 右側紅膠囊「展開」鈕
   ========================================================================== */
.section-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--spacing-md);
  border: 1px solid #0b2f53;
  background-image: linear-gradient(
    0deg,
    #141414 33%,
    #4c4c4c 156%,
    rgb(122, 122, 122) 228%
  );
  margin-bottom: var(--spacing-xl);
}

.section-bar__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-inverse);
  letter-spacing: 0.05em;
}

/* 紅膠囊「展開」按鈕：絕對定位右上 */
.section-bar__toggle {
  position: absolute;
  top: 50%;
  right: var(--spacing-md);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 75px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.25));
  transition: background-color var(--transition-base);
}

.section-bar__toggle:hover {
  background-color: var(--color-primary-dark);
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.25)) brightness(1.1);
}

/* 箭頭：header-white-arrow.svg 是朝下箭頭，展開狀態需翻轉成朝上 */
.section-bar__toggle-icon {
  flex-shrink: 0;
  width: 11px;
  height: 12px;
  transition: transform var(--transition-base);
}

/* 預設（展開狀態 aria-expanded="true"）：箭頭朝上（讓使用者知道點下去會收起） */
.section-bar__toggle[aria-expanded="true"] .section-bar__toggle-icon {
  transform: rotate(-180deg);
}

/* ==========================================================================
   實績案例：6 張卡 3×2 網格 + 5 個分頁點
   ========================================================================== */
/* 通用折疊：任何 [data-collapsible] 被加上 [data-collapsed] 時，
   隱藏 .section-bar 之後所有子元素（body / grid / dots / form 等）。
   涵蓋實績案例 / 好評推薦 / 常見問題 / 延伸閱讀。 */
[data-collapsible][data-collapsed] > .container > .section-bar ~ * {
  display: none !important;
}

.section-case-studies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md) 2.625rem; /* 列 16 / 欄 42 px（依設計稿） */
}

.case-card {
  display: flex;
  flex-direction: column;
}

.case-card__image {
  aspect-ratio: 360 / 296;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
}

.case-card__name {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-color);
}

/* 分頁點：5 個圓點，當前頁有紅圈外框 */
.section-case-studies__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md); /* 點間 16px */
  margin-top: var(--spacing-xl);
}

.section-case-studies__dots .dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-full);
  background-color: #d9d9d9;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.section-case-studies__dots .dot.is-active {
  width: 16px;
  height: 16px;
  background-color: var(--color-primary-dark);
  box-shadow:
    0 0 0 2px var(--bg-color),
    0 0 0 3px var(--color-primary-dark);
}

/* === RWD === */
@media (max-width: 64rem) {
  .section-case-studies__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  /* 實績案例：設計稿手機版維持 2 欄（圖卡各 46.88%）、欄間 gap 12px */
  .section-case-studies__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) var(--spacing-md); /* 列/欄 各 16→設計約12 */
  }

  /* 圖卡：設計圖高 123px、標題 13px line-height 22 */
  .case-card__image {
    aspect-ratio: 150 / 123;
  }

  .case-card__name {
    font-size: var(--font-size-base); /* 13px */
    line-height: 1.692; /* 22px */
  }

  /* --- section-bar 標題列（案例/好評/FAQ 共用）依設計稿手機版 --- */
  /* 橫條：設計 32px 高（覆蓋桌機 44） */
  .section-bar {
    height: 2rem; /* 32px */
    margin-bottom: var(--spacing-md);
  }

  /* 標題：設計 13px 600 line-height 22px */
  .section-bar__title {
    font-size: var(--font-size-base); /* 13px */
    font-weight: var(--font-weight-semibold); /* 600 */
    line-height: 1.692; /* 22px */
  }

  /* 展開膠囊鈕：設計 55px 寬、字 12px、icon↔字 gap 6px */
  .section-bar__toggle {
    gap: 6px;
    width: 55px;
    height: 22px;
    font-size: 0.75rem; /* 12px */
  }

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

/* ==========================================================================
   通用分頁點（實績案例 / 好評推薦 / 延伸閱讀 共用）
   5 個圓點，當前頁紅色 16×16 強調環、其他 8×8 灰
   ========================================================================== */
.section-case-studies__dots,
.section-reviews__dots,
.section-extended-reading__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.section-case-studies__dots .dot,
.section-reviews__dots .dot,
.section-extended-reading__dots .dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-full);
  background-color: #d9d9d9;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.section-case-studies__dots .dot.is-active,
.section-reviews__dots .dot.is-active,
.section-extended-reading__dots .dot.is-active {
  width: 16px;
  height: 16px;
  background-color: var(--color-primary-dark);
  box-shadow:
    0 0 0 2px var(--bg-color),
    0 0 0 3px var(--color-primary-dark);
}

/* ==========================================================================
   好評推薦：3 評價卡 + 寫評論表單（依設計稿 281:24067）
   ========================================================================== */
.section-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* 評價卡：白底圓角，padding 內距 */
.review-card {
  display: flex;
  flex-direction: column;
  padding: 2.625rem 2.1875rem var(--spacing-xl); /* 42 / 35 / 24 */
  background-color: var(--bg-color);
  box-shadow: 0 4px 22.2px 0 rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

/* 5 顆星：黃色填滿，間距 8.2px */
.review-card__stars {
  display: flex;
  gap: 0.5rem;
  color: #ffc83d;
}

.review-card__star {
  display: inline-flex;
  width: 24px;
  height: 23px;
}

.review-card__star:not(.is-filled) {
  color: #d9d9d9;
}

/* 評論文字：16px、line-height 1.5、margin-top 22 */
.review-card__text {
  margin: 1.375rem 0 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 雙圖：71×71 + 8px 間距 */
.review-card__photos {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--spacing-md);
}

.review-card__photo {
  width: 71px;
  height: 71px;
  border-radius: var(--border-radius-sm);
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
}

.review-card__divider {
  margin: var(--spacing-md) 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

/* 用戶列：頭像 64×64 圓 + 姓名 + 帳號 */
.review-card__user {
  display: flex;
  align-items: center;
  gap: 0.8125rem; /* 13px */
}

.review-card__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  line-height: 1;
}

.review-card__account {
  font-size: var(--font-size-base);
  color: var(--text-color-light);
  line-height: 1;
}

/* ==========================================================================
   寫評論表單：白底圓角 + 邊框（依設計稿 1142×374）
   ========================================================================== */
.review-form {
  margin-top: var(--spacing-2xl);
  padding: 1.75rem 2.125rem; /* 28 / 34 */
  background-color: var(--bg-color);
  border: 1px solid #a3a3a3;
  border-radius: var(--border-radius-md);
}

.review-form__title {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
}

.review-form__field {
  margin-bottom: var(--spacing-md);
}

.review-form__field--inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-form__field--content {
  align-items: stretch;
}

.review-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
}

.review-form__label {
  flex-shrink: 0;
  width: auto;
  padding-top: 6px;
  color: var(--text-color);
  font-size: var(--font-size-base);
}

.review-form__required {
  margin-left: 2px;
  color: var(--color-primary);
}

/* 評價星等選擇 */
.review-form__stars {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #d9d9d9;
}

.review-form__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 23px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: color var(--transition-base);
}

.review-form__star:hover,
.review-form__star.is-selected {
  color: #ffc83d;
}

/* 選中或 hover 時：path 改為實心填滿（覆蓋 HTML 的 fill="none" + stroke） */
.review-form__star.is-selected svg path,
.review-form__star:hover svg path {
  fill: currentColor;
  stroke: none;
}

/* 輸入框（姓名/信箱）：32 高、灰邊框 */
.review-form__input {
  flex: 1;
  height: 32px;
  padding: 0 var(--spacing-sm);
  border: 1px solid #a3a3a3;
  border-radius: 4px;
  font-size: var(--font-size-base);
  color: var(--text-color);
}

.review-form__input:focus {
  outline: none;
  border-color: var(--color-primary-dark);
}

.review-form__textarea {
  flex: 1;
  min-height: 100px;
  padding: var(--spacing-sm);
  border: 1px solid #a3a3a3;
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--text-color);
  resize: vertical;
}

.review-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary-dark);
}

/* 底列：上傳左、同意中、發布右 */
.review-form__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-left: 52px; /* 對齊輸入框內容 */
}

.review-form__upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #004dff;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.review-form__consent {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.review-form__submit {
  flex-shrink: 0;
  width: 138px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.review-form__submit:hover {
  background-color: var(--color-primary);
}

/* === RWD === */
@media (max-width: 64rem) {
  .section-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .review-form__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .review-form__footer {
    flex-wrap: wrap;
    padding-left: 50px;
  }

  .review-form__consent {
    margin-left: 0;
    flex: 1;
  }
}

@media (max-width: 30rem) {
  /* 好評推薦：設計稿手機版 2 欄、評論卡 150×160、卡間 gap 16px */
  .section-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md); /* 16px */
  }

  /* 評論卡：設計 150×160px、padding 8px、圓角 2px、內容上下靠齊（內部 gap 6px） */
  .review-card {
    height: 10rem; /* 160px */
    padding: var(--spacing-sm); /* 8px */
    border-radius: 2px;
    gap: 6px; /* 設計 left-review-content gap 6px */
    /* 陰影減小、收斂，避免被輪播 overflow 裁切（橫向擴散縮小） */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  /* 星群：設計 8×8px、星間 gap 4px、高 8px */
  .review-card__stars {
    height: 8px;
    gap: 4px;
  }

  .review-card__star {
    width: 8px;
    height: 8px;
  }

  /* 評論文字：設計 10px line-height 14.4、與星群 gap 4px（margin 控） */
  .review-card__text {
    margin: 4px 0 0;
    font-size: 0.625rem; /* 10px */
    line-height: 1.44;
  }

  /* 雙圖：設計 20×20px、圓角 1.1px、圖間 gap 4px */
  .review-card__photos {
    gap: 4px;
    margin-top: 4px;
  }

  .review-card__photo {
    width: 20px;
    height: 20px;
    border-radius: 1.1px;
  }

  /* 分隔線：設計 0.3px #a6a6a6；margin-top:auto 把用戶列頂到卡底 */
  .review-card__divider {
    margin: auto 0 var(--spacing-sm);
    border-top-width: 0.3px;
    border-top-color: #a6a6a6;
  }

  /* 用戶列：設計 gap 4px、頭像 24×24 */
  .review-card__user {
    gap: 4px;
  }

  .review-card__avatar {
    width: 24px;
    height: 24px;
  }

  /* 姓名 12px line-height 19.9、帳號 8px line-height 19.9 */
  .review-card__meta {
    gap: 0;
  }

  .review-card__name {
    font-size: 0.75rem; /* 12px */
    line-height: 1.66; /* ≈19.9px */
  }

  .review-card__account {
    font-size: 0.5rem; /* 8px */
    line-height: 2.49; /* ≈19.9px */
  }

  .review-form__upload,
  .review-form__consent {
    font-size: 8px;
  }

  .review-form__footer {
    justify-content: flex-end;
  }

  .review-form__submit {
    width: 100px;
    height: 24px;
    font-size: 12px;
  }

  /* 分頁點：設計 5px 灰 / 當前 10px、點間 gap 10px、與卡群距離較大 */
  .section-reviews__dots {
    gap: 10px;
    margin-top: 2.5rem; /* 設計 recommendation-card gap 41px ≈ 40px */
  }

  /* 寫評論表單：設計字級收斂、padding 收 */
  .review-form {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .review-form__title {
    font-size: var(--font-size-base); /* 13px */
    margin-bottom: var(--spacing-md);
  }

  .review-form__row {
    gap: var(--spacing-md);
  }
}

/* ==========================================================================
   常見問題（依設計稿 281:24176）
   左 5 張問題卡（474×94）+ 右答案面板（526×598）
   ========================================================================== */
.section-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 474fr) minmax(0, 526fr);
  gap: 3rem; /* 48px */
  align-items: start;
}

/* 左側問題清單 */
.section-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl); /* 32px */
}

.section-faq__list-item {
  margin: 0;
}

/* 單張問題卡：白底圓角 12px，含陰影 */
.faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 94px;
  padding: var(--spacing-lg) 2rem; /* 24 / 32 */
  border: 0;
  border-radius: 12px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  transition:
    color var(--transition-base),
    box-shadow var(--transition-base);
}

.faq-item:hover {
  color: var(--color-primary-dark);
}

.faq-item.is-active {
  color: var(--color-primary-dark);
}

.faq-item__title {
  flex: 1;
  min-width: 0;
}

/* 右箭頭：未選中朝下、選中（is-active）轉為朝左指向面板 */
.faq-item__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: currentColor;
  transform: rotate(90deg); /* 預設朝下 */
  transition: transform var(--transition-base);
}

.faq-item.is-active .faq-item__arrow {
  transform: rotate(0deg); /* 朝右 */
}

/* 右側面板 */
.section-faq__panel {
  position: relative;
  min-height: 598px;
}

.faq-panel {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* 48px */
  min-height: 598px;
  padding: 3.5rem 3.25rem; /* 56 / 52 */
  background-color: var(--bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.faq-panel[hidden] {
  display: none;
}

.faq-panel__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-primary-dark);
}

.faq-panel__content {
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--text-color);
}

.faq-panel__content p {
  margin: 0 0 var(--spacing-sm);
}

.faq-panel__content p:last-child {
  margin-bottom: 0;
}

/* === RWD === */
@media (max-width: 64rem) {
  .section-faq__layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .section-faq__panel,
  .faq-panel {
    min-height: 0;
  }

  .faq-panel {
    padding: var(--spacing-xl);
  }
}

@media (max-width: 30rem) {
  /* 問題卡：設計 64px 高、圓角 4px、字 13px line-height 22px、卡間 gap 32px */
  .faq-item {
    min-height: 4rem; /* 64px */
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-sm); /* 4px */
    font-size: var(--font-size-base); /* 13px */
    line-height: 1.692; /* 22px */
  }

  .section-faq__list {
    gap: var(--spacing-xl); /* 設計卡間 32px */
  }

  /* 展開答案面板：設計圓角 12px、答案 12px */
  .faq-panel {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
    border-radius: 12px;
  }

  .faq-panel__title {
    font-size: var(--font-size-base); /* 13px */
    line-height: 1.692; /* 22px */
  }

  .faq-panel__content {
    font-size: 0.75rem; /* 12px（設計答案 12px） */
  }
}

/* ==========================================================================
   延伸閱讀（依設計稿 281:24210）
   白色「延伸閱讀」膠囊（疊黑條） + 3 文章卡 + 分頁點 + 紅色「更多文章 →」
   ========================================================================== */

/* 白色膠囊標籤：白卡 193×46.5，疊在黑色長條 212×48 上（向右下偏移 9/8） */
/* 延伸閱讀標題（依設計稿 index.css 精確值）：
   黑漸層塊 top:8 left:0 212×48 在後、白框 top:0 left:9 193×46.5 疊在前上方，
   白框邊框為黑灰漸層、底白，露出後方黑塊的左、下邊形成立體感 */
.extended-reading-header {
  position: relative;
  width: 202px; /* 9 + 193（白框右緣） */
  height: 56px; /* 8 + 48（黑塊底緣） */
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-size-xl); /* 20px */
  color: var(--text-color);
}

/* 黑漸層塊（後層）：1px 白邊 */
.extended-reading-header__shadow {
  position: absolute;
  top: 8px;
  left: 0;
  width: 212px;
  height: 48px;
  border: 1px solid var(--bg-color);
  box-sizing: border-box;
  background: linear-gradient(-1.95deg, #141414, #4c4c4c 63.01%, #7a7a7a);
}

/* 白框（前層）：白底 + 黑灰漸層邊框（padding-box 白 / border-box 漸層）*/
.extended-reading-header__label {
  position: absolute;
  top: 0;
  left: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 193px;
  height: 46.5px;
  margin: 0;
  padding: 19px 56px 19px 57px;
  box-sizing: border-box;
  border: 1px solid #000;
  background: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  white-space: nowrap;
}

/* 3 卡網格 */
.section-extended-reading__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem; /* 40px */
  margin-bottom: 2.125rem; /* 34px */
}

/* 單張文章卡：上灰圖 + 下白卡 */
.article-card {
  display: flex;
  flex-direction: column;
}

.article-card__image {
  aspect-ratio: 380 / 236;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* 48px */
  padding: 2.1875rem 1.8125rem; /* 35 / 29 */
  background-color: var(--bg-color);
  filter: drop-shadow(0 14.9px 7.45px rgba(0, 0, 0, 0.15));
}

/* 標題列：標題+簡述靠左，日期靠右 */
.article-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

.article-card__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
  min-width: 0;
  flex: 1;
}

.article-card__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  line-height: 1.2;
}

.article-card__excerpt {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-color);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__date {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-color);
  line-height: 1;
}

/* 「查看更多」按鈕：白底黑邊框 245×40 */
.article-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 245px;
  max-width: 100%;
  height: 40px;
  border: 1px solid #141414;
  background-color: var(--bg-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.article-card__more:hover {
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  border-color: var(--color-primary-dark);
}

/* 「更多文章 →」紅色按鈕 */
.section-extended-reading__more {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.extended-reading-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  min-width: 178px;
  height: 48px;
  padding: 0.375rem 1.8125rem; /* 6 / 29 */
  background-color: var(--color-primary-dark);
  color: var(--text-color-inverse);
  font-size: 1.5rem; /* 24px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-base),
    transform var(--transition-base);
}

.extended-reading-more-btn:hover {
  background-color: var(--color-primary);
  transform: translateX(2px);
}

.extended-reading-more-btn__text {
  line-height: 1;
}

.extended-reading-more-btn__arrow {
  flex-shrink: 0;
}

/* === RWD === */
@media (max-width: 64rem) {
  .section-extended-reading__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .article-card__head {
    flex-direction: column;
    gap: 0.5rem;
  }

  .article-card__date {
    align-self: flex-end;
  }
}

@media (max-width: 30rem) {
  /* 延伸閱讀：設計稿手機版維持 2 欄文章卡（152×165）、欄間 12px */
  .section-extended-reading__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md); /* 12~16px */
  }

  /* 白色「延伸閱讀」膠囊標籤：設計縮為約 108×42、字 13px 600 */
  .extended-reading-header {
    width: 108px;
    height: 42px;
    font-size: var(--font-size-base); /* 13px */
  }

  .extended-reading-header__shadow {
    width: 108px;
    height: 34px;
  }

  .extended-reading-header__label {
    left: 5px;
    width: 98px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    font-weight: var(--font-weight-semibold); /* 600 */
  }

  /* 「更多文章」紅鈕：設計 62×20、字 10px */
  .extended-reading-more-btn {
    min-width: 0;
    width: 3.875rem; /* 62px */
    height: 1.25rem; /* 20px */
    padding: 0;
    gap: var(--spacing-xs);
    font-size: 0.625rem; /* 10px */
  }

  /* 右側箭頭：設計寬 5px */
  .extended-reading-more-btn__arrow {
    width: 5px;
    height: auto;
  }
}

/* ==========================================================================
   文章 / 案例卡片（最新消息頁 + 成交案例頁共用）
   依設計稿：3 欄網格、灰底佔位圖、白內容區、卡片陰影、黑框「查看更多」鈕。
   ========================================================================== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.article-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-color-light);
  padding: var(--spacing-3xl) 0;
}

.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  /* 更柔、更輕的陰影（橫向擴散收斂，避免被輪播裁切） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 圖片：16:9 灰底佔位；有縮圖則填滿 */
.article-card__image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--bg-color-gray);
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

/* 標題列：左標題 + 右日期 */
.article-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

.article-card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-color);
}

.article-card__date {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--text-color-light);
}

.article-card__excerpt {
  margin: 0;
  width: 100%;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
}

/* 查看更多：黑框白底，水平置中、不滿寬（兩頁統一黑框） */
.article-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-2xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid var(--text-color);
  background-color: var(--bg-color);
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.article-card__more:hover {
  color: var(--text-color-inverse);
  background-color: var(--text-color);
}

/* ==========================================================================
   分頁（圓點數字 1 2 3 + Next ›）— 依設計稿
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-3xl);
}

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-base);
  color: var(--text-color);
  text-decoration: none;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.pagination__page:hover {
  background-color: var(--bg-color-gray);
}

.pagination__page.is-active {
  background-color: var(--bg-color-darker);
  color: var(--text-color-inverse);
  font-weight: var(--font-weight-bold);
}

.pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  color: var(--text-color);
  text-decoration: none;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.pagination__next:hover {
  background-color: var(--bg-color-gray);
}

/* ===== RWD：網格降欄 ===== */
@media (max-width: 64rem) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

@media (max-width: 30rem) {
  /* 手機：成交案例 / 最新消息列表 2 欄、卡片縮小（依設計稿 152×165 小卡）
     欄間 gap 12px、列間 20px */
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem; /* 列 20px / 欄 12px */
  }

  /* 圖灰底佔位（設計 #d9d9d9、佔卡高 47.88%≈79/165） */
  .article-card__image {
    aspect-ratio: 152 / 79;
    background-color: #d9d9d9;
  }

  /* 白卡內容區：設計 padding 8px 6px、內 gap 14px、陰影、內容靠左 */
  .article-card__body {
    align-items: stretch;
    padding: 0.5rem 0.375rem; /* 8px 6px */
    gap: 0;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
  }

  /* 標題列：設計為橫排（標題左、日期右）、標題↔日期 gap 40px */
  .article-card__meta {
    flex-direction: column;
    align-items: center;
    gap: 5px; /* 40px */
  }

  /* 標題：設計 line-height 16.8px（字級沿用，行高收緊） */
  .article-card__title {
    font-size: 0.75rem; /* 12px，貼近設計 */
    line-height: 1.4; /* ≈16.8px */
  }

  /* 日期：設計 8px line-height 15.21、寬 48px */
  .article-card__date {
    font-size: 0.5rem; /* 8px */
    line-height: 1.9; /* ≈15.21px */
    width: 3rem; /* 48px */
    flex-shrink: 0;
  }

  /* 內文：設計 10px line-height 14.4 */
  .article-card__excerpt {
    font-size: 0.625rem; /* 10px */
    line-height: 1.44; /* 14.4px */
    margin: 4px auto 14px;
  }

  /* 查看更多：設計框 73×16px、黑框、padding 0 8、字 10px line-height 14.4 */
  .article-card__more {
    width: 4.5625rem; /* 73px */
    height: 1rem; /* 16px */
    padding: 0 0.5rem; /* 0 8px */
    font-size: 0.625rem; /* 10px */
    line-height: 1.44;
    align-self: center;
  }
}