/* 頁面 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") 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;
}

/* aed 版一樣滿版(T-074),但**上面留一段**:這張是去背的橫幅標題鎖定圖,只有約 0.52 倍高,
   貼頂的話整個版面會頭重腳輕。留白取 20vh 讓主視覺落在畫面上三分之一 —— 這個位置是回推出來的:
   設計稿上主視覺的垂直中心約在螢幕高的 31%,412×880 上 20vh(176px)算出來是 32%。
   clamp 的下限 32px 顧到矮螢幕(320×568 上仍與 CTA 留得下間隙),上限 190px 避免高螢幕留白過頭。
   cpr 版不留 —— 它自帶黃底、標題就畫在圖的上緣,貼到頂才接得起來。
   用 margin 不用 padding:padding 會被算進 <img> 的邊界框,讓「圖有沒有被壓變形」
   這類量框比例的測試(tests/pages.browser.mjs)失真。 */
.p01-page--aed .p01-hero {
  margin-top: clamp(32px, 20vh, 190px);
}

/* 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;
}