/* 頁面 04 CPR 介紹專屬樣式。
   注意:#screen-cpr-intro 本身絕不可設 display(見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—
   layout 一律放在頁面自己的 wrapper class 上。

   T-075 版面修正(2026-07-29,主席實機回報「按鈕破版、下面沒留白」):
   量到的事實 —— iPhone 15 Pro Max 的 Safari 含工具列只剩 430×745,舊版內容高 775px,
   整頁被捲掉 30px,`.p04-page` 的 34px 下內距就被推出畫面外(SE 更慘,溢出 194px)。
   iPhone 拿不到全螢幕 API(D-010),所以版面必須自己在 745 高裡排得下。

   三件事一起做:
   1. 頁面改 flex 直欄 + min-height:100%,CTA 用 margin-top:auto 貼到畫面底部 → 永遠有留白
   2. gif 上下各約 18% 是透明留白(實測見頁面檔第 8 節),用 overflow:hidden + object-fit:cover
      裁掉,同樣的垂直預算就能換到大很多的圖
   3. 圖寬從 min(72%, 250px) 放大到 min(80%, 420px):設計稿上胸腔約佔螢幕 65%,
      素材裡胸腔佔圖寬 81.7% → 圖寬取螢幕 80% 時胸腔正好落回 65% */
/* 這裡刻意**不寫** `#screen-cpr-intro { height: 100% }`(頁 01 那樣寫是因為它沒有導覽列):
   100% 是對 .app-screen 算的,沒扣掉 sticky 導覽列的 62px,寫了就固定溢出 62px。
   .screen 已經由 T-075 的 `flex: 1 0 auto` 拿到「導覽列以下的剩餘高度」,
   下面的 min-height:100% 就是對這個高度解析。 */
.p04-page {
  /* 用 height 不用 min-height:高度必須是「確定值」,圖區的 flex-shrink 與
     .p04-crop 的 max-height:100% 才有東西可以收斂 —— min-height 的話版面只會往下長,
     矮螢幕又回到捲動 + 按鈕貼底沒留白。文字真的塞不下時仍會溢出到 .app-screen 去捲。 */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 左右內距下放到各區塊自己身上 —— 圖要用整個畫面寬去算 80%,不能先被內距吃掉 */
  padding: 6px 0 0;
  text-align: center;
}

.p04-title {
  font-weight: 900;
  font-size: clamp(32px, 10vw, 40px);
  color: var(--ink);
  margin-top: 16px;
}

.p04-desc {
  margin-top: 26px;
  padding: 0 24px;
  font-weight: 700;
  font-size: clamp(17px, 5vw, 20px);
  line-height: 1.75;
  color: var(--ink);
}

/* 圖區吃掉說明文與 CTA 之間的所有剩餘高度;min-height:0 是 flex 直欄的老規矩,
   不寫的話子元素的 max-height:100% 會失效(flex item 的預設 min-height 是 auto)。

   T-096:加 `container-type: size`,讓 .p04-crop 可以用 `cqh` / `cqw` 同時看到
   **可用高度**與**容器寬度** —— 這是「圖框依可用高度自動縮」的前提(見下方 .p04-crop)。
   size 容器會連帶 `contain: size`,亦即內容不再回頭影響本框大小;
   本框的高度本來就由 flex 決定、不由內容決定,所以沒有影響。 */
.p04-artbox {
  container-type: size;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 0;
}

/* ---- 裁切框(T-096 重寫)----

   素材 `p04-compression` 是 420×596,但**實際有內容的只有 y105~488**(上下各約 18% 全透明),
   其中**藍色箭頭在 y108~209**、胸腔在 y230~488。

   T-075 的舊窗口是 `aspect-ratio: 420/400` + `object-position: center 65%`,
   換算出來的可見範圍是 **y127~527** —— **上面切掉 22px 正好切在箭頭桿上,下面卻留了 39px 空白**。
   結果連 Pro Max 全高都只露出 81% 的箭頭,393×660 上更只剩 25%(主席實機回報的就是這件事)。

   改兩件事:

   1. **窗口對準內容**:`aspect-ratio: 420/384` + `object-position: center 49.5%` ——
      384 = 內容高(488−105+1);49.5% = 105 / (596−384)。窗口正好等於內容框,
      **上不切箭頭、下不留空白**,而且比舊窗口還矮 16px(垂直預算反而變鬆)。
   2. **尺寸改由可用高度決定**:框高吃滿圖區可用高度,寬度由比例推導,上限維持螢幕寬 80%。
      因為框的長寬比 == 內容長寬比,`cover` 在任何尺寸下都**不會再裁到內容** ——
      空間不夠時圖只是等比變小,不是被切。

   為什麼不是全域縮一個百分比(主席原本問 80% 還是 90%):**該縮的只有矮螢幕**。
   Pro Max 與 iPhone 15 Safari 的可用高度撐得住原尺寸(主席說那台協調性可接受),
   縮它們是白白損失;而 393×660 需要縮到 82%、375×553 需要縮到 66% —— 一個固定百分比
   不可能同時滿足「大機器不變小」與「小機器放得下」。讓它跟著可用高度走就都對。

   `cqh` / `cqw` 由 .p04-artbox 的 `container-type: size` 提供。
   不支援容器查詢的舊瀏覽器(iOS < 16)吃上面那組 fallback:固定 66% 寬 ——
   等於全機型都取矮螢幕的尺寸,圖小一點但箭頭一樣完整,不會破版。 */
.p04-crop {
  width: min(66%, 340px);
  aspect-ratio: 420 / 384;
  max-height: 100%;
  overflow: hidden;
}
@supports (height: 1cqh) {
  .p04-crop {
    /* 框高 = min(可用高度, 螢幕寬 80% 對應的高度);寬度由 aspect-ratio 反推 */
    width: auto;
    height: min(100cqh, calc(min(80cqw, 420px) * 384 / 420));
    max-height: none;
    max-width: 100%;
  }
}

.p04-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 105 / (596−384) = 49.5% —— 把窗口的上緣對到內容的第一列像素。
     這個值和上面的 `aspect-ratio: 420/384` 是一組的,**改一個就要一起改**。 */
  object-position: center 49.5%;
}

/* CTA 貼底:margin-top:auto 把它推到頁面底部,上下內距就是「按鈕上方的呼吸」與
   「按鈕下方的留白」。手機上 .app-screen 另有 env(safe-area-inset-bottom),不必重複加。 */
.p04-foot {
  margin-top: auto;
  padding: 24px 24px 28px;
}

/* 矮螢幕(SE 這類機器 + Safari 工具列)把間距收一收,把省下來的高度還給圖 */
@media (max-height: 640px) {
  .p04-title { margin-top: 8px; }
  .p04-desc { margin-top: 16px; }
  .p04-artbox { padding-top: 10px; }
  .p04-foot { padding: 14px 24px 20px; }
}