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

   T-076 版面修正(2026-07-29,主席回報:gif 要放大到設計稿的比例、下方說明文與 CTA 可以浮在圖上):
   本頁是全站溢出最嚴重的一頁 —— iPhone 15 Pro Max Safari 含工具列只有 430×745,
   舊版內容高 852px(溢出 107px),SE 更溢出 278px,CTA 直接掉出畫面。
   作法與頁 04 的 T-075 同一套,差別在這張 gif 的透明留白更誇張:
   實測內容只佔 y 226~373(全高的 24.7%),上下各約 37% 是全透明 —— 等於舊版把三分之二的
   垂直預算花在空氣上,心臟才只畫到螢幕寬的 40%。裁掉之後同樣的空間可以放到接近滿版。 */

/* 這裡刻意**不寫** `#screen-aed-intro { height: 100% }`:100% 是對 .app-screen 算的,
   沒扣掉 sticky 導覽列的 62px,寫了就固定溢出 62px(頁 01 可以那樣寫是因為它沒有導覽列)。
   .screen 已由 T-075 的 `flex: 1 0 0` 拿到「導覽列以下的剩餘高度」。 */
.p06-page {
  /* 用 height 不用 min-height:高度要是確定值,圖區的 flex-shrink 與 max-height:100% 才收斂得了 */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 左右內距下放到各區塊 —— 圖要吃滿整個畫面寬 */
  padding: 6px 0 0;
  text-align: center;
}

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

.p06-desc {
  margin-top: 26px;
  padding: 0 24px;
  font-weight: 700;
  font-size: clamp(16px, 4.8vw, 18px);
  line-height: 1.75;
  color: var(--ink);
}

/* 第二段說明文在 CTA 那組裡(見 .p06-foot),上邊距由 foot 的內距承擔 */
.p06-desc--second {
  margin-top: 0;
}

/* 圖區吃掉說明文與 CTA 之間的剩餘高度。min-height:0 不能少 ——
   flex item 預設 min-height:auto,不歸零的話子元素的 max-height:100% 形同虛設。 */
.p06-artbox {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

/* 裁切框:只留 gif 中央有心臟的那一段(實測 y 226~373,上下各留 20px 餘裕 → 保留 180px)。
   寬度給到滿版(素材原寬 420,440 的上限等於最多放大 5%,平塗插畫看不出來),
   對齊設計稿上兩顆心臟約佔螢幕寬 2/3 的比例。 */
.p06-crop {
  width: min(100%, 440px);
  aspect-ratio: 420 / 180;
  max-height: 100%;
  /* 收斂的底線:本頁上下各有一段文字要養,矮螢幕上圖區被壓得比頁 04 更兇。
     低於這個高度心臟就只剩中間一截,寧可讓整頁小捲一段。 */
  min-height: 130px;
  overflow: hidden;
}

.p06-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 第二段說明文 + CTA 一起貼底(margin-top:auto)。
   gif 是去背素材、下緣一大片透明,所以這組即使壓到圖框上也只會壓在透明區 ——
   矮螢幕上圖框被 max-height 收斂時,寧可疊上去也不要把 CTA 頂出畫面(主席 2026-07-29 指示)。 */
.p06-foot {
  margin-top: auto;
  padding: 8px 24px 28px;
}

.p06-btn { margin-top: 26px; }

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