/* 頁面 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)。 */
.p04-artbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 0;
}

/* 裁切框:寬度定尺寸、比例定高度,只留 gif 中央有內容的那一段。
   420/400 是從實測的內容框(y 105~488,上下留白各約 106px)回推:
   上下各留 8px 餘裕後保留 400px 高,亦即 gif 高度的 67%。
   max-height:100% 是矮螢幕的安全閥 —— 空間不夠時框變扁、cover 再多裁一點透明區,
   而不是把整張圖縮小或把 CTA 頂出畫面。 */
.p04-crop {
  width: min(80%, 420px);
  aspect-ratio: 420 / 400;
  max-height: 100%;
  /* 收斂的底線:再擠下去就會裁進箭頭與胸腔本體。撞到這條線的只有
     「SE 375×667 + Safari 上下工具列」這種極端組合(可視高只剩 553),
     那時寧可讓整頁小捲一段(約 60px),也不要把圖裁爛。 */
  min-height: 230px;
  overflow: hidden;
}

.p04-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 垂直錨點偏下(65% 而非 50%):空間不夠、非裁不可時要從**箭頭那頭**裁,
     不能裁到胸腔 —— 箭頭少一截還看得懂,胸腔缺一角會像破圖。 */
  object-position: center 65%;
}

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