/* ============================================================
   首頁專用樣式 home-landing.css
   只在 index.html 及 en/index.html 載入，排在 ui.css 之後。
   依 landing-page-design 規則調整首頁：拉丁字型、首屏字級與寬度、
   換行、互動狀態、動畫曲線、捲動顯示、標語段落、頁尾行動區。
   2026-10-28 起顏色變數與 .is-band 範圍放在 ui.css（全站共用）；本檔只放首頁版面。
   字體大小一律用 rem，取 Tailwind 刻度的 rem 值（例如 text-6xl = 3.75rem）。
   全站根字體為 110%（試用意見要求放大），所以實際像素是刻度的 1.1 倍。
   ============================================================ */

/* ---------- 字型：拉丁字用 Manrope，中文維持 Noto Sans TC ---------- */
:root {
  --sans: "Manrope", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", "Noto Sans CJK TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 換行：避免單字落單 ---------- */
/* 中文標題用 pretty（ui.css 全站設定）：balance 會把「香港」這類詞從中間切開，中文的斷點改用 .nb 指定 */
/* balance 只用在英文首屏標題與標語；用在其他標題會把 pre-production 從連字號切開 */
:lang(en) :is(.u-hero .u-h1, .u-tagline-text) { text-wrap: balance; }

/* ---------- 首屏：標題字級與寬度見下方「首屏：滿版照片」 ---------- */
.u-hero .u-h1 em { white-space: nowrap; }

/* ---------- 互動狀態與動畫曲線 ---------- */
.u-btn, .u-sub button, .u-tab, .hs-drop, .u-tlink, a.u-card {
  transition-property: background-color, border-color, color, opacity, transform, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: var(--ease-out);
}
.u-btn:active, .u-sub button:active, .u-tab:active { transform: scale(0.98); }
a.u-card:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: var(--shadow-card); }
a.u-card:active { transform: translateY(0); }
.u-faq summary::after { transition: transform 300ms var(--ease-out); }

/* ---------- 捲動顯示：只在 JS 啟用後才先隱藏，沒有 JS 時內容照常顯示 ---------- */
.js-reveal main > section[data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js-reveal main > section[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 標語段落：逐字由淡轉深 ---------- */
.u-tagline { padding: 96px 0; }
.u-tagline-text {
  max-width: 680px; margin: 0 auto; text-align: center;
  font-size: 2.25rem; line-height: 1.111; letter-spacing: -0.026em; color: var(--text);
}
@media (min-width: 640px) { .u-tagline-text { font-size: 3rem; line-height: 1; } }
@media (max-width: 720px) { .u-tagline { padding: 64px 0; } }
.u-tagline-text .w { opacity: 0.3; transition: opacity 500ms var(--ease-out); }
.u-tagline-text .w.on { opacity: 1; }

/* ---------- 頁尾行動區：與首屏主按鈕相同 ---------- */
.u-final { text-align: center; }
.u-final .u-lede { margin-top: 16px; }
.u-final .u-btnrow { justify-content: center; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal main > section[data-reveal] { transform: none; }
  a.u-card:hover, .u-btn:active, .u-sub button:active, .u-tab:active { transform: none; }
}

/* ============================================================
   2026-10-28 依 Holly「GSD WEBSITE ADVISE」改版
   1. StudioBinder：雙色、乾淨，深色（.is-band）與淺色段落交替分隔
   2. 品牌色只有 #001E3A 與 #966536（變數見 ui.css）
   3. ShotDeck：細導覽列、首屏滿版大圖
   4. A24：大標題＋圖片卡片網格，卡片下方小標
   顏色一律用 ui.css 的語意變數，這裏不寫死色碼。
   字級只用 Tailwind 刻度（rem 值，行高取該級的值）；間距只用
   0、2、4、8、12、16、24、32、40、48、64、80、96px；圓角只用 Tailwind 值。
   ============================================================ */

:root { --r-ctl: 0.375rem; }

/* ---------- 單字行：英文標題用 balance；中文靠 .nb 指定斷點 ---------- */
:lang(en) :is(main .u-h2, .gsd-pc-t, .u-h3, .u-step h3, .u-btn, .u-voice-svc, .gsd-cc-q, .u-voice-who, .hs-drop-s, main .u-tiny) { text-wrap: balance; }
.u-window-title { text-wrap: balance; }
.u-credits a { white-space: nowrap; }

/* ---------- 首頁內文字級對齊刻度（全站 ui.css 不改） ---------- */
main .u-lede { font-size: 1rem; line-height: 1.5; }
@media (min-width: 768px) { main .u-lede { font-size: 1.125rem; line-height: 1.556; } }
main .u-card > p, main .u-step p, .u-faq .a, .u-voice blockquote p { font-size: 0.875rem; line-height: 1.429; }
main .u-tiny { font-size: 0.75rem; line-height: 1.333; }
.u-foot .u-small { font-size: 0.875rem; line-height: 1.429; }
main .u-h3 { font-size: 1.25rem; line-height: 1.4; }
main .u-step h3 { font-size: 1.125rem; line-height: 1.556; }
.u-voice-svc, .hs-drop-s, .u-badge { font-size: 0.75rem; line-height: 1.333; }
.hs-msg, .hs-drop-t, .u-tlink { font-size: 1rem; line-height: 1.5; }

/* ---------- 按鈕：主要按鈕 text-base 半粗、內距 8px／12px ---------- */
main .u-btn, .hs .u-btn { font-size: 1rem; line-height: 1.5; font-weight: 600; padding: 8px 12px; }
.u-btn:hover { opacity: 1; filter: brightness(1.08); }

/* ---------- 單邊框卡片改為四邊同框 ---------- */
.hs-msg { border: 1px solid var(--border-soft); }
.hd-item { border: 1px solid var(--border-soft); border-radius: var(--r-ctl); }

/* ---------- 細導覽列：2026-10-28 已移到 assets/ui.css「全站細導覽列」，全站共用 ---------- */

/* ---------- 首屏：滿版照片（灰階）＋平塗深海軍藍疊色＋大標題 ---------- */
.gsd-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: left;
  min-height: calc(100vh - 49px); min-height: calc(100svh - 49px);
  display: flex; align-items: center; padding: 96px 0 80px;
}
.gsd-hero-media { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--band); }
.gsd-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: grayscale(1) contrast(1.05); opacity: 0.5; }
/* 平塗疊色，保證白字對比（照片最亮處疊色後約 11:1） */
.gsd-hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 30, 58, 0.72); }
.gsd-hero > .u-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: 64px; align-items: center; align-content: center;
}
.gsd-hero > .u-wrap > * { grid-column: 1; }
.gsd-hero .u-badge { grid-row: 1; justify-self: start; background: transparent; }
.gsd-hero .u-h1 { grid-row: 2; }
.gsd-hero > .u-wrap > .u-lede { grid-row: 3; }
.gsd-hero .u-checks { grid-row: 4; }
.gsd-hero .hs {
  grid-column: 2; grid-row: 1 / span 4; margin: 0; max-width: none;
  background: rgba(0, 30, 58, 0.78); backdrop-filter: blur(6px); border-color: var(--border);
}
/* text-4xl → text-5xl → text-7xl，行高取刻度值 */
.u-hero.gsd-hero .u-h1 {
  max-width: 680px; margin: 16px 0 0; font-weight: 700;
  font-size: 2.25rem; line-height: 1.111; letter-spacing: -0.03em;
}
@media (min-width: 640px)  { .u-hero.gsd-hero .u-h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .u-hero.gsd-hero .u-h1 { font-size: 4.5rem; line-height: 1; } }
.gsd-hero .u-h1 .nb { padding-block: 4px; }
.gsd-hero .u-h1 em { color: var(--primary); }
.u-hero.gsd-hero > .u-wrap > .u-lede { margin: 24px 0 0; max-width: 680px; color: var(--text); opacity: 0.88; }
.u-hero.gsd-hero .u-checks { justify-content: flex-start; margin-top: 24px; }
.gsd-hero .u-check { color: var(--text-muted); }
@media (max-width: 940px) {
  .gsd-hero { min-height: 0; padding: 64px 0 48px; }
  .gsd-hero > .u-wrap { display: block; }
  .gsd-hero .hs { margin-top: 32px; }
}

/* ---------- 繁中首頁大標題改宋體（2026-10-28 Holly 批准）：只限 h1、h2，內文與按鈕維持黑體 ---------- */
:lang(zh-Hant) main :is(.u-h1, .u-h2) {
  font-family: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", "MingLiU", serif;
}

/* ---------- 段落標題：靠左大標題，銅棕細線開頭（A24），說明放標題下方 ---------- */
main .u-sec { padding: 96px 0; }
main .u-sec.tight { padding: 64px 0; }
@media (max-width: 720px) { main .u-sec { padding: 64px 0; } main .u-sec.tight { padding: 48px 0; } }
main .u-sec-head { text-align: left; max-width: none; margin: 0 0 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
main .u-sec-head::before { content: ""; width: 48px; height: 4px; background: var(--cta); }
main .u-sec-head > .u-lede { margin-top: 0; max-width: 680px; }
main .u-sec-head > .u-h2 { margin-top: 0 !important; }
/* text-3xl → text-4xl → text-5xl */
main .u-h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; }
@media (min-width: 768px)  { main .u-h2 { font-size: 2.25rem; line-height: 1.111; } }
@media (min-width: 1024px) { main .u-h2 { font-size: 3rem; line-height: 1; } }
@media (max-width: 760px) { main .u-sec-head { margin-bottom: 32px; } }
/* 很窄的手機改用 text-2xl，避免長英文詞單獨成行 */
@media (max-width: 480px) { main .u-h2 { font-size: 1.5rem; line-height: 1.333; } }

/* ---------- 深色段落在深色主題下加一條銅棕細線，和頁面底色分開 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) main > .is-band { border-block: 1px solid var(--primary-soft); }
}
:root[data-theme="dark"] main > .is-band { border-block: 1px solid var(--primary-soft); }

/* ---------- 照片色塊段落（標語） ---------- */
.gsd-photo-band { position: relative; isolation: isolate; overflow: hidden; }
.gsd-band-media { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--band); }
.gsd-band-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.28; }

/* ---------- A24 式圖片卡片網格：上圖、下方小標 ---------- */
.gsd-cards { display: grid; gap: 48px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .gsd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 600px) { .gsd-cards { grid-template-columns: minmax(0, 1fr); } }
.gsd-pc { display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; margin: 0; }
.gsd-pc-media {
  position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 3;
  background: var(--band); color: var(--cta-fg); border-radius: 2px;
}
.gsd-pc-media > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.gsd-pc-media > * { transition: transform 500ms var(--ease-out); }
a.gsd-pc { transition: transform 300ms var(--ease-out); }
a.gsd-pc:hover .gsd-pc-media > * { transform: scale(1.03); }
a.gsd-pc:hover .gsd-pc-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.gsd-pc:active { transform: translateY(1px); }
.gsd-pc-k {
  display: block; font-size: 0.75rem; line-height: 1.333; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
}
.gsd-pc-t { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.016em; margin-top: 4px; }
.gsd-pc-cap > p { margin-top: 8px; font-size: 0.875rem; line-height: 1.429; color: var(--text-muted); }
.gsd-pc-cap > p.u-tiny { font-size: 0.75rem; line-height: 1.333; }
.gsd-pc-links { list-style: none; margin: 8px 0 0; padding: 0; }
.gsd-pc-links li { border-top: 1px solid var(--border-soft); }
.gsd-pc-links .u-tlink { padding: 8px 2px; font-size: 0.875rem; line-height: 1.429; }

/* 純色＋大字（沒有合適照片的卡片）：text-3xl → text-4xl */
.gsd-m-cta { background: var(--cta); }
.gsd-m-word, .gsd-v-files span { font-size: 1.875rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .gsd-m-word, .gsd-v-files span { font-size: 2.25rem; line-height: 1.111; } }
.gsd-m-word { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.gsd-m-icon { position: absolute; left: 24px; top: 24px; width: 32px; height: 32px; }
.gsd-m-icon svg { width: 32px; height: 32px; }

/* 產品介面片段：示範劇本《晨光文具店》的真實資料 */
.gsd-v-sheet {
  position: absolute; left: 32px; right: 32px; top: 32px; bottom: -16px;
  background: var(--card); color: var(--text); border-radius: 4px 4px 0 0;
  padding: 16px 24px; font-size: 0.75rem; line-height: 1.333; box-shadow: var(--shadow-window);
}
.gsd-v-sheet p + p { margin-top: 8px; }
.gsd-v-sheet .sc { display: inline-block; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
.gsd-v-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; }
.gsd-v-row b { font-weight: 600; color: var(--text-muted); }
.gsd-v-row span { border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsd-v-strip { padding: 16px 0; }
.gsd-v-srow {
  display: grid; grid-template-columns: 4px 3.4em 2em minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 16px 8px 0; border-top: 1px solid var(--border-soft); white-space: nowrap;
}
.gsd-v-srow:first-child { border-top: 0; }
.gsd-v-srow .bar { align-self: stretch; }
.gsd-v-srow.is-day .bar { background: var(--day); }
.gsd-v-srow.is-night .bar { background: var(--night); }
.gsd-v-srow .pl { overflow: hidden; text-overflow: ellipsis; }
.gsd-v-srow .dots { display: inline-flex; gap: 4px; }
.gsd-v-files { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; }
.gsd-v-files span + span { opacity: 0.72; }

/* ---------- 九個拆解類別：類別色點＋劇本原文大字 ---------- */
.gsd-cc-media {
  position: relative; overflow: hidden; aspect-ratio: 5 / 4; margin: 0;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 2px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 24px;
}
.gsd-cc-name { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; line-height: 1.429; font-weight: 700; letter-spacing: 0.02em; color: var(--cat-ink); }
.gsd-cc-name .cat-dot { width: 12px; height: 12px; }
/* text-xl → text-2xl；is-plain 為 text-lg → text-xl */
.gsd-cc-q { font-size: 1.25rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.gsd-cc-q.is-plain { font-size: 1.125rem; line-height: 1.556; color: var(--text-muted); }
@media (min-width: 1024px) {
  .gsd-cc-q { font-size: 1.5rem; line-height: 1.333; }
  .gsd-cc-q.is-plain { font-size: 1.25rem; line-height: 1.4; }
}
.gsd-note { margin-top: 40px; }
@media (max-width: 600px) {
  .gsd-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .gsd-cc-media { aspect-ratio: auto; min-height: 168px; gap: 16px; padding: 16px 12px; }
  .gsd-cc-name { font-size: 0.75rem; line-height: 1.333; gap: 4px; }
  .gsd-cc-name .cat-dot { width: 8px; height: 8px; }
  .gsd-cc-q { font-size: 1.125rem; line-height: 1.556; }
  .gsd-cc-q.is-plain { font-size: 1rem; line-height: 1.5; }
  .gsd-cats .gsd-pc-t { font-size: 1rem; line-height: 1.5; }
}
/* 英文類別名較長，手機改單欄 */
@media (max-width: 600px) { :lang(en) .gsd-cats { grid-template-columns: minmax(0, 1fr); } :lang(en) .gsd-cc-media { min-height: 144px; } }

/* ---------- 頁尾：深海軍藍色塊、圖片出處 ---------- */
.u-foot.is-band { background: var(--band); border-top: 0; }
.u-credits { margin-top: 24px; font-size: 0.75rem; line-height: 1.333; color: var(--text-muted); }
.u-foot .u-credits a { display: inline; margin: 0; font-size: inherit; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.u-foot .u-credits a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .gsd-pc-media > *, a.gsd-pc { transition: opacity 300ms var(--ease-out); }
  a.gsd-pc:hover .gsd-pc-media > *, a.gsd-pc:active { transform: none; }
}