/* ============================================================
   電動電單車 lane — 卡 .card--moto ／ 詳情 hero .moto-hero
   沿用現站 token：#212320 #c6a66b #a98a51 #f6f5f1 #fff #e2dfd7
                   --radius 10px  --maxw 1180px  --ink-soft #4a4d47
   深底衍生值只有 3 個（--m-muted / --m-gold-lt / --m-line）：
   --ink-soft 喺墨底只有 1.84:1，唔可以照搬（見 spec §3）。
   ============================================================ */

/* ---------- 0. 頁頭細字（示意圖聲明）＋ 頁底先租後買 ---------- */
.page-note {
  max-width: 44em;
  margin: 0 0 22px;
  font-size: 13px; line-height: 1.7;
  color: var(--ink-soft);
}
.rentbuy {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 20px;
  margin: 26px 0 0; padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.rentbuy h2 { margin: 0; font-size: 18px; }
.rentbuy p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.rentbuy .btn { margin-left: auto; }

/* ---------- 1. 卡：墨底「陳列櫃」，同汽車白卡一眼分得開 ----------
   分別靠 5 樣，唔靠顏色：
   ① 相 4:5 直度（汽車 4:3 橫度）  ② 底反轉（紙白 → 墨）
   ③ 頂邊 3px 金線                 ④ 相角「車款示意圖」標籤
   ⑤ 資料結構：車款名＋一行副行＋價錢／睇詳情（汽車係年份·容積·地區＋價錢）
   灰階／色盲／縮到 213px 闊都仲分得出。 */
.cards--moto {
  display: grid; gap: 18px;
  /* 欄寬下限 276px（唔係 300）：320 闊手機內容欄只有 280，300 下限會令卡
     頂出右邊界食晒 padding。276 喺 320→1440 全部闊度得出同一個欄數
     （320 1 欄／768 2 欄／1024 以上 3 欄），所以改下限唔會改版面。 */
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
}
.card--moto {
  --m-on: #fff;
  --m-muted: #b9bcb6;      /* 8.24:1 on #212320 */
  --m-gold: var(--gold);   /* 6.84:1 */
  --m-gold-lt: #e6ce93;    /* 10.27:1 */
  --m-line: rgba(255, 255, 255, .16);
  position: relative;
  display: flex;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--m-on);
  transition: border-color .15s ease;
}
.card--moto::before {          /* 3px 金頂線：唔靠色都認得 */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gold);
  z-index: 2;
}
.card--moto:hover { border-color: var(--gold-deep); }
.card--moto:focus-within { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

/* 整張卡一個連結：唔會出現巢狀 <a>，手機成張撳得中 */
.card--moto .moto-link {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}

/* 相 4:5（1080×1350 原圖直接落，唔硬裁） */
.card--moto .card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: #141513;
}
.card--moto .card-media img { width: 100%; height: 100%; object-fit: cover; }

/* 「車款示意圖」角標：GTM 驗收項，每張相都要有。
   底 90% 實墨 → 相再白都保證白字 ≥14:1 */
.card--moto .media-tag,
.moto-hero .media-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(18, 19, 17, .9);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 11px; line-height: 1.35; letter-spacing: .03em;
}

.card--moto .card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 14px 16px 16px;
}
/* 卡標唔預留空行：價錢行貼底（margin-top:auto）＋ grid 同排自動等高等高，
   所以 5 張卡嘅價錢基線照樣對齊，但單行標題唔會頂住一大條空隙 */
.card--moto h3 {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--m-on);
}
/* 副行：借用現站 .card-meta，只換深底用色 */
.card--moto .card-meta {
  margin: 0 0 10px;
  font-size: 14px; line-height: 1.45;
  color: var(--m-muted);
}
/* 價錢／掣貼底 → 一行卡價錢基線對齊。min-height 令有價同查詢兩個狀態
   高度一樣，切狀態唔會推高成張卡 */
.card--moto .card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: auto 0 0;
  min-height: 42px;
  padding-top: 11px;
  border-top: 1px solid var(--m-line);
}
.card--moto .card-price {
  margin: 0;
  display: flex; align-items: center;
  min-height: 27px;                   /* 有價／查詢兩個狀態佔同一個盒高，
                                         令同一頁混住兩種狀態時價錢盒底都對得齊 */
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--m-gold-lt);            /* 查詢狀態 */
}
.card--moto .card-price.has-num {
  font-size: 19px; font-weight: 700;
  color: var(--m-gold);               /* 有價狀態 */
}
.card--moto .card-go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px;
  border-radius: 999px;
  background: var(--gold); color: var(--ink);
  font-size: 13px; font-weight: 600;
}
.card--moto:hover .card-go { background: var(--gold-deep); color: #fff; }
/* 未上相：唔出灰色假格，出字（同 /buy「無相」處理一致） */
.card--moto .media--empty {
  display: flex; align-items: center; justify-content: center;
  background: #191a18;
  padding: 0 18px;
}
.card--moto .media--empty .ph {
  font-size: 13px; line-height: 1.7; text-align: center;
  color: var(--m-muted);
}

/* ---------- 2. 詳情 hero：同一塊墨，卡點入去唔會「跳白」 ---------- */
.moto-hero { background: var(--ink); color: #fff; }
.moto-hero .in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 20px 40px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 44px;
  align-items: center;
}
.moto-hero .media {
  position: relative;
  aspect-ratio: 4 / 5;         /* 同卡一樣 4:5 */
  border-radius: var(--radius);
  overflow: hidden;
  background: #141513;
}
.moto-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.moto-hero .media-tag { left: 12px; bottom: 12px; font-size: 12px; padding: 5px 10px; }

.moto-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.18; font-weight: 700;
  color: #fff;
}
.moto-hero .sub {
  margin: 0 0 20px;
  font-size: 15px; line-height: 1.7;
  color: #b9bcb6;
}
.moto-hero .price {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800; line-height: 1.15;
  color: #e6ce93;              /* 查詢狀態 */
}
.moto-hero .price.has-num { color: var(--gold); }
.moto-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.moto-hero .btn-gold,
.moto-hero .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.moto-hero .btn-gold { background: var(--gold); color: var(--ink); border: 1px solid var(--gold); }
.moto-hero .btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.moto-hero .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .42); }
.moto-hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.moto-hero .btn-gold:focus-visible,
.moto-hero .btn-ghost:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* 規格：label 固定 88px、逐行髮絲線；白色數值最多行 */
.moto-hero .spec-list { margin: 0; max-width: 460px; }
.moto-hero .spec-list > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.moto-hero .spec-list > div:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
.moto-hero .spec-list dt { margin: 0; font-size: 13px; color: #b9bcb6; }
.moto-hero .spec-list dd { margin: 0; font-size: 15px; color: #fff; }
/* 代理規格來源註（逐字，GTM 驗收項） */
.moto-hero .src {
  max-width: 460px;
  margin: 12px 0 0;
  font-size: 12px; line-height: 1.7;
  color: #b9bcb6;
}

/* ---------- 3. 詳情正文（紙底） ---------- */
.moto-body .desc { max-width: 42em; }
.moto-body .desc p { margin: 0 0 14px; font-size: 16px; line-height: 1.8; }
.moto-body .fine {
  max-width: 42em;
  margin: 18px 0 0; padding: 0;
  list-style: none;
  font-size: 13px; line-height: 1.9;
  color: var(--ink-soft);
}
.moto-body .fine li { margin: 0; }

@media (max-width: 860px) {
  .moto-hero .in { grid-template-columns: 1fr; gap: 20px; padding: 20px 20px 32px; }
  .moto-hero .media { max-width: 420px; }
  .moto-hero .spec-list,
  .moto-hero .src { max-width: none; }
}
@media (max-width: 560px) {
  .moto-hero .in { padding: 14px 14px 28px; gap: 18px; }
  .moto-hero .media { max-width: none; }
  .moto-hero h1 { font-size: 26px; }
  .moto-hero .sub { font-size: 14px; margin-bottom: 14px; }
  .moto-hero .price { margin-bottom: 14px; }
  .moto-hero .cta { gap: 8px; margin-bottom: 20px; }
  .moto-hero .cta > a { flex: 1 1 100%; }
  .moto-hero .spec-list > div { grid-template-columns: 76px 1fr; gap: 10px; padding: 7px 0; }
  .rentbuy { padding: 14px 16px; }
  .rentbuy .btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .card--moto, .moto-hero .btn-gold, .moto-hero .btn-ghost { transition: none; }
}
/* GDM 電單車買賣頁 hero — v2（業主 2026-10-29 拍板：桌面用第 5 張、手機用第 7 張）
   落地方式：整段貼入站內 CSS；只新增 .hero-moto 一組，唔改現有 token。
   圖片放到 /img/ 之下（檔名見 HANDOFF.md）。 */

.hero-moto{
  --gold:#c6a66b;             /* 防被首頁 :root（#B08D4F）蓋走；本站 style.css 本來就係 #c6a66b */
  position:relative;
  display:flex;
  align-items:center;
  width:100%;                 /* 必要：單靠 aspect-ratio + max-height，Chrome 會把闊度縮到 1484（1920 機）留下白邊 */
  aspect-ratio:1920/828;      /* 高度跟闊度：1024→441、1280→552、1440→620，cover 零水平裁切 */
  min-height:440px;
  /* max-height 640 喺 ≥1734 闊會令 cover 垂直裁 188px，切走前後輪（實測）→ 高度只跟比例，唔封頂 */
  background-color:#0C0D0F;                        /* 對齊圖左邊，圖未載入都唔會閃白 */
  background-image:url(/img/moto-hero-desktop.jpg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero-moto__in{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:minmax(0,44%) 1fr;   /* 左 44% = 圖嘅文字場，唔會壓到相 */
}

.hero-moto__copy{max-width:440px;padding-right:16px}

.hero-moto__eyebrow{
  margin:0 0 14px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--gold);            /* #c6a66b on #0C0D0F = 8.40:1 */
}

.hero-moto h1{
  margin:0 0 14px;
  font-size:clamp(30px,3.1vw,42px);
  line-height:1.18;
  font-weight:800;
  color:#fff;
  letter-spacing:.01em;
}

.hero-moto__sub{
  margin:0 0 26px;
  font-size:15px;
  line-height:1.65;
  color:#A9AFB4;                /* 8.78:1 */
}

.hero-moto__actions{display:flex;flex-wrap:wrap;gap:12px}

.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 26px;border-radius:8px;
  background:var(--gold);color:#1A1A1A;         /* 7.52:1 */
  font-size:15px;font-weight:600;text-decoration:none;border:0;
}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:8px;
  background:transparent;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.34);font-size:15px;font-weight:600;
}
.btn-gold:focus-visible,.btn-ghost:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 平板／手機（≤1023）：相獨立成帶（高度有上限），文字永遠喺相下面，唔會壓相 */
.hero-moto__media{display:none}

@media (max-width:1023px){
  .hero-moto{
    display:block;
    aspect-ratio:auto;
    min-height:0;
    max-height:none;
    padding:0;
    background-image:none;
    background-color:#0C0D0F;
  }
  .hero-moto__media{
    display:block;
    width:100%;
    aspect-ratio:2/1;
    min-height:230px;
    /* 唔可以加 max-height：841–1023 闊會被夾到 420，cover 再上下裁 91px → 切前輪下半同把手頂（資料工程師 8000158 實截） */
    background:url(/img/moto-hero-band.jpg) center 45%/cover no-repeat;
  }
  .hero-moto__in{
    display:block;
    max-width:none;
    padding:24px 24px 30px;
    background:transparent;
  }
  .hero-moto__copy{max-width:520px}
  .hero-moto h1{font-size:34px}
}

@media (max-width:640px){
  .hero-moto__copy{max-width:none}
  .hero-moto__eyebrow{font-size:10px;margin-bottom:10px}
  .hero-moto h1{font-size:30px;margin-bottom:10px}
  .hero-moto__sub{font-size:13px;margin-bottom:22px}
  .hero-moto__actions{gap:10px}
  .btn-gold,.btn-ghost{flex:1 1 100%;min-height:46px}
}

/* 卡相角標：海報本身右下角已印住「車款示意圖」＋公司名／電話帶，
   CSS 角標改坐左下、抬高 44px（避開海報底部字帶），唔會同海報字疊埋 */
.card--moto .card-media .ph-note{
  left:8px; right:auto; bottom:44px;
  background:rgba(18,19,17,.9);
  border:1px solid rgba(255,255,255,.28);
  border-radius:4px;
  padding:5px 8px;
  font-size:11px; line-height:1.3;
}

/* ≥1921（超闊）：內容欄靠左，唔好再置中 —— 2560 時文字右邊會爬到 1138，越過相嘅 44% 場界 1126（UI 設計師 7999767 實測） */
@media (min-width:1921px){
  .hero-moto__in{margin-left:4vw;margin-right:0}
}

/* 今批卡相係社群海報，角標已烘入圖（右下「車款示意圖」）→ 頁面角標唔再顯示，免兩次疊字。
   下一批乾淨相（無烘字）到手：card markup 拎走 has-baked-badge 就自動見返頁面角標。
   DOM 仍然保留 .ph-note，gate F01（角標數＝圖數）照過。 */
.card--moto .card-media.has-baked-badge .ph-note{display:none}