/* ULP 各頁共用樣式：字型、基本重設、按鈕、照片、頁首、頁尾、麵包屑。
 *
 * 載入順序：tokens.css → site.css → 各頁的 <style>。各頁只寫自己獨有的區塊；
 * 要改寫這裡的規則就寫在頁面的 <style>，同權重時後面的贏。
 * 跟 tokens.css 一樣只能用變數，不寫色碼。
 *
 * 注意：手機版的 .wrap 靠 margin:0 20px 留邊。頁面上有 .wrap 的區塊如果要調上下間距，
 * 請寫 margin-top / margin-bottom，不要用 margin 簡寫，否則左右 20px 會被蓋掉。 */

/* 字型自行託管（Google Fonts 的 OFL 字型，latin 子集）；原站用的 Sohne / Sohne Schmal / Ivar 為商用字型，不沿用 */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:block;src:url(fonts/LeagueGothic-400.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:block;src:url(fonts/CormorantGaramond-500.woff2) format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font:400 16px/24px var(--sans);color:var(--text);letter-spacing:.02em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0}
.wrap{width:1200px;margin:0 auto;position:relative}
.only-m{display:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:8px;font:600 16px/20px var(--sans);letter-spacing:.01em;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-red{background:var(--accent);color:var(--on-accent);transition:background .25s ease}
.btn-red:hover{background:var(--accent-hover)}
.btn-gray{background:var(--chip);transition:background .2s}
.btn-gray:hover{background:var(--chip-hover)}
.btn-line{box-shadow:inset 0 0 0 2px var(--chip)}
.ico{width:20px;height:20px;flex:none}

/* ---------- 照片 ----------
   取自 093_landing_page/images（Unsplash / Pixabay 授權，檔名保留作者以便標註），
   轉成 webp、長邊縮到 1400px（橫幅那張 2400px）。.ph 給底色和 cover，.p-* 只換圖。
   沒用到的 class 不會下載圖片，所以全部放這裡 */
.ph{background:var(--media-placeholder) center/cover no-repeat}
.p-drop{background-image:url(media/photos/cesar-couto-UeBFFAPwuj8-unsplash.webp)}
.p-lotus{background-image:url(media/photos/christian-papaux-Rzmtph74aDs-unsplash.webp)}
.p-fly{background-image:url(media/photos/derweg-butterfly-4398861.webp);background-position:40% 50%}
.p-statue{background-image:url(media/photos/enkuu-smile-jmwXKxa0MJU-unsplash.webp)}
.p-buddha{background-image:url(media/photos/gabriel-ramos-W023FcxPXUQ-unsplash.webp)}
.p-zen{background-image:url(media/photos/jared-rice-NTyBbu66_SI-unsplash.webp)}
.p-bloom{background-image:url(media/photos/jay-castor-7AcMUSYRZpU-unsplash.webp)}
.p-row{background-image:url(media/photos/jopeel-quimpo-qP4A-5EloaM-unsplash.webp);background-position:40% 50%}
.p-falls{background-image:url(media/photos/jplenio-japan-waterfall-pixabay.webp)}
.p-maple{background-image:url(media/photos/krantzpeter-japanese-garden-path-pixabay.webp)}
.p-pond{background-image:url(media/photos/lucas-calloch-P-yzuyWFEIk-unsplash.webp)}
.p-leaf{background-image:url(media/photos/luyao-wu-2UkhdRYxFFg-unsplash.webp)}
.p-path{background-image:url(media/photos/mindbodyspiritworld-zen-garden-pixabay.webp)}
.p-monk{background-image:url(media/photos/nikhil-singh-ryVyN3Kfcl8-unsplash.webp)}
.p-pads{background-image:url(media/photos/weixuan-yang-wpxOW7x6-AI-unsplash.webp)}

/* ---------- 主頁首 ---------- */
.hdr{position:sticky;top:0;z-index:20;height:64px;background:var(--bg)}
.hdr .wrap{display:flex;align-items:center;height:64px}
.logo{display:flex;align-items:center;gap:8px;height:32px}
/* LJM logo：圓形 jpg（白底方圖，靠圓角裁掉四角）；頁首旁接平台名稱，手機版只留圓標 */
.mark{display:block;width:32px;height:32px;border-radius:50%;flex:none}
.logo span{font:600 16px/20px var(--sans);white-space:nowrap}
.search{position:relative;display:flex;align-items:center;gap:8px;width:400px;height:44px;margin:0 16px 0 8px;padding:0 16px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--surface-2);color:var(--text-muted);font-size:16px}
.search .ico{color:var(--text);flex:none}
.search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;outline:0}
.search input::placeholder{color:var(--text-muted);opacity:1}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}
/* 頁首搜尋的下拉清單（site.js 產生）。反白用 aria-selected（鍵盤）和 :hover（滑鼠）兩種，同一個樣子 */
.s-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;max-height:min(420px,70vh);overflow-y:auto;padding:6px;border-radius:8px;background:var(--surface);border:1px solid var(--chip)}
.s-pop[hidden],.s-none[hidden]{display:none}
.s-opt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:6px;cursor:pointer}
.s-opt[aria-selected=true],.s-opt:hover{background:var(--surface-hover)}
.s-t{color:var(--text);font-weight:600;line-height:20px}
.s-t mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.s-m{color:var(--text-soft);font-size:13px;line-height:18px}
.s-none{padding:10px 12px;color:var(--text-soft);font-size:14px;line-height:20px}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-r .btn{width:169px;margin-left:-1px}
/* 目前所在頁（aria-current=page）：紅色底線，三套主題都看得出來 */
.hdr-r>a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.burger{display:none}
/* 手機選單面板：由 site.js 產生、插在 .hdr 裡；桌機版不顯示 */
.mnav{display:none}
/* 主題切換：每個色票的 label 自己帶 data-theme，所以 var(--bg)、var(--accent) 取到的是「那一套」的值，色碼不用再抄一份。
   --ring／--gap 先在外層算好（自訂屬性往下繼承的是算好的值），才會是「目前頁面」的顏色，不會被 label 的 data-theme 蓋掉 */
.themes{--ring:var(--text);--gap:var(--surface);--focus-ring:var(--focus);display:flex;gap:6px;padding:5px;border-radius:20px;background:var(--surface)}
.themes label{position:relative;display:block;cursor:pointer}
.themes .sw{display:block;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--bg) 50%,var(--accent) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ring) 30%,transparent)}
.themes input:checked+.sw{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ring) 30%,transparent),0 0 0 2px var(--gap),0 0 0 4px var(--ring)}
.themes input:focus-visible+.sw{outline:2px solid var(--focus-ring);outline-offset:5px}

/* ---------- 內頁頁首橫幅的小元件 ---------- */
.crumb{display:flex;gap:8px;font:600 12px/17.4px var(--sans);color:var(--text-muted)}
.crumb a:hover{color:var(--text)}
.crumb [aria-current]{color:var(--text)}
.redbar{width:24px;height:4px;background:var(--accent);margin-top:26px}
/* 橫幅下的重點清單（「6 micro-programs · 68 lessons」這類），每項前面一個小圓點 */
.facts{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 24px;font:600 14px/21px var(--sans);color:var(--text-soft)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--highlight)}

/* ---------- 課程照片卡網格（courses.html、課程詳細頁的相關課程） ----------
   外觀同 index.html 的 .card，但首頁卡片的內文是絕對定位（固定 240 寬）；
   這裡寬度跟著欄寬走，改成 flex 由下往上排。全部掛在 .pgrid 底下，才不會影響首頁輪播的 .card */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.pgrid .card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:440px;padding:0 16px 20px;border-radius:8px;overflow:hidden;text-align:center;color:var(--on-media);transition:transform .25s ease}
.pgrid .card:hover{transform:translateY(-4px)}
.pgrid .card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pgrid .card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--scrim) 0,color-mix(in srgb,var(--scrim) 50%,transparent) 50%,transparent 75%)}
.pgrid .card>*{position:relative;z-index:1}
.pgrid .card .badge{position:absolute;left:16px;top:17px;display:inline-block;height:24px;padding:0 12px;border-radius:20px;background:var(--badge-bg);color:var(--badge-fg);font:600 12px/24px var(--sans);letter-spacing:.02em}
.pgrid .c-title{font:400 44px/40px var(--cond);text-transform:uppercase;letter-spacing:.06em}
.pgrid .c-title.serif{font:500 30px/30px var(--serif);text-transform:none;letter-spacing:0}
.pgrid .dash{width:16px;height:4px;margin-top:16px;background:var(--on-media-soft);flex:none}
.pgrid .c-who{margin-top:12px;min-height:40px;font:600 16px/20px var(--sans);letter-spacing:.03em;color:var(--on-media-soft)}
.pgrid .c-len{margin-top:4px;font:400 12px/17.4px var(--sans)}
.pgrid .desc{margin-top:12px;font:400 14px/21px var(--sans);color:var(--text-soft)}

/* ---------- 文章卡（news.html、文章內頁的延伸閱讀） ---------- */
/* 文章的分類・日期・閱讀時間 */
.byline{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 12px/17.4px var(--sans);letter-spacing:.02em;color:var(--text-muted)}
.byline .cat{color:var(--highlight)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.post{display:block}
.post:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:8px}
.post-img{height:240px;border-radius:8px;transition:transform .25s ease}
.post:hover .post-img{transform:translateY(-4px)}
.post .byline{margin-top:16px}
.post h3{margin-top:8px;font:600 20px/26px var(--sans);letter-spacing:.02em}
.post:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.post p{margin-top:8px;font:400 14px/21px var(--sans);color:var(--text-soft)}

/* ---------- 頁尾 ---------- */
.foot{padding-bottom:24px;border-top:1px solid var(--border);position:relative}
.foot .wrap{display:flex;flex-wrap:wrap;padding-top:72px}
.f-l{width:389px}
.f-l h3{font:600 20px/25px var(--sans)}
.f-l>p{margin-top:8px;font:400 14px/21px var(--sans);opacity:.6}
.f-contact{margin-top:32px;display:grid;gap:16px}
.f-contact dt{font:600 12px/17.4px var(--sans);letter-spacing:.02em;opacity:.6}
.f-contact dd{margin:2px 0 0;font:400 14px/21px var(--sans)}
.cols{margin-left:118px;display:flex;gap:16px;padding-top:8px}
.cols>div{width:158px}
.cols>div:last-child{width:171px}
.cols h4{font:600 14px/17.5px var(--sans);opacity:.6}
.cols ul{margin-top:23px;display:grid;gap:24px;font:400 14px/21px var(--sans)}
.cols a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.cols a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 友站連結：接在聯絡資訊和欄位下方自成一列（flex-wrap 換行），高度跟著內容走 */
.friends{flex-basis:100%;margin-top:72px}
.friends h4{font:600 14px/17.5px var(--sans);opacity:.6}
.friends ul{margin-top:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.friends a{display:flex;align-items:center;justify-content:center;height:58px;padding:10px 14px;border-radius:8px;background:var(--logo-plate);box-shadow:inset 0 0 0 1px var(--surface-2);transition:background .2s}
.friends a:hover{background:var(--logo-plate-hover)}
.friends img{display:block;max-width:100%;max-height:38px;width:auto;height:auto}
.f-bot{margin-top:56px;display:flex;justify-content:center;align-items:center;gap:16px;font:400 14px/21px var(--sans)}
.f-bot .mark{width:32px;height:32px}
.f-bot span{opacity:.6}

/* =============== 手機（≤767px） =============== */
@media (max-width:767px){
  .wrap{width:auto;margin:0 20px}
  .only-d{display:none!important}
  .only-m{display:revert}
  .hdr{height:62px}
  .hdr .wrap{margin:0 17px;height:62px}
  .logo span,.search,.hdr-r>a:not(.btn){display:none}
  .hdr-r{gap:0}
  .hdr-r .btn{width:157px;height:42px;margin:0}
  .themes{gap:4px;padding:4px;margin-right:8px}
  .themes .sw{width:18px;height:18px}
  .burger{display:block;width:24px;height:40px;margin-left:10px;background:linear-gradient(var(--text),var(--text)) 3px 13px/18px 2px no-repeat,linear-gradient(var(--text),var(--text)) 3px 19px/18px 2px no-repeat,linear-gradient(var(--text),var(--text)) 3px 25px/18px 2px no-repeat}
  .burger:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  /* 選單打開時三條線換成 X */
  .burger[aria-expanded=true]{position:relative;background:none}
  .burger[aria-expanded=true]::before,.burger[aria-expanded=true]::after{content:"";position:absolute;left:3px;top:19px;width:18px;height:2px;background:var(--text);transform:rotate(45deg)}
  .burger[aria-expanded=true]::after{transform:rotate(-45deg)}
  /* 面板掛在 sticky 的 .hdr 底下，蓋在內容上、跟著頁首一起固定 */
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border)}
  .mnav[hidden]{display:none}
  .mnav ul{padding:4px 17px 12px}
  .mnav li+li{border-top:1px solid var(--border)}
  .mnav a{display:flex;align-items:center;height:56px;font:600 20px/25px var(--sans);letter-spacing:.01em}
  .mnav a[aria-current]{color:var(--highlight)}
  .mnav a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
  .btn{height:42px;font-size:16px;line-height:18px}

  .pgrid{grid-template-columns:repeat(2,1fr);gap:28px 12px}
  .pgrid .card{height:300px;padding:0 10px 14px}
  .pgrid .card .badge{left:10px;top:10px}
  .pgrid .c-title{font-size:30px;line-height:28px}
  .pgrid .c-title.serif{font-size:21px;line-height:22px}
  .pgrid .dash{margin-top:12px}
  .pgrid .c-who{margin-top:8px;min-height:34px;font-size:13px;line-height:17px}
  .pgrid .desc{font-size:13px;line-height:19px}

  .posts{grid-template-columns:1fr;gap:32px}
  .post-img{height:200px}
  .post h3{font-size:18px;line-height:24px}

  .foot{margin:0 0 15px;padding-bottom:40px}
  .foot .wrap{display:block;margin:0 17px;padding-top:51px}
  .f-l{width:auto}
  .f-l h3{font-size:18px;line-height:22.5px}
  .f-l>p{margin-top:7px;line-height:20.3px}
  .cols{margin:60px -3px 0;gap:36px 10px;flex-wrap:wrap;padding:0}
  .cols>div{width:176px}
  .cols ul{margin-top:19px;gap:22px;line-height:20.3px}
  .friends{margin:56px -3px 0}
  .friends ul{grid-template-columns:repeat(2,1fr);gap:10px}
  .m-logo{width:88px;height:75px;margin:51px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px}
  .m-logo .mark{width:44px;height:44px}
  .m-logo b{font:700 17px/20px var(--serif)}
  .f-bot{flex-direction:column;gap:9px;margin-top:21px}
  .f-bot .mark{display:none}
  .f-bot span{text-align:center}
}

/* =============== 平板（768–1239px） ===============
   桌機版以 .wrap 固定 1200px 排版，視窗比這窄就會被切掉；這裡改成流動寬度。
   ≥1240 的桌機版、≤767 的手機版都不受影響。各頁獨有區塊的平板規則寫在各頁 <style> 最後 */
@media (min-width:768px) and (max-width:1239px){
  .wrap{width:auto;margin:0 32px}
  /* 頁首：搜尋框跟著縮，放不下時在下一段隱藏。不能加 overflow:hidden，會把下拉清單切掉 */
  .search{width:auto;flex:0 1 400px;min-width:0}
  /* 頁尾：聯絡資訊獨佔一列，四欄連結排在下面平分寬度 */
  .f-l{width:100%}
  .cols{flex:1 1 100%;margin:48px 0 0}
  .cols>div,.cols>div:last-child{width:auto;flex:1 1 0}
  .friends ul{grid-template-columns:repeat(3,1fr)}
  .pgrid .card{height:400px}
  /* 四欄時卡片最窄約 222 寬（1024px 視窗），桌機版字級會讓「Taking Refuge in」斷成三行 */
  .pgrid .c-title{font-size:40px;line-height:38px}
  .pgrid .c-title.serif{font-size:26px;line-height:28px}
}
/* 1099px 以下搜尋框會被擠到只剩幾個字，乾脆隱藏；這個寬度可改用課程目錄頁自己的搜尋 */
@media (min-width:768px) and (max-width:1099px){
  .search{display:none}
}
/* 窄平板（768–1023px）：頁首只留圓標、導覽連結、主題、按鈕；課程卡改三欄 */
@media (min-width:768px) and (max-width:1023px){
  .logo span{display:none}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  /* 三欄時卡片約 210 寬，標題字不縮會斷成四行 */
  .pgrid .c-title{font-size:38px;line-height:36px}
  .pgrid .c-title.serif{font-size:24px;line-height:26px}
}