/* 頁面 01 Landing 專屬樣式。
   注意:#screen-XX 本身絕不可設 display(app.js 靠切換它的可見度做路由,設了 display 會蓋掉隱藏邏輯,
   見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—— layout 一律放在頁面自己的 wrapper class 上。

   T-054 改版:主視覺、背景、聯名 logo 全部換成真素材。
   原本 CSS 手刻的標題(ribbon + AED 大字 + is HERE + 閃電圓標 + tagline)與品牌列
   (捷運色塊 + ✕ + logo 佔位標籤)整組移除 —— 那些內容現在都畫在素材裡了,
   連帶 --p01-* 的裝飾色 token 也不再需要,一併刪掉。 */
#screen-landing {
  /* 給定明確高度,讓 .p01-page 的 min-height:100% 能解析、spacer 得以撐開分佈內容(內容超高時 .app-screen 仍會捲動)。
     只設 height 不設 display —— app.js 靠切換 display 做路由,設 display 會壞掉(見 LESSONS T-011)。 */
  height: 100%;
}

/* T-048 流式重構:min-height 用 100% 填滿 dvh 外殼(不再釘死 870px)。
   T-054:背景改用素材。本頁本來就設計成一屏放得下、不會捲動,所以等同於「背景固定」;
   刻意不用 background-attachment: fixed —— iOS Safari 對它的支援一向不可靠。
   T-069:下內距改 0 —— 底部聯名列改成滿版白欄後由白欄自己的內距承擔留白,
   有下內距的話白欄就貼不到底、下面會露出一條黃邊。
   T-071:上內距也改 0,主視覺直接貼到頂(素材自帶黃底,和背景接得起來)。
   position:relative 是 .p01-foot 絕對定位的參照。 */
.p01-page {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: url("../../assets/p01-bg.jpg?v=6bb6c7e98e") center / cover no-repeat;
}

/* 主視覺滿版置頂(T-071)。
   舊版是 width:100% + padding + max-height:42dvh + object-fit:contain —— 問題在於 contain 是
   「等比縮到框內」,cpr 版比例 0.70(1725×2481)在 430 寬的機器上被 42dvh 反推回去,
   **實際只畫到 272px 寬,螢幕的 63%**。要滿版就得放掉高度上限,改吃自然高度(height:auto)。
   放掉高度上限之後 CTA 會被推出第一屏 —— 這由 .p01-foot 改成絕對定位貼底解決(T-072)。
   aed 版是 829×427 的橫幅,滿版寬只有約 0.52 倍高,不會有壓迫感。 */
.p01-hero {
  display: block;
  width: 100%;
  height: auto;
}

/* T-088:aed 版改成「流內排版」——  hero 照排、.p01-foot 推到底,中間的剩餘空間自動分配。
   主席在 iPhone 15 + Chrome(可視約 393×660)上實測,絕對定位的 CTA 會壓在主視覺下緣的
   「is HERE!」上,兩個色塊疊在一起很髒。流內排之後**結構上就不可能重疊**,
   不是靠調數值閃避 —— 換機器也不會再撞到。
   cpr 版維持 T-072 的絕對定位疊法(主席 2026-07-30 拍板只改 aed 版):
   它是 1725×2481 的直式全圖,滿版寬時高度就吃掉 565px,不疊就一定要把圖縮小。
   T-095:`margin-top: auto` 拿掉,改由下面兩個間隔器分配剩餘空白。 */
.p01-page--aed .p01-foot {
  position: static;
}

/* ---- T-095 剩餘空白的分配(主席:「上面要留點白、中間空格降回 1/3~1/2」)----

   T-088 之後所有剩餘空白都由 .p01-foot 的 `margin-top: auto` 獨吞,**100% 落在主視覺與卡片之間** ——
   螢幕愈高中間裂得愈開(430×932 上量到 327px),而主視覺始終黏在頂端(只剩 19~33px)。

   改用兩個 flex 間隔器按**固定比例**拆:頂部 1.3 : 中間 1。
   為什麼是比例而不是 clamp():剩餘空白本身跨機型差 7 倍(375×553 只有 52px、430×932 有 360px),
   任何固定值或 vh 值都只能在一種高度上對 —— 比例才會在每一台上都維持同一個構圖。
   1.3:1 是回推出來的:中間距 = 剩餘空白 / 2.3,結果在六種機型上都**剛好落在原本的一半**(主席要的 1/2)。

   `flex-basis: 0` + `min-height`:內容擠不下時(矮螢幕)兩者會收到各自的下限而不是 0,
   保證主視覺與卡片之間永遠有一段呼吸空間。 */
.p01-gap {
  flex: 0 0 0;   /* cpr 版不參與分配 */
}
.p01-page--aed .p01-gap--top {
  flex: 1.3 1 0;
  min-height: clamp(10px, 2vh, 22px);
}
.p01-page--aed .p01-gap--mid {
  flex: 1 1 0;
  min-height: clamp(18px, 3vh, 30px);
}

/* 小字警語(T-088):壓在 CTA 卡片與聯名白欄之間。
   12px 是全站最小字級,但它承載的是**領獎條件**,不是裝飾 —— 顏色用 --ink-muted 而不是更淡的
   --ink-faint,在黃底上還讀得動。 */
.p01-note {
  margin: 10px 20px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* 主視覺的上方留白沿革(留著是因為這一格反覆改過三次,免得又繞回去):
   T-074 給 aed 版 `margin-top: clamp(32px, 20vh, 190px)` —— 20vh 在 393×660 上吃掉 132px,
   主視覺被推到中段、下緣正好撞上 CTA;
   T-088 縮成 `clamp(10px, 3.5vh, 34px)`,空白全數改由 .p01-foot 的 `margin-top: auto` 吸收,
   結果變成另一個極端:**空白 100% 落在中間,主視覺黏死在頂端**;
   T-095 改成上面那組比例間隔器,margin 這一格因此整個移除 ——
   固定值與 vh 都只能在一種螢幕高度上對,比例才跨機型成立。 */

/* CTA + 聯名底欄整組貼齊畫面底部、脫離版面流(T-072)。
   脫離流是關鍵:主視覺自然高度愈高,CTA 只是疊得愈多,永遠不會把自己擠出第一屏,
   也永遠不會讓 landing 需要捲動(捲動就違背 T-048「第一屏要看得到 CTA」)。 */
.p01-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 半透明:主視覺滿版後 CTA 會壓在插畫上,不透一點會像貼了塊補丁。
   backdrop-filter 是漸進增強 —— 支援的瀏覽器底下那層會糊掉,文字對比更穩;
   不支援的就只是單純半透明,不影響可讀性(0.88 已經夠不透)。 */
.p01-cta {
  margin: 0 20px;
  padding: clamp(24px, 4vh, 34px) 24px clamp(22px, 4vh, 30px);
  text-align: center;
  background: var(--bg-card-translucent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.p01-cta__line {
  font-weight: 900;
  font-size: clamp(24px, 7vw, 29px);
  line-height: 1.35;
  color: var(--ink);
}
.p01-cta__line + .p01-cta__line { margin-top: 2px; }
.p01-cta__highlight { color: var(--red-accent); }
.p01-cta__btn { margin-top: 26px; }

/* 聯名 logo 置底的滿版白色底欄(T-069)。
   p01-logo.png 是去背素材,而 logo 本身(捷運雙色標、黃金色 ✕、淺藍手寫「安妮怎麼了?」)
   都是為白底設計的,直接壓在 p01-bg.jpg 的黃色漸層上對比不足 —— 尤其 ✕ 幾乎看不見。
   作法對齊 Miro 稿:一條通到左右邊緣、貼齊畫面底部的白欄。
   下方兩角不必自己處理圓角,.app-screen 的 overflow + border-radius:42px 會裁掉(桌機框)。

   高度預算:白欄的內距是從原本 .p01-page 的下內距 + .p01-brand 的上邊距挪來的,
   總高度持平略減,不吃掉 T-054 在 SE 375×667 上只剩約 24px 的第一屏餘裕(實測見頁面檔第 9 節)。

   T-072:白欄改成 .p01-foot 的一部分(跟著 CTA 一起絕對定位貼底),margin-top 現在的角色
   是「CTA 卡片與白欄之間的間距」。 */
.p01-brandbar {
  background: var(--bg-brand-bar);
  margin-top: clamp(10px, 2.4vh, 22px);
  padding: clamp(10px, 1.8vh, 14px) 20px clamp(12px, 2.2vh, 18px);
  /* 手機上 .app-screen 有 padding-bottom: env(safe-area-inset-bottom),不抵銷的話
     白欄下方會露出一條 .app-screen 的漸層底色。桌機框 safe-area 為 0,此行無作用。 */
  margin-bottom: calc(-1 * env(safe-area-inset-bottom));
  padding-bottom: calc(clamp(12px, 2.2vh, 18px) + env(safe-area-inset-bottom));
}

/* 素材 753×91(比例 8.27)本身就是一條橫幅,不需要再排版。
   寬度改吃白欄的內容框(原本是 min(72%, 260px) 吃整個畫面寬):
   兩者在 ≥300px 的畫面上都是 260px,但這樣寫在窄畫面也不會撐破白欄的左右內距。 */
.p01-brand {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
}