/* ════════════════════════════════════════════════════════════
   Casper77 AI Course — Slide Mode
   把 lesson 的每個 <section> 變成全螢幕投影片。
   非破壞性：拿掉 body.slide-mode 就回到原本捲動文件。
   ════════════════════════════════════════════════════════════ */

/* ── 放大字級（只在投影片模式生效，覆寫設計系統變數）──
   基準值放大；再由 JS auto-fit 依畫面大小自動放大/縮小到剛好填滿。 */
body.slide-mode {
  --fs-xs:   17px;
  --fs-sm:   20px;
  --fs-base: 24px;
  --fs-md:   27px;
  --fs-lg:   32px;
  --fs-xl:   38px;
  --fs-2xl:  48px;
  --fs-3xl:  62px;

  padding-top: 0 !important;   /* 蓋掉 nav.js 的 inline padding */
  height: 100vh;
  overflow: hidden;            /* 投影片自己掌管整個畫面 */
}

/* 投影片模式下藏掉站台導覽列與頁尾 */
body.slide-mode > #site-nav { display: none !important; }
body.slide-mode > footer    { display: none !important; }

/* ── 每個 section = 一張全螢幕投影片（永不捲動）── */
body.slide-mode > section {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;            /* 永不出現捲軸 */
  border: none !important;
  padding: 76px 0 104px;       /* 上下留給控制列 */
}

/* 任何 active section（.section / .path-section / .section-alt …）都置中顯示；
   太高時由 JS auto-fit 自動縮放到剛好一螢幕。hero 另有特例。 */
body.slide-mode > section.is-active:not(.hero) {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.slide-mode > section.is-active:not(.hero) > .container {
  width: 100%;
  max-width: var(--container);
  transition: transform 0.28s ease;
  transform-origin: center center;
}

/* hero（封面）置中 */
body.slide-mode > section.hero {
  padding: 76px 32px 104px;
}
body.slide-mode > section.hero.is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 進場淡入 */
body.slide-mode > section.is-active {
  animation: slideFade 0.28s ease;
}
@keyframes slideFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 投影片內把 section 標題再放大一點、間距加大 */
body.slide-mode .section-title { font-size: var(--fs-3xl); margin-bottom: 12px; }
body.slide-mode .section-desc  { font-size: var(--fs-md); margin-bottom: 44px; max-width: 820px; }
body.slide-mode .hero h1       { font-size: clamp(40px, 6vw, 68px); }
body.slide-mode .hero .subtitle{ font-size: var(--fs-lg); max-width: 760px; }
body.slide-mode .eyebrow       { font-size: 14px; }

/* ── 投影片模式垂直壓縮 ──
   把文件版的寬鬆間距收緊，讓內容較多的頁（如比較卡、時間軸）需要的高度變小，
   auto-fit 便能放大而不是縮小 → 字更大。只在 slide-mode 生效，不影響文件版。 */
body.slide-mode .section-header { margin-bottom: 16px; }
body.slide-mode .block          { margin-bottom: 20px; }
body.slide-mode .block-title    { margin-bottom: 7px; }
body.slide-mode .block-body     { line-height: 1.5; }
body.slide-mode .block-body p   { margin-bottom: 7px; }

body.slide-mode .compare,
body.slide-mode .tool-compare   { margin: 12px 0; gap: 14px; }
body.slide-mode .compare-card   { padding: 14px 18px; }
body.slide-mode .compare-card li { padding: 3px 0 3px 18px; line-height: 1.45; }
body.slide-mode .tool-card       { padding: 16px 18px; }
body.slide-mode .tool-card-header { margin-bottom: 9px; }
body.slide-mode .tool-card li    { padding: 3px 0 3px 18px; line-height: 1.4; }

body.slide-mode .key-point   { margin: 12px 0; padding: 12px 16px; }
body.slide-mode .evo-timeline { margin: 12px 0; }
body.slide-mode .evo-step    { padding: 12px 14px; }
body.slide-mode .quote-block { margin: 12px 0; padding: 12px 20px; }
body.slide-mode .spectrum    { margin: 14px 0; }

/* 隱藏原生捲軸（仍可滾） */
body.slide-mode > section::-webkit-scrollbar { width: 0; height: 0; }
body.slide-mode > section { scrollbar-width: none; }

/* ════════════════════════════════════════════════════════════
   控制列 chrome
   ════════════════════════════════════════════════════════════ */
#deck-chrome { display: none; }
body.slide-mode #deck-chrome { display: block; }

/* 進度條 */
#deck-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: rgba(127,127,127,0.12); z-index: 50;
}
#deck-progress > span {
  display: block; height: 100%; width: 0;
  background: var(--gold, #c9a961);
  transition: width 0.28s ease;
}

/* 底部導覽 */
#deck-nav {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
#deck-nav > * { pointer-events: auto; }
.deck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; min-width: 46px; padding: 0 14px;
  border: 1px solid var(--hairline, rgba(127,127,127,0.25));
  border-radius: 999px;
  background: var(--bg-elev, rgba(255,255,255,0.9));
  color: var(--fg, #1a1a1a);
  font-family: var(--font-mono, monospace); font-size: 15px;
  cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  transition: border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
}
.deck-btn:hover { border-color: var(--gold, #c9a961); color: var(--gold, #c9a961); }
.deck-btn:active { transform: scale(0.96); }
.deck-btn:disabled { opacity: 0.35; cursor: default; }
.deck-btn svg { width: 20px; height: 20px; }
#deck-counter {
  font-family: var(--font-mono, monospace); font-size: 16px;
  color: var(--fg-2, #555); min-width: 78px; text-align: center;
  letter-spacing: 0.06em; user-select: none;
}
#deck-counter b { color: var(--gold, #c9a961); }

/* 右上角：模式切換 + 全螢幕 + 總覽（在兩種模式都顯示切換鈕） */
#deck-toolbar {
  position: fixed; top: 16px; right: 18px; z-index: 51;
  display: flex; gap: 8px;
}
.deck-tool {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--hairline, rgba(127,127,127,0.25));
  border-radius: 999px;
  background: var(--bg-elev, rgba(255,255,255,0.9));
  color: var(--fg-2, #555);
  font-family: var(--font-mono, monospace); font-size: 13px;
  cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  transition: border-color 0.15s, color 0.15s;
}
.deck-tool:hover { border-color: var(--gold, #c9a961); color: var(--gold, #c9a961); }
.deck-tool svg { width: 16px; height: 16px; }
/* 文件模式：只露出切換鈕，藏掉全螢幕/總覽 */
body:not(.slide-mode) #deck-toolbar .deck-tool[data-only-slide] { display: none; }
/* 文件模式把切換鈕移到右下角浮動，避免被頂部站台導覽列蓋住 */
body:not(.slide-mode) #deck-toolbar {
  top: auto; bottom: 22px; right: 22px; z-index: 9998;
}
body:not(.slide-mode) #deck-toolbar .deck-tool {
  height: 44px; padding: 0 18px; font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* ── 總覽 overlay ── */
#deck-overview {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: var(--bg, #fff); padding: 80px 32px 40px;
  overflow-y: auto;
}
#deck-overview.open { display: block; }
#deck-overview h3 {
  font-family: var(--font-display, serif); font-size: var(--fs-2xl, 32px);
  text-align: center; margin-bottom: 6px; color: var(--fg, #1a1a1a);
}
#deck-overview .deck-ov-sub {
  text-align: center; color: var(--fg-3, #888);
  font-family: var(--font-mono, monospace); font-size: 13px; margin-bottom: 32px;
}
#deck-ov-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; max-width: 980px; margin: 0 auto;
}
.deck-ov-card {
  text-align: left; cursor: pointer;
  border: 1px solid var(--hairline, rgba(127,127,127,0.25));
  border-radius: 14px; padding: 18px 20px; background: var(--bg-elev, #fafafa);
  display: flex; gap: 14px; align-items: baseline;
  transition: border-color 0.15s, transform 0.1s;
}
.deck-ov-card:hover { border-color: var(--gold, #c9a961); transform: translateY(-2px); }
.deck-ov-card.current { border-color: var(--gold, #c9a961); box-shadow: 0 0 0 1px var(--gold, #c9a961) inset; }
.deck-ov-num {
  font-family: var(--font-mono, monospace); font-size: 14px;
  color: var(--gold, #c9a961); font-weight: 600; flex: none;
}
.deck-ov-title {
  font-family: var(--font-sans, sans-serif); font-size: 16px;
  color: var(--fg, #1a1a1a); line-height: 1.4;
}

/* 手機：控制列縮小 */
@media (max-width: 640px) {
  #deck-nav { bottom: 14px; gap: 8px; }
  .deck-btn { height: 42px; }
  body.slide-mode > section { padding: 70px 0 88px; }
}

/* ── 密集投影片瘦身：投影模式壓縮留白，讓 auto-fit 盡量不縮字 ──
   目標：各頁字級盡量接近；縮的是 padding/margin，不是字。 */
body.slide-mode .section-header { margin-bottom: 20px; }
body.slide-mode .section-desc   { margin-bottom: 24px; }
body.slide-mode .block          { margin-bottom: 0; }
body.slide-mode .block-title    { margin-bottom: 10px; }
body.slide-mode .block-body p   { margin-bottom: 8px; }
body.slide-mode .key-point      { padding: 12px 16px; margin: 12px 0; }
body.slide-mode .compare        { gap: 12px; margin: 12px 0; }
body.slide-mode .compare-card   { padding: 14px 18px; }
body.slide-mode .layer-grid     { gap: 12px; margin: 12px 0; }
body.slide-mode .layer-card     { padding: 16px; }
body.slide-mode .terminal       { margin: 12px 0; }
body.slide-mode .terminal-body  { padding: 12px 16px; line-height: 1.6; }
body.slide-mode .exercise-card  { padding: 18px 22px; margin-top: 14px; }
body.slide-mode .exercise-prompt { padding: 12px 16px; margin: 10px 0; }
body.slide-mode .exercise-steps li { padding-top: 6px; padding-bottom: 6px; }