/* 頁面 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-087 素材到位後這條規則直接套在 <a> 上(當初就是這樣設計的) */
.p09-card__media {
  display: flex;
  margin-top: 12px;
  --placeholder-radius: 14px;
}

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

/* 寫死高度只有佔位框需要 —— 真縮圖是 16:9,寫死 150px 會把圖裁掉或壓變形 */
.p09-card__media--video.placeholder {
  height: 150px;
}

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

/* 教學影片縮圖(1920×1080 壓到 800×450):滿卡片寬,圓角比照輸入框。
   外層 <a> 已經給了 margin-top,圖自己不再加,否則兩段間距疊起來 */
.p09-card__img--video {
  width: 100%;
  margin-top: 0;
  border-radius: var(--radius-input);
}

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