/* 頁面 03 Choose 專屬樣式。
   注意:#screen-choose 本身絕不可設 display(見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—
   layout 一律放在頁面自己的 wrapper class 上。 */
/* T-088:垂直間距一律改吃 clamp(vh),空出來的高度讓給放大後的 icon 與字(見下方)。
   基準是 iPhone 15 + Chrome 可視約 393×660 —— bothDone + aed 版(內容最高的組合)實測仍是一屏。 */
/* T-093「左邊縮排小一點」:頁面左右內距從固定 24px 改成隨寬度收 ——
   375 寬(SE)算出來約 21px,430(Pro Max)回到 24px。窄機省下的 6px 全給卡片內容。 */
.p03-page {
  padding: 6px clamp(18px, 5.6vw, 24px) clamp(20px, 3vh, 34px);
  text-align: center;
}

.p03-title {
  font-weight: 900;
  font-size: clamp(24px, 7.5vw, 29px);
  line-height: 1.4;
  color: var(--ink);
  margin-top: clamp(6px, 1.6vh, 14px);
}

/* T-093:左右內距 22px → clamp(14px, 4.2vw, 20px)(375 上約 15.8px),icon 因此更靠左;
   gap 14 → 12。窄機一共多出約 25px 的水平空間給「名稱 + 已完成徽章」那一行。 */
.p03-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  margin-top: clamp(18px, 3.4vh, 34px);
  padding: clamp(16px, 2.6vh, 26px) clamp(14px, 4.2vw, 20px);
  font-family: var(--font-family);
  cursor: pointer;
}
.p03-entry + .p03-entry { margin-top: clamp(12px, 2.2vh, 20px); }

/* T-056:素材到位後這裡是 <img>,原本是 CSS 畫的紅框圖示。
   CPR 297×297(方)、AED 249×236(略橫)長寬比不同,用 contain 在同尺寸框內各自完整顯示 */
/* T-088「CPR、AED 的 icon 跟字都大一點」(主席對照設計稿):
   icon 66×56 → 88×76(+33%),名稱上限 34 → 42px,說明 16 → 17px。
   兩張圖比例不同(CPR 297×297 方、AED 249×236 略橫),contain 讓它們各自等比長大、不變形。 */
/* T-093「圖文略微小一點」:icon 88×76 → 78×68(-11%),窄機再收一階(見最下方媒體查詢)。
   T-088 那次是「跟字一起放大對齊設計稿」,這次是主席在 SE / Android 實機上看到擠 —— 略收回來。 */
.p03-entry__icon {
  width: 78px;
  height: 68px;
  flex: none;
  object-fit: contain;
}

.p03-entry__body { flex: 1; min-width: 0; }
/* nowrap 是這一行的關鍵:名稱與徽章寧可各自縮,也不要換行變成兩層 */
.p03-entry__head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.p03-entry__name {
  font-weight: 900;
  font-size: clamp(28px, 8.6vw, 38px);
  line-height: 1.2;
  color: var(--ink);
}
.p03-entry__desc {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 2px;
}
/* T-093 `flex: none` 是修「› 破掉」的真解:
   箭頭原本是可壓縮的 flex item(flex-shrink 預設 1),空間不夠時**盒子被壓窄、字被切掉**,
   看起來就是箭頭缺一角。釘住寬度之後要縮的是旁邊的 body,不是它。 */
.p03-entry__arrow {
  flex: none;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}

.p03-claim { margin-top: clamp(16px, 3vh, 30px); }
/* 預設 30px(cpr 版沒有領點按鈕,這顆就是 bothDone 後的第一顆);
   aed 版跟在領點按鈕後面時縮成 14px,兩顆才會成組 */
.p03-more { margin-top: clamp(16px, 3vh, 30px); }
.p03-claim + .p03-more { margin-top: 14px; }

/* T-093 矮螢幕收斂(同頁 02 的作法,斷點一致取 600px):
   SE + Safari 工具列(375×553)上「兩關都完成 + aed 版」是本頁內容最高的組合,
   原本溢出 56px —— 最下面那顆「學習更多急救知識」整顆在畫面外。
   553px 高時上面那些 clamp 幾乎都吃在下限或 vh 那一段,再調就會傷到 393×660,
   所以矮螢幕另外給一組固定小值。 */
@media (max-height: 600px) {
  .p03-title { margin-top: 4px; }
  .p03-entry {
    margin-top: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .p03-entry + .p03-entry { margin-top: 10px; }
  .p03-entry__icon { width: 66px; height: 58px; }
  .p03-entry__name { font-size: 26px; }
  .p03-entry__desc { font-size: 15px; }
  .p03-claim { margin-top: 12px; }
  .p03-more { margin-top: 12px; }
  .p03-claim + .p03-more { margin-top: 10px; }
}