/* ============================================================
   Course Kit 官網 — 下載頁樣式（page-download.css）
   跟 site.css 一起載入，site.css 在前。只有 download.html 用。

   三版沿革：初版內容太囉嗦（三步驟教學＋系統需求整段＋CTA 帶）；
   二版砍成左按鈕右 QR 的橫式卡，中間一大片空白，Lucy 判定是敷衍不是精簡；
   三版改成沿用 landing 那張 final-card 的置中卡設計（Lucy 已驗收過的版），
   規則從 page-landing.css 抄過來，因為 download.html 沒有載入 page-landing.css。
   內容維持精簡：不重複講上手教學（那是 help-quick-start.html 的事）。

   本檔管：頁首留白（.page-top，只設 padding-top，不可用 shorthand，
   否則 .wrap 左右 padding 會被歸零，h1 跟 header logo 對不齊）／
   置中下載卡（.dl-card 系列）／商店雙卡（.store-grid／.store-card）。
   ============================================================ */

.page-top h1{margin-top:6px}
.page-top .lead{margin-top:14px;max-width:62ch}

/* ============================================================
   2026-08-07 hero 改版：左文右圖兩欄（參照 Tailgrids app landing hero），商店徽章與
   信任行搬進首屏，不用再往下捲到 .dl-card 才看得到下載入口。.dl-card／#store 那組
   下載卡原樣保留（次要重申入口），這裡只管 hero 本身。
   ============================================================ */
.dl-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;margin-top:30px}
.dl-hero-text .lead{margin-top:16px}

/* 商店徽章（.store-badges/.store-badge）2026-08-07 搬進 site.css 共用
   （index 底部 CTA 也要用同一組），本檔只留下面媒體查詢的置中規則。 */

/* 信任行：3 顆頭像疊排（負 margin-left 疊出重疊感，白邊跟底色分隔）＋
   landing 頁既有的真實數字「300+ 人在用」，不放星評，事實凍結範圍內。 */
.dl-trust{display:flex;align-items:center;gap:12px;margin-top:24px}
.dl-trust-avatars{display:flex}
.dl-trust-avatars img{width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid var(--bg);margin-left:-10px}
.dl-trust-avatars img:first-child{margin-left:0}
.dl-trust span{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
/* 快速上手入口句（2026-08-07 頁尾下載卡刪除後補回動線）：比 300+ 那句降一階字重，
   連結用站內既有行內連結語彙（品牌色＋淡底線） */
.dl-trust-help{font-weight:500;color:var(--sub)}
.dl-trust-help a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:2px}
.dl-trust-help a:hover{text-decoration-color:var(--brand-text)}

/* 右欄：原本放單張深色手機外框截圖（.dl-phone），2026-08-07 二次改版換成輪播
   （.shot-carousel，結構與 JS 見本檔下方「主秀：App 截圖中心放大輪播」段落，那裡的
   尺寸規則是給右欄用的，因為現在全站只剩這一處在用 .shot-carousel）。
   flex-direction 改 column：JS 把 .shot-dots 插在 .shot-carousel 的 afterend，
   兩者是 .dl-hero-img 底下的手足元素，row 排列會被擠到輪播右邊，改 column 讓
   dots 落到輪播正下方；align-items 負責水平置中，justify-content 負責在
   grid row（跟左欄文字對齊那格）內垂直置中。 */
.dl-hero-img{display:flex;flex-direction:column;align-items:center;justify-content:center}

@media (max-width:768px){
  .dl-hero{grid-template-columns:1fr;text-align:center}
  .store-badges,.dl-trust{justify-content:center}
  .dl-hero-img{margin-top:8px}
}

/* ---------- 置中下載卡（視覺沿用 landing 的 .final-card，2026-08-01 batch4 把背景／
   邊框／圓角／padding／陰影收斂進 site.css 的 .final-card,.dl-card 共用選擇器，
   這裡只留 download 頁自己的間距與文案排版） ----------
   2026-08-03：拿掉原本的 margin-top:36px。那條規則是「dl-card 緊貼在 hero 下面」
   時代的產物；下載卡搬到最後一個 section 後，跟 landing 的 .final-card 一樣改吃
   包住它的 section 本身的間距（見本檔最下面 style="padding-top:0" 的規則），
   不用卡片自己再加一層 margin，否則會跟 .free-tools 的 pad-sec 疊出上緊下鬆。 */
.dl-otter{margin:0 auto 12px}   /* otter-b 仰躺是橫幅，比站姿要寬 */
.dl-card h2{font-size:clamp(22px,3vw,30px);text-wrap:balance}
.dl-card .lead{margin:12px auto 0;max-width:46ch}

/* ---------- 商店雙卡（比裸按鈕多給平台名與一句補充，填掉二版的空白） ---------- */
.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;
  max-width:620px;margin-left:auto;margin-right:auto}
.store-card{display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--r-md);
  padding:24px 20px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.store-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.store-card .plat{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.store-card .name{font-size:var(--fs-lg);font-weight:800;color:var(--heading)}
.store-card .sub{font-size:var(--fs-sm);color:var(--sub)}

/* ---------- QR 與平台說明（沿用 landing 的 .qr／.platforms，2026-08-01 batch4 收斂進
   site.css 的 .qr,.dl-qr 共用選擇器。.dl-qr 的 margin-top 原本要跟 landing 統一成 30px，
   但那樣會讓 landing 頁位移超出驗收紅線，所以退回維持各頁分開設定：本頁本來就是
   30px，不用改；.dl-plat 的 margin-top 跟 landing 的 .platforms 本來就不同（24 vs 22），
   不在這批授權的 drift 清單內，也維持分開設定） ---------- */
.dl-qr{margin-top:30px}
.dl-plat{margin-top:24px}

@media (max-width:560px){
  .store-grid{grid-template-columns:1fr}
}

/* ============================================================
   免費工具（2026-08-02）：resources.html 收掉後，三個贈品頁的樞紐搬到本頁。
   2026-08-03：這塊從「下載卡後面的次要出口」改成「hero 後第一個內容區塊」，
   拿掉原本用來跟上一塊 CTA 切開的 border-top＋clamp(46,6vw,66) 頂部留白
   （那是本站「兩個相鄰 CTA 不要打架」的切法，本頁現在只有一個主行動在最下面，
   不需要切了）。改成跟 about.html #why、pricing.html #plans 同款：
   第一個 section 直接吃 site.css 的 section{padding:var(--pad-sec) 0} 預設值，
   不覆寫。卡片本體吃 site.css 既有的 .posts／.post／.thumb-a|b|c，這裡只補編號字
   （原本在 page-resources.css，本頁沒載入那支）與內部間距，全部限定在 .free-tools 底下。
   ============================================================ */
.free-tools .eyebrow{margin-bottom:10px}
.free-tools h2{font-size:clamp(23px,3.2vw,32px)}
.free-tools .lead{margin-top:12px;max-width:56ch}
.free-tools .posts{margin-top:28px}

/* 編號字：規則與理由沿用 page-resources.css（44px 屬大字門檻 3:1；不加 opacity，
   03 卡底色是 --brand-2 深青，--brand-text 在上面只有 2.76，所以單獨改用 --ink） */
/* 2026-08-19 贈品縮圖改放情境插畫：圖是 16:9，槽位跟著吃 16:9，
   不要固定 146px 高再靠 object-fit 裁掉四分之一畫面（人物頭頂會被切）。
   只限定在 .free-tools 底下，blog 與 landing 的文章卡維持 site.css 的 146px 不動。 */
.free-tools .post .thumb{height:auto;aspect-ratio:16/9}
.free-tools .post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.free-tools .post .thumb{display:flex;align-items:center;justify-content:center}
.free-tools .post .thumb .num{font-size:44px;font-weight:800;color:var(--brand-text);letter-spacing:-.02em}
.free-tools .post .thumb.thumb-c .num{color:var(--ink)}

/* ============================================================
   2026-08-05 動畫語彙 v2 — 本頁主秀：游標 3D 傾斜 .tilt-card
   （共用三件套在 site.css，這裡只放 download 獨有的主秀樣式）
   JS（site-motion.js）只餵 --rx/--ry 兩個自訂屬性，transform 本體寫在這裡。
   idle 時 --rx/--ry 未設值，fallback 0deg，視覺上跟沒有 transform 一樣乾淨。
   perspective 直接放進 transform 清單（不用另開容器 perspective 屬性），
   800px＋最大 ±3deg，卡片內文字不會糊——旋轉幅度遠低於會影響可讀性的門檻。
   移動中刻意不掛 transition（跟手感要即時），只有 pointerleave 補上的
   .is-leaving 才有 transition，負責把角度收尾轉回 0。 ---------- */
.tilt-card.is-active{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt-card.is-leaving{transition:transform .4s cubic-bezier(.2,.8,.2,1)}

/* ============================================================
   2026-08-06 動畫語彙擴充 — 本頁主秀：App 截圖中心放大輪播 .shot-carousel
   （JS 在 site-motion.js，只餵 .is-active class 跟 track 的 translateX，視覺數值全在這裡）
   .shot-carousel 是 viewport：overflow:hidden 裁掉兩側超出的縮圖，position:relative
   讓自己當 .shot-item 的 offsetParent，JS 才能用 offsetLeft／clientWidth 算置中位移。
   .shot-item 預設態＝兩側縮小態（scale .95／opacity .6），.is-active＝中心放大態
   （scale 1／大陰影），切換用 transform/opacity 過渡 500ms，只動 GPU 合成屬性。 ---------- */
/* 2026-08-07 四版：這組輪播原本獨立佔 hero 下方一整區，吃 .wrap 92% 寬、中心張 310px。
   Lucy 裁定改搬進 hero 右欄取代單張手機截圖，右欄本身只有格線的一半寬（約 538px，
   1140 maxw 扣 64px gap 再除二），塞不下原本的尺寸，也不能擠壓左欄文字。改成：
   carousel 容器收窄到 320px（明顯小於欄寬，留出左右呼吸空間，不會頂到欄位邊界），
   中心張 270px（落在 Lucy 定的 260-300px 區間），track 的 gap 從 28→14px（項目變窄，
   gap 等比例縮小，peeking 露出的窄邊才不會被 gap 吃掉）。垂直 padding 16→10px（右欄
   本來就窄，不需要原本那圈留白）。margin 改 0（置中交給父層 .dl-hero-img 的
   flex align-items，不用 auto margin）。 */
.shot-carousel{position:relative;overflow:hidden;max-width:320px;width:100%;margin:0;padding:10px 0}
/* 2026-08-07（Lucy 實測回饋「好久好久，根本不知道是動畫」）：根因是 track 本身沒有
   transition，JS 算好的 translateX 是瞬間跳位（Playwright 連續採樣證實：value 在單一
   100ms 區間內從 385px 直接跳 137px，中間沒有過渡幀）。只有 .shot-item 的 scale/opacity
   在動，位置本身「看起來沒換」。這裡補上 transform transition，节奏比照 .shot-item
   （500ms，稍慢一點點讓橫向位移跟縮放/淡出節奏對得上，同一 easing 曲線）。 */
.shot-track{display:flex;align-items:center;gap:14px;width:max-content;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shot-item{flex:0 0 auto;width:270px;margin:0;transform:scale(.95);opacity:.6;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s cubic-bezier(.2,.8,.2,1)}
/* 2026-08-07 Lucy 回饋：兩側被裁掉的鄰張陰影會從 overflow 邊緣洩進 viewport，
   看起來像一條灰色破圖豎邊。非中心張整個不給陰影，只有中心張有。 */
.shot-item img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.shot-item.is-active{transform:scale(1);opacity:1}
.shot-item.is-active img{box-shadow:var(--shadow-lg)}
@media(max-width:640px){.shot-carousel{max-width:230px}.shot-item{width:190px}}

/* 指示點（2026-08-07 新增，跟 landing 頁既有的 .dots/.dot-item 不同命名空間，避免共用
   時撞名）：JS 動態生成插入 .shot-carousel 後面，數量對應 items.length，目前 5 顆。
   當前張用 .is-active 放大＋填色，跟 .shot-item 的 active 邏輯是各自獨立的兩套 class。 */
.shot-dots{display:flex;justify-content:center;gap:0;margin-top:10px}
/* 2026-08-07 RWD 體檢：8px 圓點的觸控目標太小，用透明 border 把熱區擴到 28px
   （WCAG 2.5.8 最低 24px），視覺仍是 8px 圓心（background-clip:content-box）。
   同時 .shot-dots 的 gap 歸零，讓視覺圓點中心距維持在 28px 不會排太開。 */
.shot-dot{width:28px;height:28px;padding:0;border:10px solid transparent;border-radius:50%;
  background:var(--brand-border);background-clip:content-box;
  cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s ease}
/* 2026-08-08 這兩條原本寫 `background:` shorthand，會把上面設好的 background-clip:content-box
   一起重置回 border-box，於是 28px 的透明觸控熱區整塊被填滿、再乘 scale(1.35) 變成快 38px 的大圓
   （Lucy 截圖圈的「太大了吧」）。改成 background-color longhand，只換顏色不動 clip。 */
.shot-dot:hover{background-color:var(--brand-2)}
.shot-dot.is-active{background-color:var(--brand-deep);transform:scale(1.35)}

@media (prefers-reduced-motion:reduce){
  .tilt-card{transition:none}
  /* 輪播 reduce 態：site-motion.js 整段不跑（不排 interval、track 不搬），這裡把
     scale/opacity 的兩態差異也收掉，畫面維持一整排等大等亮的靜態縮圖（不自動播）。 */
  .shot-item{transition:none;transform:none;opacity:1}
  .shot-track{transition:none}
  /* dots 在 reduce 模式：JS 那段整包在 !reduce 判斷式內，reduce 時 dots 容器根本不會被
     生成（見 site-motion.js），這條規則只是防禦性收尾，避免萬一 markup 意外殘留時
     還留著 hover transition。 */
  .shot-dot{transition:none}
}