/* 首頁改版預覽（/preview/home/）與「屋與林」總覽（/spaces/），2026-10-21。只在這兩頁載入，不影響其他頁。說明見 src/pages/home-v2.mjs */

/* 開場：字距收一點，品牌名與一句話 */
[data-page="home-v2"] .hero h1 { letter-spacing: .36em; padding-left: .36em; }
[data-page="home-v2"] .hero-sub { letter-spacing: .24em; padding-left: .24em; }
/* 標誌預覽（BRAND_LOGO=on）：開場標題換成完整標誌 */
[data-page="home-v2"] .hero h1.hero-logo { margin: 0; padding: 0; letter-spacing: 0; line-height: 0; font-size: 0; }
.hero-logo img { display: block; width: clamp(176px, 16vw, 252px); height: auto; filter: drop-shadow(0 1px 14px rgba(0,0,0,.32)); }

/* 字：一種詩句樣式，深一點、字距收一點 */
.hv-verse { font-size: clamp(16px, 1.45vw, 20px); letter-spacing: .12em; line-height: 2.25; color: #2E302A; }
.on-night .hv-verse { color: #E6E1D6; }
.hv-h { font-size: clamp(22px, 2vw, 28px); letter-spacing: .24em; line-height: 1.5; color: var(--ink); }
.on-night .hv-h { color: var(--paper); }
.hv-text { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.hv-text.is-center { align-items: center; text-align: center; }
.hv-text.is-center .hv-h { padding-left: .24em; }

/* 引言 */
.hv-intro { padding-block: clamp(112px, 13vw, 200px); display: flex; flex-direction: column; align-items: center; gap: clamp(44px, 5vw, 64px); }
.hv-intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 48px; margin: 0; } /* 引言下方：查看空房／先問問我們（2026-10-21，跟頁面其他入口同一種細線文字連結） */

/* 一日：每段之間同一個間距 */
.hv-ch { padding-bottom: clamp(112px, 13vw, 200px); }
.hv-bleed { position: relative; margin: 0; height: min(88vh, 960px); min-height: 480px; overflow: hidden; background: var(--night); }
.hv-bleed img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hv-pad { padding-top: clamp(64px, 7vw, 112px); display: flex; justify-content: center; }
.hv-night + .hv-ch { padding-top: clamp(112px, 13vw, 200px); } /* 夜色段落之後，下一段的圖不要貼著夜色邊緣 */

/* 內縮：圖與字並排，左右交錯 */
.hv-inset-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 128px); align-items: center; }
.hv-inset.is-portrait .hv-inset-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hv-inset.is-right .hv-inset-media { order: 2; }
.hv-inset-media { margin: 0; overflow: hidden; }
.hv-inset-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hv-inset.is-portrait .hv-inset-media img { aspect-ratio: 4 / 5; max-height: 86vh; }
.hv-inset .hv-text { justify-self: center; }

/* 三個入口 */
.hv-entries { padding-bottom: clamp(112px, 13vw, 200px); }
.hv-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
@media (min-width: 861px) and (max-width: 1100px) { .hv-cards[style*="--n: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } } /* 這片森林加進來變四張時，平板排兩欄 */
.hv-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.hv-card-media { display: block; overflow: hidden; background: var(--night); margin-bottom: 16px; }
.hv-card-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.4s var(--ease); }
.hv-card:hover .hv-card-media img { transform: scale(1.03); }
.hv-card-name { font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .24em; }
.hv-card-line { font-size: 13px; letter-spacing: .1em; line-height: 1.9; color: var(--mute); }

/* 結尾 */
.hv-closing .closing-copy h2 { letter-spacing: .32em; padding-left: .32em; }
.hv-closing-sub { font-family: var(--display); font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .2em; padding-left: .2em; color: rgba(246, 243, 238, .92); margin-top: -6px; }

/* 屋與林 總覽 */
.hv-page-head { padding-top: clamp(140px, 15vw, 220px); padding-bottom: clamp(56px, 7vw, 104px); }
.hv-spaces { padding-bottom: clamp(112px, 13vw, 200px); }
.hv-group-h { font-size: clamp(22px, 2vw, 28px); letter-spacing: .24em; display: flex; align-items: baseline; gap: 20px; }

@media (max-width: 860px) {
  .hv-intro { padding-block: 88px; }
  .hv-verse { font-size: 16px; letter-spacing: .1em; line-height: 2.2; }
  .hv-ch, .hv-entries { padding-bottom: 96px; }
  .hv-bleed { height: 72vh; min-height: 420px; }
  .hv-pad { padding-top: 56px; }
  .hv-inset-grid, .hv-inset.is-portrait .hv-inset-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hv-inset.is-right .hv-inset-media { order: 0; }
  .hv-inset .hv-text { justify-self: stretch; align-items: center; text-align: center; }
  .hv-inset .hv-verse { align-items: center; text-align: center; }
  .hv-night + .hv-ch { padding-top: 96px; }
  .hv-cards { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hv-card-media img { aspect-ratio: 3 / 2; }
}

/* 影片段落（開場 E＝自動播一次、F＝跟著捲動；結尾的白天到天黑），2026-10-21。說明見 assets/js/home-hero.js */
.hero.hh { overflow: visible; max-height: none; }
.hh[data-mode="scroll"] { height: 230vh; height: 230svh; }
.hh-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--night); }
.hh[data-mode="auto"] .hh-sticky { position: absolute; inset: 0; height: auto; min-height: 0; }
.hh-still, .hh-still img, .hh-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hh-still img, .hh-video { object-fit: cover; object-position: 50% 50%; }
.hh-end { opacity: var(--p, 0); }                            /* 影片還不能跳時，用最後一格跟著捲動淡入 */
.hh[data-mode="auto"] .hh-end { opacity: 0; }
.hh-video { opacity: 0; transition: opacity .8s ease; }
.hh.is-ready .hh-video { opacity: 1; }
.hh-copywrap { position: absolute; inset: 0; pointer-events: none; }
.hh[data-mode="scroll"] .hh-copywrap { opacity: calc(1 - var(--p, 0) * 2.6); }
.hh[data-mode="scroll"] .hero-cue { opacity: calc(1 - var(--p, 0) * 4); }
.hh.is-static { height: 100vh; height: 100svh; }
.hh.is-static .hh-sticky { position: absolute; inset: 0; height: auto; }
.hh.is-static .hh-end { opacity: 0; }
.hh.is-static[data-static="end"] .hh-end { opacity: 1; }   /* 減少動態：停在最後一格 */

/* 入夜（E、F）：電影＋營火在前、文字在後，上方留白 */
.hv-night.is-pics { padding-top: clamp(96px, 11vw, 168px); }
.hv-night.is-pics .hv-diptych { margin-top: 0; }

/* 結尾（E、F）：白天到天黑，燈亮了才浮出字 */
.hc { background: var(--night); color: var(--paper); }
.hc-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 55%, rgba(10, 12, 10, .1) 30%, rgba(10, 12, 10, .55) 100%); opacity: var(--p, 0); }
.hh.hc[data-mode="scroll"] .hh-copywrap { display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(64px, 12vh, 140px); pointer-events: auto; text-align: center; opacity: clamp(0, calc((var(--p, 0) - .72) * 4.5), 1); }
.hh.hc.is-static .hh-copywrap { opacity: 1; }  /* 字放在畫面下方的暗處，不蓋住亮燈的屋子 */
.hc.is-static .hc-shade { opacity: 1; }
.hc .closing-copy[data-reveal] { opacity: 1; transform: none; }  /* 結尾的字由捲動控制，不用進場淡入 */

/* 入夜：電影與營火兩張並排（等高：寬度照比例 4:5、4:3） */
.hv-diptych { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.339fr); gap: clamp(14px, 1.8vw, 26px); margin-top: clamp(64px, 7vw, 112px); }
.hv-diptych figure { margin: 0; overflow: hidden; }
.hv-diptych img { display: block; width: 100%; height: auto; }
/* 入夜的營火照（手機才顯示，見下方）；電腦版後半段文字直接接在前半段下面，中間空一行（＝.verse .gap 的 1.2em） */
.hv-mid { display: none; margin: 0; }
.hv-pad-2 { padding-top: 0; }
.hv-pad-2 .hv-verse { margin-top: 1.2em; }
@media (max-width: 860px) {
  .hh[data-mode="scroll"] { height: 210vh; height: 210svh; }
  /* 手機（2026-10-21 Kobee 選 E「圖文穿插」；原本錯開的兩張他覺得不好看）：電影照滿版 → 前半段文字 → 營火照滿版（.hv-mid）→ 後半段文字 */
  .hv-diptych { display: block; margin: 56px calc(-1 * var(--gutter)) 0; }
  .hv-night.is-pics .hv-diptych { margin-top: 0; }
  .hv-diptych figure:first-child { aspect-ratio: 4 / 5; }
  .hv-diptych figure:last-child { display: none; }  /* 營火照改放在兩段文字中間 */
  .hv-diptych img { height: 100%; object-fit: cover; }
  .hv-mid { display: block; margin-top: 56px; aspect-ratio: 3 / 2; overflow: hidden; }
  .hv-mid img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hv-pad-2 { padding-top: 48px; }
  .hv-pad-2 .hv-verse { margin-top: 0; }
}