/* 頁面 02 Why 專屬樣式。
   注意:#screen-why 本身絕不可設 display(見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—
   layout 一律放在頁面自己的 wrapper class 上。 */
/* T-088:所有垂直間距改吃 clamp(vh) —— 主席在 iPhone 15 + Chrome(可視約 393×660)上
   實測「繼續」按鈕落在畫面外。固定 px 的間距在矮螢幕上總和起來就是溢出的 51px,
   改成隨畫面高度收縮之後,660px 高算出來約 534px,一屏放得下;412×880 上則回到原本的鬆度。 */
.p02-page {
  padding: 6px 24px clamp(20px, 3vh, 34px);
  text-align: center;
}

.p02-title {
  font-weight: 900;
  font-size: clamp(30px, 10vw, 38px);
  color: var(--ink);
  margin-top: clamp(6px, 1.6vh, 14px);
}

.p02-cards {
  display: flex;
  gap: 16px;
  margin-top: clamp(18px, 3.4vh, 34px);
}

/* T-088「心臟肺臟的框框可以縮小一點」:內距與插圖高度一起收,卡片整體約小 20%。
   兩張圖的長寬比不同(心臟 218×296 直、肺臟 318×274 橫),縮的是**框**不是圖的比例 ——
   object-fit:contain 會讓兩張各自等比縮進新框裡,不會變形。 */
.p02-card {
  flex: 1;
  padding: clamp(14px, 2.2vh, 22px) 12px;
}
/* T-055:素材到位後這裡是 <img>。心臟 218×296(直)、肺臟 318×274(橫)長寬比不同,
   用固定高度 + contain 讓兩張各自完整顯示、視覺量體又對齊 */
.p02-card__art {
  display: block;
  width: 100%;
  height: clamp(88px, 13.5vh, 120px);
  object-fit: contain;
}
.p02-card__title {
  font-weight: 900;
  font-size: clamp(21px, 6.5vw, 26px);
  margin-top: clamp(8px, 1.6vh, 16px);
  color: var(--ink);
}
.p02-card__desc {
  font-weight: 500;
  font-size: 15px;
  margin-top: 6px;
  color: var(--ink-muted);
}

.p02-desc {
  margin-top: clamp(20px, 4vh, 40px);
  font-weight: 900;
  font-size: clamp(19px, 6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
}

/* T-092:「4-6分鐘就會壞死」**併進上一段**(主席指定,中間幾乎不留空)。
   已從獨立的 <div> 改成 .p02-desc 內的 <span>,所以這裡**沒有 margin 可以調** ——
   間距完全由 .p02-desc 的 line-height 決定,任何解析度下都不可能再被拉開。
   line-height 1.1 是因為這一行字級大(34px),沿用外層的 1.55 會憑空多出約 19px 的行距,
   看起來又變回獨立一段。 */
.p02-highlight {
  display: inline-block;
  font-size: clamp(27px, 8.5vw, 34px);
  line-height: 1.1;
  color: var(--red-accent);
}

/* T-092:併段省下來的高度還給按鈕(下限 20 → 26px)—— 主席:「讓 button 不被壓迫」 */
.p02-btn { margin-top: clamp(26px, 4.6vh, 40px); }

/* T-092 矮螢幕收斂:SE + Safari 工具列(375×553)這一類。
   在此之前本頁在 553px 高上會溢出 43px ——「繼續」被切在畫面外,要捲才看得到,
   這就是主席說的「小解析度被壓迫」(既有的一屏合約只保證 393×660,553 一直是允許捲動的)。

   **為什麼用 max-height 而不是繼續調 clamp**:553px 高時上面那些 clamp 幾乎都吃到 vh 那一段
   (不是下限),要在 553 省高度就得調小 vh 係數,而那會連帶把 660 也一起縮掉。
   媒體查詢把「矮螢幕才收斂」這件事講清楚,660 與 412×880 完全不受影響。

   斷點取 600px:660(iPhone 15 + Chrome)在外、553(SE + Safari)在內。 */
@media (max-height: 600px) {
  .p02-title { margin-top: 4px; }
  .p02-cards { margin-top: 14px; }
  .p02-card { padding: 10px 12px; }
  .p02-card__art { height: 76px; }
  .p02-card__title { margin-top: 6px; }
  .p02-desc { margin-top: 16px; }
  .p02-btn { margin-top: 20px; }
}