/* 頁面 09 More 專屬樣式。
   注意:#screen-more 本身絕不可設 display(見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—
   layout 一律放在頁面自己的 wrapper class 上。 */
.p09-page {
  padding: 6px 22px 40px;
  text-align: center;
}

.p09-title {
  font-weight: 900;
  font-size: clamp(25px, 8vw, 30px);
  color: var(--red-accent);
  margin-top: 16px;
}

.p09-card {
  margin-top: 20px;
  padding: 20px;
  text-align: left;
}

.p09-title + .p09-card {
  margin-top: 24px;
}

.p09-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.p09-card__title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

/* 教學影片仍是佔位框(T-037);素材到位後這條規則會直接套用在 <a> 上 */
.p09-card__media {
  display: flex;
  margin-top: 12px;
  --placeholder-radius: 14px;
}

.p09-card__media--video {
  height: 150px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* T-062:真素材一律「寬度給上限、高度自動」,不寫死高度免得把圖壓變形 */
.p09-card__img {
  display: block;
  margin: 14px auto 0;
  max-width: 100%;
  height: auto;
}

/* 閃電CPR挑戰主視覺(528×429):場次已畫在圖裡,是這張卡的主角,給大一點 */
.p09-card__img--event {
  width: min(88%, 300px);
}

/* 品牌識別是橫式字標(467×155),不需要跟主視覺一樣大 */
.p09-card__img--brand {
  width: min(80%, 260px);
}

.p09-home {
  margin-top: 26px;
}