/*
 * 課程頁版型 v2（ol-*）
 *
 * 來源：gdcometrue.com 課程頁（2026 改版）內嵌的 <style>，原樣抽出。
 * 比舊的 kc-* 版型多了：閱讀進度條、快速瀏覽錨點、英文 eyebrow 小標、
 * 編號卡片、講座資訊表、講師經歷清單、結尾 CTA、浮動報名鈕。
 *
 * 作用域：所有選擇器都在 .ol-* 底下，可安全全域載入。
 * 唯一的例外是 @keyframes 內的 0%/100%，不影響其他頁面。
 *
 * --ol-delay 由 course-page-ol.js 以行內樣式設定（進場動畫的錯開延遲）。
 * 沒載入那支 JS 時所有元素會同時顯示，不影響閱讀。
 *
 * 舊的 kc-* 版型仍保留在 course-page.css，供早期手貼的課程頁使用。
 */

.ol-event, .ol-event * { box-sizing: border-box; }
  .ol-event {
    --ink:#26352f; --muted:#637068; --green:#236c52; --green-dark:#174c3a;
    --sage:#eaf2ec; --cream:#faf8f2; --line:#d9e2db; --white:#fff; --accent:#d89a55;
    color:var(--ink); background:#fff; font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
    font-size:19px; line-height:1.85; letter-spacing:.02em; overflow:hidden;
  }
  .ol-event a { color:inherit; }
  .ol-progress { position:fixed; top:0; left:0; z-index:60; width:100%; height:4px; pointer-events:none; }
  .ol-progress-bar { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--accent),#f1c88c); transform:scaleX(0); transform-origin:left center; box-shadow:0 1px 8px rgba(216,154,85,.45); }
  .ol-event h1,.ol-event h2,.ol-event h3,.ol-event p,.ol-event li,.ol-event dd { margin-top:0; word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
  .ol-event h1,.ol-event h2,.ol-event h3 { text-wrap:balance; }
  .ol-wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
  .ol-hero { position:relative; width:min(1120px,calc(100% - 40px)); margin:32px auto 24px; padding:72px 0 62px; color:var(--white); background:linear-gradient(125deg,#153f32 0%,#246a52 58%,#678d6f 100%); border-radius:38px; box-shadow:0 22px 50px rgba(21,63,50,.14); }
  .ol-hero .ol-wrap { width:min(960px,calc(100% - 72px)); }
  .ol-hero:before,.ol-hero:after { content:""; position:absolute; pointer-events:none; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
  .ol-hero:before { right:7%; top:-130px; width:330px; height:330px; animation:ol-drift 8s ease-in-out infinite alternate; }
  .ol-hero:after { right:-8%; bottom:-160px; width:460px; height:460px; animation:ol-drift 11s ease-in-out infinite alternate-reverse; }
  .ol-hero .ol-wrap { position:relative; z-index:1; }
  .ol-kicker { display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; padding:7px 14px; border:1px solid rgba(255,255,255,.42); border-radius:99px; font-size:16px; font-weight:700; letter-spacing:.08em; }
  .ol-kicker:before { content:""; width:24px; height:1px; background:var(--accent); }
  .ol-hero h1 { max-width:860px; margin-bottom:22px; font-size:clamp(34px,4.2vw,46px); line-height:1.35; letter-spacing:.01em; animation:ol-rise .75s .08s both; }
  .ol-hero-lead { max-width:720px; margin-bottom:28px; color:#eef6f0; font-size:clamp(19px,2.2vw,23px); }
  .ol-event-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:930px; margin-top:32px; }
  .ol-fact { min-height:126px; padding:20px 24px; border:1px solid rgba(255,255,255,.22); border-radius:30px 30px 30px 20px; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.07)); transition:transform .3s ease,background .3s ease,border-color .3s ease; }
  .ol-fact:hover { transform:translateY(-5px); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }
  .ol-fact-label { display:block; margin-bottom:7px; color:#d9e9df; font-size:16px; font-weight:800; }
  .ol-fact-value { display:block; color:#fff; font-size:20px; font-weight:800; line-height:1.65; text-wrap:balance; }
  .ol-fact-value > span { display:block; }
  .ol-nav-shell { position:sticky; top:12px; z-index:20; width:min(1120px,calc(100% - 40px)); margin:0 auto 20px; padding:18px 0 16px; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:0 12px 30px rgba(21,63,50,.08); }
  .ol-nav-title { display:flex; align-items:center; gap:12px; margin:0 0 12px!important; color:var(--green-dark); font-size:17px; font-weight:900; }
  .ol-nav-title:after { content:""; flex:1; height:1px; background:var(--line); }
  .ol-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:0; overflow-x:auto; scrollbar-width:none; }
  .ol-nav::-webkit-scrollbar { display:none; }
  .ol-nav a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:9px 13px; border:1px solid #d5e2d9; border-radius:18px; background:linear-gradient(145deg,#f7faf8,#edf4ef); color:var(--green-dark); font-size:16px; font-weight:800; text-align:center; text-decoration:none; transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease; }
  .ol-nav a:hover,.ol-nav a:focus-visible { color:#fff; background:var(--green); border-color:var(--green); transform:translateY(-2px); box-shadow:0 8px 18px rgba(23,76,58,.14); }
  .ol-nav a.is-active { color:#fff; background:var(--green-dark); border-color:var(--green-dark); box-shadow:0 5px 14px rgba(23,76,58,.2); }
  .ol-section { padding:72px 0; scroll-margin-top:88px; }
  .ol-section.alt { background:#fff; }
  .ol-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--green); font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
  .ol-eyebrow:before { content:""; width:28px; height:2px; border-radius:99px; background:var(--accent); }
  .ol-title { margin-bottom:28px; color:var(--green-dark); font-size:clamp(28px,3.8vw,40px); line-height:1.35; }
  .ol-intro { max-width:800px; font-size:20px; }
  .ol-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .ol-card { position:relative; overflow:hidden; padding:30px; background:linear-gradient(145deg,#fff,#f8faf7); border:1px solid var(--line); border-radius:32px 32px 32px 22px; box-shadow:0 10px 28px rgba(27,70,54,.06); transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease,background .32s ease,color .32s ease; }
  .ol-card:nth-child(2n) { background:linear-gradient(145deg,#f7faf7,#edf5ef); border-radius:32px 32px 22px 32px; }
  .ol-card:before { content:""; position:absolute; right:-28px; bottom:-34px; width:86px; height:86px; border:1px solid rgba(35,108,82,.1); border-radius:50%; }
  .ol-card:hover { transform:translateY(-7px); border-color:#b7cdbd; box-shadow:0 18px 38px rgba(27,70,54,.12); }
  .ol-card:active { transform:translateY(-2px) scale(.99); }
  .ol-card h3 { margin-bottom:8px; color:var(--green-dark); font-size:22px; }
  .ol-card p { margin-bottom:0; color:var(--muted); }
  #learn .ol-card h3,#learn .ol-card p,#learn .ol-num { transition:color .32s ease,background .32s ease,border-color .32s ease,transform .32s ease; }
  #learn .ol-card:hover,#learn .ol-card:focus-within { color:#fff; background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-10px); box-shadow:0 20px 40px rgba(23,76,58,.25); }
  #learn .ol-card:hover h3,#learn .ol-card:hover p,#learn .ol-card:focus-within h3,#learn .ol-card:focus-within p { color:#fff; }
  #learn .ol-card:hover .ol-num,#learn .ol-card:focus-within .ol-num { color:var(--green-dark); background:#fff; border-color:#fff; transform:scale(1.08); }
  .ol-speakers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
  .ol-speaker { position:relative; display:grid; grid-template-columns:150px 1fr; gap:24px; padding:26px; background-color:#f5f4ed!important; background-image:linear-gradient(145deg,#fffdf8,#f5f4ed)!important; border:1px solid #dfe4dc; border-radius:38px 38px 38px 24px; box-shadow:0 16px 38px rgba(27,70,54,.07); }
  .ol-speaker:nth-child(2) { background-color:#eaf3ec!important; background-image:linear-gradient(145deg,#f9fcf9,#eaf3ec)!important; border-radius:38px 38px 24px 38px; }
  .ol-speaker:before { content:""; position:absolute; top:26px; right:28px; width:34px; height:3px; border-radius:99px; background:var(--accent); opacity:.8; }
  /* 講師照片統一以 424 × 743 為基準比例，響應式縮放且人物保持完整。 */
  .ol-speaker-photo { width:150px; height:auto; aspect-ratio:424/743; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:26px; background:linear-gradient(180deg,#f5f2e9,#e3ece5); box-shadow:0 10px 24px rgba(27,70,54,.09); }
  .ol-speaker-photo img { display:block; width:100%; height:100%; padding:18px 14px 0; object-fit:contain!important; object-position:center center!important; border-radius:26px; transition:transform .55s ease; }
  .ol-speaker:hover .ol-speaker-photo img { transform:scale(1.035); }
  .ol-speaker-role { margin-bottom:5px; color:var(--green); font-size:15px; font-weight:800; letter-spacing:.1em; }
  .ol-speaker h3 { margin-bottom:14px; color:var(--green-dark); font-size:25px; line-height:1.4; }
  .ol-career { padding:0; margin:0; list-style:none; color:var(--muted); font-size:16px; line-height:1.7; }
  .ol-career li { position:relative; padding-left:18px; margin-bottom:7px; }
  .ol-career li:before { content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .ol-num { display:inline-grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border:1px solid rgba(35,108,82,.15); border-radius:14px 14px 14px 7px; color:var(--green-dark); background:var(--sage); font-size:15px; font-weight:900; }
  .ol-story { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:stretch; }   /* 2026-10-01 兩張敘事卡等寬等高，不再一高一低 */
  .ol-quote { padding:34px; border:1px solid #d5e3d8; border-left:6px solid var(--accent); border-radius:32px 32px 32px 18px; background:linear-gradient(135deg,var(--sage),#f7f8f2); font-size:21px; box-shadow:0 12px 28px rgba(27,70,54,.06); }
  .ol-quote p:last-child { margin-bottom:0; }
  .ol-info { display:flex; flex-direction:column; gap:12px; margin:0; }
  .ol-info-row { display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; padding:18px 24px; border:1px solid var(--line); border-radius:20px; background:var(--cream); box-shadow:0 7px 20px rgba(27,70,54,.05); transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease,background .32s ease; }
  .ol-info-row:hover,.ol-info-row:focus-within { transform:translateY(-6px); border-color:#b7cdbd; background:#fff; box-shadow:0 16px 34px rgba(27,70,54,.12); }
  .ol-info-label { color:var(--green-dark); font-weight:800; }
  .ol-info-value { min-width:0; color:var(--ink); }
  .ol-info-value a { color:var(--green); font-weight:800; overflow-wrap:anywhere; text-underline-offset:3px; }
  .ol-meet { padding:38px; border-radius:36px; color:#fff; background:linear-gradient(130deg,var(--green-dark),var(--green)); }
  .ol-meet h2 { margin-bottom:10px; font-size:30px; }
  .ol-meet p { margin-bottom:22px; color:#eff7f1; }
  .ol-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 24px; border-radius:999px; color:#fff!important; background:var(--green); font-weight:800; text-decoration:none; box-shadow:0 9px 22px rgba(23,76,58,.2); }
  .ol-button:hover,.ol-button:focus-visible { background:var(--green-dark); transform:translateY(-1px); }
  .ol-button { position:relative; overflow:hidden; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
  .ol-button:after { content:""; position:absolute; inset:-60% auto -60% -55%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .55s ease; }
  .ol-button:hover:after { left:125%; }
  .ol-button.light { color:var(--green-dark)!important; background:#fff; }
  .ol-note { margin-top:14px; margin-bottom:0!important; color:#dcebe1!important; font-size:16px; }
  .ol-final { margin:0; padding:24px 20px 92px; text-align:center; background:transparent; border:0; border-radius:0; }
  .ol-final p { margin:0; color:var(--green-dark); font-size:clamp(22px,3vw,30px); font-weight:900; }
  .ol-float { position:fixed; right:22px; bottom:22px; z-index:30; }
  @keyframes ol-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
  @keyframes ol-drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(-22px,18px,0); } }
  @keyframes ol-pulse { 0%,100% { box-shadow:0 9px 22px rgba(23,76,58,.2); } 50% { box-shadow:0 9px 30px rgba(35,108,82,.42); } }
  @keyframes ol-scroll-reveal { from { transform:translateY(54px) scale(.985); clip-path:inset(10% 0 0 0 round 24px); } to { transform:none; clip-path:inset(0 0 0 0 round 0); } }
  @keyframes ol-scroll-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  .ol-kicker,.ol-hero-lead,.ol-event-facts { animation:ol-rise .75s both; }
  .ol-kicker { animation-delay:0s; }
  .ol-hero-lead { animation-delay:.16s; }
  .ol-event-facts { animation-delay:.24s; }
  .ol-float .ol-button { animation:ol-pulse 2.8s ease-in-out infinite; }
  .ol-motion-ready .ol-reveal { opacity:0; transform:translateY(42px); transition:opacity .75s cubic-bezier(.2,.75,.25,1),transform .75s cubic-bezier(.2,.75,.25,1); transition-delay:var(--ol-delay,0ms); }
  .ol-motion-ready .ol-reveal[data-motion="left"] { transform:translateX(-46px); }
  .ol-motion-ready .ol-reveal[data-motion="right"] { transform:translateX(46px); }
  .ol-motion-ready .ol-reveal[data-motion="scale"] { transform:scale(.93); }
  .ol-motion-ready .ol-reveal.is-visible { opacity:1; transform:none; }
  .ol-speaker,.ol-meet { transition:transform .35s ease,box-shadow .35s ease; }
  .ol-speaker:hover { transform:translateY(-6px); box-shadow:0 18px 42px rgba(27,70,54,.1); }
  .ol-meet:hover { transform:translateY(-4px); box-shadow:0 20px 42px rgba(23,76,58,.2); }
  .ol-quote { transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease; }
  .ol-quote:hover { transform:translateY(-5px); border-color:#b8cdbd; box-shadow:0 18px 36px rgba(27,70,54,.11); }
  @keyframes ol-scroll-clip { from { clip-path:inset(12% 0 0 0 round 26px); } to { clip-path:inset(0 0 0 0 round 0); } }
  @supports (animation-timeline:view()) {
    .ol-section .ol-eyebrow,
    .ol-section .ol-title {
      animation-name:ol-scroll-reveal;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
    .ol-section .ol-card,
    .ol-section .ol-speaker,
    .ol-section .ol-quote,
    .ol-section .ol-info-row,
    .ol-section .ol-meet {
      animation-name:ol-scroll-clip;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
  @supports (animation-timeline:scroll()) {
    .ol-progress-bar {
      animation:ol-scroll-progress linear both;
      animation-timeline:scroll(root block);
    }
  }
  @media (hover:none) and (pointer:coarse) {
    .ol-nav a:active { transform:scale(.97); background:var(--green); color:#fff; }
    .ol-card:active { transform:translateY(-3px) scale(.985); box-shadow:0 14px 30px rgba(27,70,54,.12); }
    .ol-speaker:active,.ol-meet:active { transform:translateY(-3px) scale(.992); box-shadow:0 16px 34px rgba(27,70,54,.14); }
    .ol-speaker:active .ol-speaker-photo img { transform:scale(1.025); }
    #learn .ol-card:active { color:#fff; background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-7px); box-shadow:0 17px 34px rgba(23,76,58,.22); }
    #learn .ol-card:active h3,#learn .ol-card:active p { color:#fff; }
    #learn .ol-card:active .ol-num { color:var(--green-dark); background:#fff; border-color:#fff; }
    .ol-button:active { transform:scale(.96); }
  }
  @media (max-width:900px) {
    .ol-speakers { grid-template-columns:1fr; }
    .ol-speaker { grid-template-columns:170px minmax(0,1fr); }
    .ol-speaker-photo { width:170px; height:auto; aspect-ratio:424/743; }
  }
  @media (max-width:760px) {
    .ol-event { font-size:18px; line-height:1.82; }
    .ol-wrap { width:min(100% - 28px,1120px); }
    .ol-hero { width:calc(100% - 28px); margin:14px auto 16px; padding:52px 0 44px; border-radius:30px; }
    .ol-hero .ol-wrap { width:calc(100% - 36px); }
    .ol-nav-shell { position:relative; top:auto; width:calc(100% - 28px); padding:15px 0 13px; border-radius:24px; }
    .ol-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; overflow:visible; }
    .ol-nav a { min-width:0; min-height:46px; padding:9px 8px; }
    .ol-section { padding:54px 0; }
    .ol-grid,.ol-story,.ol-event-facts { grid-template-columns:1fr; }
    .ol-fact { min-height:auto; }
    .ol-speaker { grid-template-columns:150px minmax(0,1fr); gap:20px; padding:22px; border-radius:30px; }
    .ol-speaker-photo { width:150px; height:auto; aspect-ratio:424/743; }
    .ol-info-row { grid-template-columns:1fr; gap:3px; padding:17px 20px; border-radius:18px; }
    .ol-float { right:14px; bottom:88px; }
    .ol-float .ol-button { min-height:48px; padding:10px 17px; font-size:16px; }
    .ol-final { padding:20px 14px 86px; }
  }
  @media (max-width:560px) {
    .ol-speaker { grid-template-columns:1fr; }
    .ol-speaker { padding:22px 18px 26px; border-radius:32px; }
    .ol-speaker:nth-child(2) { border-radius:32px; }
    .ol-speaker:before { top:18px; right:22px; }
    .ol-speaker-photo { width:min(100%,220px); height:auto; max-height:none; aspect-ratio:424/743; margin-inline:auto; padding:0; border-radius:26px; }
    .ol-speaker-photo img { padding:20px 16px 0!important; border-radius:24px; }
    .ol-speaker-copy,.ol-speaker > div:last-child { text-align:left; }
    .ol-nav-title { font-size:16px; }
  }
  @media (max-width:380px) {
    .ol-nav { grid-template-columns:1fr; }
    .ol-speaker-photo { width:min(100%,210px); height:auto; max-height:none; aspect-ratio:424/743; }
  }
  @media (prefers-reduced-motion:reduce) {
    .ol-event * { scroll-behavior:auto!important; transition-duration:.2s!important; }
    .ol-hero:before,.ol-hero:after,.ol-float .ol-button { animation:none!important; }
    .ol-motion-ready .ol-reveal { transition-duration:.28s!important; transform:translateY(12px); }
  }

/* ──────────────────────────────────────────────────────────
 * 本專案補充（以上為 gdcometrue 原樣抽出，以下是我們自己加的）
 *
 * 原版型的講師卡是「照片欄 150px + 文字欄」兩欄 grid。
 * 我們目前沒有講師照片的資料來源（courses.speakers 只有姓名／職稱／
 * 簡介／經歷），只渲染一欄內容，不改成單欄的話文字會被擠進 150px。
 * ────────────────────────────────────────────────────────── */
.ol-speakers .ol-speaker--no-photo { grid-template-columns: 1fr; }

/* ══════════ v2.1 · 2026-09-27 · 圖文版型（照片來自課程照片庫，AI 用 data-photo 指定） ══════════
 *   div.ol-media                 左圖右文（加 ol-media--reverse 變右圖左文）
 *     > figure > img             照片
 *     > div                      文字（可放 ol-eyebrow / ol-title / p / ul）
 *   figure.ol-photo-band         全寬照片帶（直屬 main.ol-event），figcaption 疊一句大標語
 *   .ol-card > figure.ol-card-img 卡片頂端照片
 */
.ol-event figure { margin:0; }
.ol-event img { max-width:100%; }
.ol-media { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:center; margin:8px 0 44px; }
.ol-media--reverse > figure { order:2; }
.ol-media img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:32px 32px 32px 20px; box-shadow:0 18px 40px rgba(27,70,54,.14); }
.ol-media figcaption { margin-top:10px; color:var(--muted); font-size:15px; }
.ol-media > div > :last-child { margin-bottom:0; }
.ol-photo-band, .ol-event .ol-photo-band { position:relative; width:min(1120px,calc(100% - 40px)); margin:24px auto 52px;   /* 2026-10-01 要比 .ol-event figure{margin:0} 權重高，否則照片帶靠左 */ overflow:hidden; border-radius:38px; box-shadow:0 22px 50px rgba(21,63,50,.14); }
.ol-photo-band img { display:block; width:100%; height:clamp(260px,38vw,460px); object-fit:cover; }
.ol-photo-band figcaption { position:absolute; left:0; right:0; bottom:0; padding:64px 40px 30px; color:#fff; font-size:clamp(21px,2.6vw,32px); font-weight:800; line-height:1.45; background:linear-gradient(0deg,rgba(20,38,10,.78),rgba(20,38,10,0)); text-wrap:balance; }
.ol-card-img { margin:-30px -30px 22px; overflow:hidden; }
.ol-card-img img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s ease; }
.ol-card:hover .ol-card-img img { transform:scale(1.04); }
@media (max-width: 860px) {
  .ol-media { grid-template-columns:1fr; gap:22px; }
  .ol-media--reverse > figure { order:0; }
  .ol-photo-band { border-radius:26px; }
  .ol-photo-band figcaption { padding:48px 22px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
 * 2026-10-02 課程內容資料區塊（CourseProfile：真實內容由系統原樣顯示）
 *   課程表 .ol-sched｜課程對象 .ol-chips｜常見問題 .ol-faq｜須知 .ol-list｜學習成果 .ol-grid--3
 * ══════════════════════════════════════════════════════════════════ */
.ol-event .ol-tags { margin: 10px 0 0; color: var(--green); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.ol-event .ol-note { margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.ol-event .ol-lead-note { font-size: 18px; line-height: 1.8; margin: 0; }
.ol-event .ol-subtitle { font-size: 19px; font-weight: 700; margin: 22px 0 10px; color: var(--ink); }
.ol-event .ol-subtitle:first-child { margin-top: 0; }
.ol-event .ol-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ol-event .ol-card--plain { padding: 24px; }
.ol-event .ol-card--plain h3 { font-size: 19px; margin: 0 0 8px; }

.ol-event .ol-sched { display: grid; gap: 14px; }
.ol-event .ol-sched-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.ol-event .ol-sched-when b { display: block; font-size: 17px; color: var(--green-dark); }
.ol-event .ol-sched-when span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
.ol-event .ol-sched-what h3 { margin: 0 0 6px; font-size: 19px; }
.ol-event .ol-sched-what p { margin: 0; color: var(--muted); line-height: 1.75; }

.ol-event .ol-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.ol-event .ol-chips li { padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid #D5E3C2; font-size: 16px; }

.ol-event .ol-faq { display: grid; gap: 12px; }
.ol-event .ol-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; }
.ol-event .ol-faq-item summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-size: 17px; font-weight: 600; position: relative; display: flex; gap: 12px; align-items: baseline; }
.ol-event .ol-faq-item summary::-webkit-details-marker { display: none; }
.ol-event .ol-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--green); }
.ol-event .ol-faq-item[open] summary::after { content: '−'; }
.ol-event .ol-faq-q { flex-shrink: 0; color: var(--green); font-weight: 800; }
.ol-event .ol-faq-a { padding: 0 0 20px; color: #3A3A3C; line-height: 1.8; }

.ol-event .ol-list { margin: 0; padding-left: 1.2em; }
.ol-event .ol-list li { margin-bottom: 6px; line-height: 1.75; }

@media (max-width: 767.98px) {
  .ol-event .ol-grid--3 { grid-template-columns: 1fr; }
  .ol-event .ol-sched-row { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
 * 2026-10-02 依課程類別的版型（main.ol-event.ol-v-{exam|camp|refresher|seminar}）
 * 使用者：開頭不要大片綠色、改照片底圖；版型可依課程屬性不同；
 * 綠色只當點綴、標題深色、粗體收斂、講師卡白底（與全站一致）。
 * 開頭照片由 CoursePageAssembler 以 --ol-hero-img 帶入。
 * ══════════════════════════════════════════════════════════════════ */

/* ── 全站一致 ── */
.ol-event .ol-title { color: var(--ink); }
.ol-event .ol-section.alt { background: #F7FAF0; }
.ol-event .ol-card, .ol-event .ol-card:nth-child(2n) { background: #fff; }
.ol-event .ol-speaker, .ol-event .ol-speaker:nth-child(2) { background-color: #fff !important; background-image: none !important; border-color: var(--line); }
.ol-event .ol-nav a { font-weight: 500; background: #fff; border-color: var(--line); color: var(--ink); }
.ol-event .ol-nav-title { font-weight: 500; color: var(--ink); }
.ol-event .ol-kicker, .ol-event .ol-fact-label, .ol-event .ol-eyebrow, .ol-event .ol-num { font-weight: 500; }
.ol-event .ol-fact-value { font-weight: 600; }
.ol-event .ol-faq-q { font-weight: 600; }

/* ── 開頭共用 ── */
.ol-event .ol-hero.ol-hero--photo { background: #2a2a2a var(--ol-hero-img) center 40% / cover no-repeat; border-radius: 28px; box-shadow: 0 16px 40px rgba(0,0,0,.10); }
.ol-event .ol-hero.ol-hero--photo:after { content: none; }
.ol-event .ol-hero.ol-hero--photo:before { content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: inherit; animation: none; }
.ol-event .ol-hero-jump { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 24px; border-radius: 999px; font-size: 16px; text-decoration: none !important; border: 1px solid var(--line); background: #fff; color: var(--ink) !important; transition: border-color .2s, background .2s; }
.ol-event .ol-hero-jump:hover { border-color: var(--accent); background: var(--sage); }

/* 淺色開頭（檢定、講座、回訓）：深色字＋白卡 */
.ol-event.ol-v-exam .ol-hero.ol-hero--photo, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo, .ol-event .ol-hero.ol-hero--plain { color: var(--ink); }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-kicker, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-kicker, .ol-event .ol-hero.ol-hero--plain .ol-kicker { border-color: #D5E3C2; background: var(--sage); color: var(--green); }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-kicker:before, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-kicker:before, .ol-event .ol-hero.ol-hero--plain .ol-kicker:before { content: none; }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-hero-lead, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-hero-lead, .ol-event .ol-hero.ol-hero--plain .ol-hero-lead { color: #3A3A3C; }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-fact, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-fact, .ol-event .ol-hero.ol-hero--plain .ol-fact { background: rgba(255,255,255,.94); border-color: var(--line); min-height: 0; }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-fact-label, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-fact-label, .ol-event .ol-hero.ol-hero--plain .ol-fact-label { color: var(--muted); }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-fact-value, .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-fact-value, .ol-event .ol-hero.ol-hero--plain .ol-fact-value { color: var(--ink); font-size: 18px; }

/* ── 檢定考試班：照片右側，左側白色漸層放文字（像正式簡章） ── */
.ol-event.ol-v-exam .ol-hero.ol-hero--photo { padding: 64px 0 56px; }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo:before { background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 44%, rgba(255,255,255,.45) 68%, rgba(255,255,255,0) 88%); }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo h1, .ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-hero-lead { max-width: 600px; }
.ol-event.ol-v-exam .ol-hero.ol-hero--photo .ol-event-facts { max-width: 760px; }

/* ── 營隊：全幅大照片、文字壓在下方（雜誌感） ── */
.ol-event.ol-v-camp .ol-hero.ol-hero--photo { width: 100%; margin: 0 0 24px; border-radius: 0; box-shadow: none; min-height: 700px; display: flex; align-items: flex-end; padding: 140px 0 60px; color: #fff; background-position: center 45%; }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo:before { background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(10,20,8,.84) 100%); }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo .ol-wrap { width: min(1120px, calc(100% - 40px)); }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 900px; }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo .ol-hero-lead { color: rgba(255,255,255,.94); max-width: 760px; }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo .ol-fact { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); min-height: 0; }
.ol-event.ol-v-camp .ol-hero.ol-hero--photo .ol-hero-jump { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff !important; }
.ol-v-camp .ol-nav-shell { margin-top: 0; }
/* 營隊課程表改時間軸 */
.ol-v-camp .ol-sched { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--sage); }
.ol-v-camp .ol-sched-row { position: relative; display: block; padding: 26px 26px 0 0; background: transparent; border: 0; border-radius: 0; }
.ol-v-camp .ol-sched-row:before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.ol-v-camp .ol-sched-when b { color: var(--green); font-weight: 500; }
.ol-v-camp .ol-sched-what { margin-top: 10px; }

/* ── 回訓：精簡，沒有大照片，資訊卡在右側 ── */
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain { background: #FBFBFD; border: 1px solid var(--line); box-shadow: none; border-radius: 28px; padding: 52px 0; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain:before, .ol-event.ol-v-refresher .ol-hero.ol-hero--plain:after { content: none; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-wrap { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 44px; align-items: start; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-wrap > * { grid-column: 1; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain h1 { font-size: clamp(28px, 3.2vw, 36px); }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-event-facts { grid-column: 2; grid-row: 1 / span 5; grid-template-columns: 1fr; gap: 0; margin-top: 0; padding: 6px 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-fact { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-fact:last-child { border-bottom: 0; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-fact:hover { transform: none; }
.ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-hero-jump { justify-self: start; }

/* ── 講座：左文右圖，講師與主題當主角 ── */
.ol-event.ol-v-seminar .ol-hero.ol-hero--photo { background: #fff; border: 1px solid var(--line); box-shadow: none; min-height: 560px; padding: 60px 0; }
.ol-event.ol-v-seminar .ol-hero.ol-hero--photo:before { left: auto; width: 46%; background: var(--ol-hero-img) center 30% / cover no-repeat; border-radius: 0 28px 28px 0; }
.ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-wrap { width: auto; margin: 0 calc(46% + 44px) 0 56px; }
.ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-event-facts { grid-template-columns: 1fr; gap: 10px; }

/* ── 手機 ── */
@media (max-width: 767.98px) {
  .ol-event.ol-v-exam .ol-hero.ol-hero--photo:before { background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.95) 40%); }
  .ol-event.ol-v-camp .ol-hero.ol-hero--photo { min-height: 600px; padding: 120px 0 40px; }
  .ol-v-camp .ol-sched { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--sage); }
  .ol-v-camp .ol-sched-row { padding: 0 0 26px 24px; }
  .ol-v-camp .ol-sched-row:before { top: 4px; left: -9px; }
  .ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-wrap { grid-template-columns: 1fr; }
  .ol-event.ol-v-refresher .ol-hero.ol-hero--plain .ol-event-facts { grid-column: 1; grid-row: auto; margin-top: 22px; }
  .ol-event.ol-v-seminar .ol-hero.ol-hero--photo { padding: 0 0 36px; }
  .ol-event.ol-v-seminar .ol-hero.ol-hero--photo:before { position: relative; display: block; width: 100%; height: 240px; border-radius: 28px 28px 0 0; margin-bottom: 28px; }
  .ol-event.ol-v-seminar .ol-hero.ol-hero--photo .ol-wrap { margin: 0 auto; width: calc(100% - 40px); }
}

/* 資訊表：舊頁面內嵌的 dt/dd 樣式會把 .ol-info 變成兩欄格線，系統產生的 .ol-info-row 版本一律用這組 */
.ol-event .ol-info:has(> .ol-info-row) { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.ol-event .ol-info-label { font-weight: 500; color: var(--muted); }
/* 線上連結區塊：不用大片深綠 */
.ol-event .ol-meet { color: var(--ink); background: #F7FAF0; border: 1px solid #D5E3C2; }
.ol-event .ol-meet h2 { color: var(--ink); }
.ol-event .ol-meet p { color: #3A3A3C; }
.ol-event .ol-meet .ol-button.light { background: var(--green); color: #fff !important; }

/* 2026-10-03 講師精簡卡：沒有經歷介紹時，照片＋職稱＋姓名一行排開，不留大片空白 */
.ol-event .ol-speakers:has(.ol-speaker--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) { .ol-event .ol-speakers:has(.ol-speaker--compact) { grid-template-columns: 1fr; } }
.ol-event .ol-speaker.ol-speaker--compact { grid-template-columns: 96px 1fr; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 20px; min-height: 0; }
.ol-event .ol-speaker--compact .ol-speaker-photo { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 50%; background: var(--sage); box-shadow: none; }
.ol-event .ol-speaker--compact .ol-speaker-photo img { width: 100%; height: 100%; padding: 0; border-radius: 50%; object-fit: cover !important; object-position: center 20% !important; }
.ol-event .ol-speaker--compact .ol-speaker-copy h3 { margin: 4px 0 0; font-size: 22px; color: var(--ink); }
.ol-event .ol-speaker--compact .ol-speaker-role { margin: 0; font-size: 15px; color: var(--muted); font-weight: 500; }
.ol-event .ol-speaker--compact:before, .ol-event .ol-speaker--compact:after { content: none; }